D3 Examples - Bicycle traffic in the East Midlands from 2007 to 2011

xxxxxxxxxx
 
<!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>
    