D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
cwcromwell
Full window
Github gist
Killings by year
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Oakland murder data</title> <meta name="description" content="Murders in Oakland, by year from 2000 to 2012."> <link rel="stylesheet" href="murder.css"> <script src="https://d3js.org/d3.v3.min.js"></script> </head> <body> <script> var ecks; var wye; var w=960; var h=350; var padding = [10, 10, 50, 50]; var dateFormat = d3.time.format("%Y"); var xscale = d3.time.scale() .range([padding[3], w-padding[1]-padding[3]]); var yscale = d3.scale.linear() .range([10, h-50]); // yscale.domain(d3.range(150)); var murderscale = d3.scale.linear() .domain([0, 160]) .range([0, h-padding[0] - padding[2]]); d3.csv("murder.csv", function(data) { xscale.domain([ d3.min(data, function(d) { return dateFormat.parse(d.year); }), d3.max(data, function(d) { return dateFormat.parse(d.year); }) ]); yscale.domain([160, 0 ]); var xAxis=d3.svg.axis() .scale(xscale) .orient("bottom") .ticks(16) .tickFormat(function (d) { return dateFormat(d) }); var Yaxis = d3.svg.axis() .scale(yscale) .orient("left"); var line = d3.svg.line() .x(function (d) { return xscale(dateFormat.parse(d.year)); }) .y(function (d) { return h- padding[2] - (murderscale(d.killings)); }); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); console.log("working on data: " + w + " " + h); svg.data([data]) // .enter() .append("path") .attr("class", "lineMurder") .attr("d", line) .attr ("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2); svg.append("g") .attr("class", "xaxis") .attr("transform", "translate(0," + (h- padding[2] + 10)+ ")") .call(xAxis); // .orient("bottom"); svg.append("g") .attr("class", "Yaxis") .attr("transform", "translate(" + (padding[3] - 15) + ",0)") .call(Yaxis); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js