xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title> Country Trends </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script> <style type="text/css"> .BiocapTotGHA{ fill:none; stroke:#517212; stroke-width:2; } .EFConsTotGHA{ fill:none; stroke:#cd0000; stroke-width:2; } button{ position: relative; left:350px; } </style> </head> <body> <div id="svg"></div> <button> Switch Countries </button> <script> let countryCSV = 'world.csv', title = 'World Country Trend'; let rowConverter = (d) =>{ return { year: +d.year, total: +d.Total, record: d.Record } } let legendKey = [['Ecological Footprint', '#cd0000'],['Biocapacity', '#517212'],['Ecological Deficit', '#da4040'],['Ecological Reserve', '#7d954d']] let width = 700, height = 400, padding = 100; let dataset, xScale, yScale, xAxis, yAxis, line, line2, EFConsTotGHA, BiocapTotGHA, dataNest, ecoReserve, ecoDeficit; let svg = d3.select('#svg') .append('svg') .attr('width', width) .attr('height', height) d3.csv('world.csv', rowConverter, (data)=>{ EFConsTotGHA = data.filter((d)=>{ return d.record == "EFConsTotGHA" }) BiocapTotGHA = data.filter((d)=>{ return d.record == "BiocapTotGHA" }) dataNest = d3.nest() .key((d)=>{ return d.record; }) .entries(data) xScale = d3.scaleLinear() .domain([ d3.min(EFConsTotGHA, (d)=>{ return d.year }), d3.max(EFConsTotGHA, (d)=>{ return d.year }) ]) .range([padding, width]); yScale = d3.scaleLinear() .domain([ d3.min(EFConsTotGHA, (d)=>{ return d.total }), d3.max(EFConsTotGHA, (d)=>{ return d.total }) ]) .range([height-padding, 0]) xAxis = d3.axisBottom() .scale(xScale) .ticks(10) .tickFormat(d3.format('d')) yAxis = d3.axisLeft() .scale(yScale) .ticks(10) line = d3.line() .curve(d3.curveBasis) .x((d)=>{ return xScale(d.year)}) .y((d)=>{ return yScale(d.total)}) ecoReserve = d3.area() .curve(d3.curveBasis) .x((d)=> {return xScale(d.year)}) .y0((d,i)=> { if(EFConsTotGHA[i].total > BiocapTotGHA[i].total){ return yScale(BiocapTotGHA[i].total) }else{ return yScale(EFConsTotGHA[i].total) } }) .y1((d,i)=> {return yScale(BiocapTotGHA[i].total)}) ecoDeficit = d3.area() .curve(d3.curveBasis) .x((d)=> {return xScale(d.year)}) .y0((d,i)=> { if(EFConsTotGHA[i].total < BiocapTotGHA[i].total){ return yScale(BiocapTotGHA[i].total) }else return yScale(EFConsTotGHA[i].total) }) .y1((d,i)=> {return yScale(BiocapTotGHA[i].total)}) let rect = svg.selectAll('rect') .data(legendKey) .enter() .append('rect') rect.attr('x', (d, i) =>{ return (i * (width * 0.8 / legendKey.length)) + padding }) .attr('y', (d,i)=>{ if(i == 0 || i == 1){ return (height * 0.9) + 7 }else return height * 0.9 }) .attr('width', 20) .attr('height', (d,i)=>{ if(i == 0 || i ==1){ return 5 }else return 20 }) .attr('fill', (d,i)=>{ return legendKey[i][1] }) svg.selectAll('text') .data(legendKey) .enter() .append("text") .text(function(d) { return d[0]; }) .attr("x", function(d,i) { return (i * (width * 0.8 / legendKey.length)) + padding + 22 }) .attr("y", function(d) { return (height * 0.9) + 13 }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", (d,i)=>{ return legendKey[i][1] }); dataNest.forEach((d)=>{ svg.append('path') .attr('class', d.key ) .attr("id", d.key ) .attr('d', line(d.values)) }) svg.append('path') .datum(EFConsTotGHA) .attr('class', 'ecoReserve') .attr('d', ecoReserve) .attr('fill', '#7d954d') .style("opacity", 0.5) svg.append("text") .attr("id", "title") .attr("x", (width/2) -50) .attr("y", 20) .text("World Country Trend") .style('font-size', '25px') svg.append('path') .datum(EFConsTotGHA) .attr('class', 'ecoDeficit') .attr('d', ecoDeficit) .attr('fill', '#da4040') .style("opacity", 0.5) svg.append('g') .attr('class', 'x axis') .attr("transform", "translate(0," + (height - padding) + ")") .call(xAxis) svg.append('g') .attr('class', 'y axis') .attr("transform", "translate(" + padding + ",0)") .call(yAxis) }) //end of original csv call d3.select('button') .on('click', ()=>{ if(countryCSV == 'world.csv'){ countryCSV = 'norway.csv' }else countryCSV = 'world.csv' d3.csv(countryCSV, rowConverter, (data)=>{ console.log(title) EFConsTotGHA = data.filter((d)=>{ return d.record == "EFConsTotGHA" }) BiocapTotGHA = data.filter((d)=>{ return d.record == "BiocapTotGHA" }) dataNest = d3.nest() .key((d)=>{ return d.record; }) .entries(data) xScale = d3.scaleLinear() .domain([ d3.min(EFConsTotGHA, (d)=>{ return d.year }), d3.max(EFConsTotGHA, (d)=>{ return d.year }) ]) .range([padding, width]); yScale = d3.scaleLinear() .domain([ d3.min(EFConsTotGHA, (d)=>{ return d.total }), d3.max(EFConsTotGHA, (d)=>{ return d.total }) ]) .range([height-padding, 0]) dataNest.forEach((d)=>{ svg.select('.' + d.key) .transition() .duration(1000) .attr('d', line(d.values)) /* svg.append('path') .attr('class', d.key ) .attr('d', line(d.values)) */ }) xAxis = d3.axisBottom() .scale(xScale) .ticks(10) .tickFormat(d3.format('d')) yAxis = d3.axisLeft() .scale(yScale) .ticks(10) ecoReserve = d3.area() .curve(d3.curveBasis) .x((d)=> {return xScale(d.year)}) .y0((d,i)=> { if(EFConsTotGHA[i].total > BiocapTotGHA[i].total){ return yScale(BiocapTotGHA[i].total) }else{ return yScale(EFConsTotGHA[i].total) } }) .y1((d,i)=> {return yScale(BiocapTotGHA[i].total)}) ecoDeficit = d3.area() .curve(d3.curveBasis) .x((d)=> {return xScale(d.year)}) .y0((d,i)=> { if(EFConsTotGHA[i].total < BiocapTotGHA[i].total){ return yScale(BiocapTotGHA[i].total) }else return yScale(EFConsTotGHA[i].total) }) .y1((d,i)=> {return yScale(BiocapTotGHA[i].total)}) svg.select('#title') .transition() .duration(500) .text((d)=>{ if(countryCSV == 'world.csv'){ return 'World Country Trend' }else return 'Norway Country Trend' }) svg.select('.ecoDeficit') .transition() .duration(1000) .attr('d', ecoDeficit) svg.select('.ecoReserve') .transition() .duration(1000) .attr('d', ecoReserve) svg.select(".x.axis") .transition() .duration(500) .call(xAxis) svg.select(".y.axis") .transition() .duration(1000) .call(yAxis) }) }) // end of d3.select </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js