D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jdistorey
Full window
Github gist
Bicycle traffic in the East Midlands from 2007 to 2011
<!DOCTYPE html> <html lang="en"> <style> h1 { font-size:22px; } </style> <head> <meta charset="utf-8"> <title>Bicycle traffic counts in the East Midlands from 2007 - 2011</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <h1>This bar chart displays average counts of bicycle traffic in the East Midlands between 2007 and 2011. Each bar represents an average count per hour for one of two different road types. The chart distinguishes between the two road types (rural and urban) by using two separate colours. Values have been rounded to the nearest integer.</h1> </head> <body> <script type="text/javascript"> var width=300; var height=800; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); //Load in contents of CSV file d3.csv("traffic counts in the East Midlands 2007 - 2011 by hour and road type.csv", function(data) { /*data.sort(function(a,b) { return d3.descending(a.PC,b.PC); });*/ var rects = svg.selectAll("rect") .data(data) .enter() .append("rect"); rects.attr("x",0) .attr("y", function(d,i) { return i * 31; }) .attr("width", function(d) { return Math.round(d.PC) * 30; }) .attr("height", 30) .attr("fill",function(d) { if (d.RCat=="urban") {return "Aqua"} if (d.RCat=="rural") {return "Brown"} }) .append("title") .text(function(d) { return "An average of " + Math.round(d.PC) + " bicycles were seen on " + d.RCat + " roads in the hour following " + d.Hour + ":00 between 2007 and 2011"; }); }); </script> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js