xxxxxxxxxx<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> <script> let dataset, xAxis, yAxis, yAxis2, xScale, yScale, yScale2, dataNest, line, minValue, maxValue, startYear, endYear; 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