D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
davo
Full window
Github gist
Sparkline
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="d3-jetpack.js"></script> <style> body { margin:20px;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width:100%; height: 100% } </style> </head> <body> <script> var dataset = [ { "Month": 1, "Tweets": 461 }, { "Month": 2, "Tweets": 389 }, { "Month": 3, "Tweets": 535 }, { "Month": 4, "Tweets": 515 }, { "Month": 5, "Tweets": 379 }, { "Month": 6, "Tweets": 338 }, { "Month": 7, "Tweets": 384 }, { "Month": 8, "Tweets": 400 }, { "Month": 9, "Tweets": 455 }, { "Month": 10, "Tweets": 327 }, { "Month": 11, "Tweets": 418 }, { "Month": 12, "Tweets": 374 } ]; var width = 200, height = 40; //Add a quarter-year property to each object in the dataset for (var i in dataset) { dataset[i].Month = dataset[i].Month + "/2015"; } //Append an SVG to the document body var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g"); var x = d3.scale.ordinal() .domain(dataset.map(function(d) { return d.Month; })) .rangeRoundBands([0, width], .04); var y = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d.Tweets; })]) .range([height, 0]); //Draw the line graph var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.Month); }) .y(function(d) { return y(d.Tweets); }) //Append a path to the SVG svg.append("path") .attr("d", line(dataset)) .attr("class", "linePath") .attr("fill", "none") .attr("stroke", "#000000") .attr("stroke-width", 1.5); </script> </body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js