D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
EmbraceLife
Full window
Github gist
step 2
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <style> .axis--x path { display: none; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style> <svg width="960" height="500"></svg> <script src="//d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), margin = {top: 20, right: 80, bottom: 30, left: 50}, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 1. format date for data file var parseTime = d3.timeParse("%Y%m%d"); // 2. func => map date to px // 2.1 create a func for time var x = d3.scaleTime() // 2.2 set px range .range([0, width]); // 3. func => map temperature to px // 2.1 create a func for numeric y = d3.scaleLinear() // 2.2 set px range .range([height, 0]); // 3. func => map city names to color // 2.1 create a func for color // 2.2 and get 10 default colors for use z = d3.scaleOrdinal(d3.schemeCategory10); // 4. func => tranform data points into points of lines var line = d3.line() // 4.1 keep lines smooth .curve(d3.curveBasis) // 4.2 match data points to points (x, y) of line .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.temperature); }); </script>
https://d3js.org/d3.v4.min.js