D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
allyraza
Full window
Github gist
multiline chart
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body {padding: 100px; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { border: 1px solid #ddd; } </style> </head> <body> <script> var margin = { top: 10, right: 10, bottom: 10, left: 10 }; var outerWidth = 350; var outerHeight = 200; var width = outerWidth - margin.left - margin.right; var height = outerHeight - margin.bottom - margin.top; var svg = d3.select("body").append("svg") .attr("width", outerWidth) .attr("height", outerHeight) .append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); var parseDate = d3.timeParse('%d-%b-%y'); var x = d3.scaleTime() .range([0, width]); var y = d3.scaleLinear() .range([height, 0]); var line = d3.line() .curve(d3.curveCatmullRom) .x(d => x(d.date)) .y(d => y(d.value)); var targetLine = d3.line() .curve(d3.curveCatmullRom) .x(d => x(d.date)) .y(d => y(d.target)); function draw(error, data) { if (error) return; data.forEach(d => { d.value = +d.value; d.target = +d.target; d.date = parseDate(d.date); }); x.domain(d3.extent(data, d => d.date)); y.domain([0, d3.max(data, d => d.value)]); svg.append('g') .append('path') .datum(data) .attr('stroke', 'skyblue') .attr('opacity', '0.6') .attr('stroke-width', '1.5') .attr('stroke-dasharray', '5') .attr('fill', 'none') .attr('d', line); var g = svg.append('g'); g.append('path') .datum(data) .attr('stroke', 'skyblue') .attr('stroke-width', '1.5') .attr('fill', 'none') .attr('d', targetLine); var last = data.filter(d => d.target).slice(-1).pop(); console.log(last); g.append('circle') .attr('stroke', 'skyblue') .attr('stroke-width', '1.5') .attr('fill', 'none') .attr('cx', x(last.date) + 5 ) .attr('cy', y(last.target)) .attr('r', 4); } d3.csv('data.csv', draw); </script> </body>
https://d3js.org/d3.v4.min.js