D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ZoeLeBlanc
Full window
Github gist
Line Chart Transition
forked from
pjsier
's block:
Line Chart Transition
<!DOCTYPE html> <html> <head> <title>Line Chart Transition</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta charset='utf-8' /> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #chart { max-width: 600px; max-height: 400px; } </style> </head> <body> <div id="chart"></div> <script src="script.js"></script> <script> var lines = timelineChart(); function resize() { if (d3.select("#chart svg").empty()) { return; } lines.width(+d3.select("#chart").style("width").replace(/(px)/g, "")) .height(+d3.select("#chart").style("height").replace(/(px)/g, "")); d3.select("#chart").call(lines); } d3.csv("data.csv", function (data) { console.log(data); d3.select("#chart").datum(data).call(lines); d3.select(window).on('resize', resize); resize(); }); </script> </body> </html>
https://d3js.org/d3.v4.min.js