GFN Country Trend: D3js

<html>
	<head>
		<meta charset="utf-8">
		<title> Country Trends </title>

.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)

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