D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
hamtolchu
Full window
Github gist
Simple Line Chart
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> var data = [{x: 0, y: 0}, {x: 10, y: 10}, {x: 20, y: 20}, {x: 30, y: 30}, {x: 40, y: 40}, {x: 50, y: 50}, {x: 60, y: 60}, {x: 70, y: 70}, {x: 80, y: 80}] var svg = d3.select("body").append("svg") .attr("width", 500) .attr("height", 500) var scale = { x: d3.scale.linear().domain([0, 80]).range([0, 500]), y: d3.scale.linear().domain([0, 80]).range([0, 500]) } var axis = { x: d3.svg.axis().scale(scale.x).orient('bottom').innerTickSize(-chartVisual.height).outerTickSize(0).tickPadding(10), y: d3.svg.axis().scale(scale.y).orient('left').innerTickSize(-chartVisual.width).outerTickSize(0).tickPadding(10) } var line = d3.svg.line() .x(function(d) { return xScale(d.month); }) .y(function(d) { return yScale(d.spent); }); </script> </body>
https://d3js.org/d3.v4.min.js