Socio_Economic

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset="utf-8">
		<title> Multi Line</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
		<style>

</style>
	</head>
	<body>
		<div id="svg"></div>

let width = 1000,
				height = 500,
				margin = {top:50, right:50, bottom: 50, left: 100};

let svg = d3.select('#svg')
						.append('svg')
						.attr('width', width)
						.attr('height', height)

let rowConvertor = (d)=>{
				return {
					year : +d.year,
					total : +d.value,
					record: d['record'],
					countryName: d['Country Name']
				}
			}

function minMax(d){

let dataset = [];

for(let i = 0; i<d.length; i++){
						let elm = d[i].values
						for(let j =0 ; j < elm.length; j++){
							dataset.push(elm[j].total)
						}
					}

let minValue = dataset.reduce((prev, current)=>{
					return prev < current ? prev : current 			
					})

let maxValue = dataset.reduce((prev, current)=>{
						return prev > current ? prev : current
					})

return obj = {
						min: minValue,
						max: maxValue
					}
				}

let colors = d3.scaleOrdinal(d3.schemeCategory10);

d3.csv('world_Socio.csv', rowConvertor, (data)=>{

let EFConsTotGHA = data.filter((d)=>{
					return d.record == "EFConsTotGHA"
				})

startYear = EFConsTotGHA[0].year

endYear = EFConsTotGHA[EFConsTotGHA.length-1].year

dataset = data.filter((d)=>{
					return d.year > startYear && d.year < endYear
				})

dataNest = d3.nest()
								.key((d)=>{
									return d.record
								})
								.entries(dataset)

let leftAxis = dataNest.filter((d)=>{
					return d.key != 'Population' && d.key != 'hdi' && d.key != 'gdp'
				})

let rightAxis = dataNest.filter((d)=>{
					return d.key == 'Population' || d.key == 'hdi' || d.key == 'gdp'
				})

xScale = d3.scaleLinear()
							.domain([
									d3.min(EFConsTotGHA, (d)=>{
										return d.year
									}),
									d3.max(EFConsTotGHA, (d)=>{
										return d.year
									})
								])
							.range([margin.left,width-margin.left])

yScale = d3.scaleLinear()
							.domain([
									minMax(leftAxis).min,
									minMax(leftAxis).max
								])
							.range([height-margin.bottom, 0 ])

yScale2 = d3.scaleLinear()
							.domain([
									minMax(rightAxis).min,
									minMax(rightAxis).max
								])
							.range([height-margin.bottom, 0])

xAxis = d3.axisBottom()
							.scale(xScale)
							.ticks(10)
							.tickFormat(d3.format('d'))

yAxis = d3.axisLeft()
							.scale(yScale)
							.ticks(10)

yAxis2 = d3.axisRight()
							.scale(yScale2)
							.ticks(10)

line = d3.line()
							.curve(d3.curveBasis)
							.x((d)=> {return xScale(d.year)})
							.y((d)=> {return yScale(d.total)})

line2 = d3.line()
							.curve(d3.curveBasis)
							.x((d)=>{ return xScale(d.year)})
							.y((d)=>{ return yScale2(d.total)})

dataNest.forEach((d)=>{
					if(d.key != 'Population' && d.key != 'hdi' && d.key != 'gdp'){
						svg.append('path')
							.attr('id', d.key)
							.attr('d', line(d.values))
							.attr('fill', 'none')
							.attr('stroke', (d,i)=>{
								let number = Math.floor(Math.random() * 6) + 1  
								return colors(number)
							})
							.style("stroke-dasharray", ("3, 3")) 
					}else{
						svg.append('path')
							.attr('id', d.key)
							.attr('d', line2(d.values))
							.attr('fill', 'none')
							.attr('stroke', (d,i)=>{
								let number = Math.floor(Math.random() * 6) + 1  
								return colors(number)
							})
							.style("stroke-dasharray", ("3, 3")) 
					}
				})

svg.append('g')
					.attr('class', 'x axis')
					.attr('transform', 'translate(0,' + (height-margin.bottom) + ')')
					.call(xAxis)

svg.append('g')
					.attr('class', 'y axis')
					.attr('transform', 'translate(' + (margin.left) + ', 0 )')
					.call(yAxis)

svg.append('g')
					.attr('class', 'y axis2')
					.attr('transform', 'translate(' + (width  - margin.left) + ', 0 )')
					.call(yAxis2)

})
		</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js