D3 Examples - Bicycle and car traffic in the East Midlands in 2007 and 2011

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bicycle and car traffic in the East Midlands in 2007 and 2011</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
            }
​
            h1 {
                font-size: 24px;
                margin: 0;
            }
​
            p {
                font-size: 14px;
                margin: 10px 0 0 0;
            }
​
            svg {
                background-color: white;
            }
​
            circle:hover {
                fill: white;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
        </style>
    </head>
    <body>
​
        <h1>Bicycle and car traffic in the East Midlands in 2007 and 2011</h1>
​
        <p>Traffic counts are averages given for 12 hours of a day from 7am to 6pm. Source: <a href="https://data.gov.uk/dataset/gb-road-traffic-counts/resource/8d49272c-e525-495e-a60c-a93d62aedd6e">gov.uk</a></p>
​
        <script type="text/javascript">     
​
​
            var w = window.innerWidth;
            var h = window.innerHeight/1.25;
            var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left
​
​
​
            var xScale = d3.scale.linear()
                                .range([ padding[3], w/2 - padding[1] - padding[3] ]);
            
            var yScale = d3.scale.linear()
                                .range([h - padding[2], padding[0]]);   
                                
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(10);
​
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .ticks(10);
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            d3.csv("urban traffic 2007-2011 bicycles and cars.csv", function(data) {
​
                xScale.domain([ 0, d3.max(data, function(d) {
                    return +d.PC2011;
                }) ]);
​
                yScale.domain([ d3.min(data, function(d) {
                    return +d.CAR2007;
                }), d3.max(data, function(d) {
                    return +d.CAR2011;
                }) ]);
​
                var circles = svg.selectAll("circle")
                                .data(data)
                                .enter()
                                .append("circle");
​
                circles.attr("cx", function(d) {
                return xScale(d.PC2007)
                })
                    .attr("cy", function(d) {
                return yScale(d.CAR2007)
                })
                    .attr("r", 6)
                    /*.attr("height", yScale.rangeBand())*/
                    .style("opacity", 0)
                    .attr("fill","teal")
                    .attr("stroke","teal")
                    var circletitles = circles.append("title")
                    .text(function(d) {
                        return d3.round(d.PC2007,1) + " bicycles and" + " " + d3.round(d.CAR2007,1) + " " + "cars were recorded on average in the hour after" + " " + d.Hour + ":00" + " " + "in 2007" + " " + "on" + " " + d.RCat + " " + "roads";
                    });
                    
                    circles.sort(function (a,b) {
                    return d3.ascending(a.PC2007, b.PC2007)
                    })
                    .transition()
                    .duration(2000)
                    .delay(function(d,i) {
                    return i * 250;
                    })
                    .style("opacity",1)
                
                var xAxisCall = svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(" + 0 + "," + (h - padding[2]) + ")")
                    .call(xAxis);
​
                var yAxisCall = svg.append("g")
                
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ",0)")
                    .call(yAxis);
                
                var yeartext = svg.append("g")
                .append("text")
                .attr("transform", "translate(" + padding[3] + "," + h/2 + ")")
                .attr("font-size",72)
                .text("2007");
                
                update()
                
                function update() {
                    
                xScale.domain([ 0, d3.max(data, function(d) {
                    return +d.PC2011;
                }) ]);
                
                yScale.domain([ d3.min(data, function(d) {
                    return +d.CAR2007;
                }), d3.max(data, function(d) {
                    return +d.CAR2011;
                }) ]);
                
                xAxisCall
                .transition()
                .duration(1000)
                .delay(5000)
                .call(xAxis);
                
                yAxisCall
                .transition()
                .duration(1000)
                .delay(5000)
                .call(yAxis);
                
                circles
                .transition()
                .duration(1000)
                .delay(5000)
                .attr("cx", function(d) {
                return xScale(d.PC2011)
                })
                .attr("cy", function(d) {
                return yScale(d.CAR2011)
                })
                circletitles
                .transition()
                .duration(1000)
                .delay(5000)
                .text(function(d) {
                        return d3.round(d.PC2007,1) + " bicycles and" + " " + d3.round(d.CAR2007,1) + " " + "cars were recorded on average in the hour after" + " " + d.Hour + ":00" + " " + "in 2011" + " " + "on" + " " + d.RCat + " " + "roads";
                    });
                
                yeartext.transition()
                .delay(5500)
                .text("2011");
                }
                
                });
                
                svg.append("g")
                .append("text")
                .attr("transform", "translate(" + padding[3] + "," + (h/10 - padding[2]) + ")")
                .text("cars");
                
                svg.append("g")
                .append("text")
                .attr("transform", "translate(" + (w/4 + padding[3] + padding[1]) + "," + (h - padding[2]) + ")")
                .text("bicycles");
                
                svg.append("g")
                .append("text")
                .attr("transform", "translate(" + (w/3 + padding[3] + padding[1]) + "," + (h/3 + padding[1]) + ")")
                .text("Average counts of both bicycles and cars have risen from 2007 to 2011.");
                
                svg.append("g")
                .append("text")
                .attr("transform", "translate(" + (w/3 + padding[3] + padding[1]) + "," + (h/3 + padding[2]) + ")")
                .text("However, bicycle use shows a greater increase as is seen by the rightward shift");
                
                svg.append("g")
                .append("text")
                .attr("transform", "translate(" + (w/3 + padding[3] + padding[1]) + "," + (h/3 + padding[2] + padding[0]) + ")")
                .text("along the x axis from 2007 to 2011.");
                
        </script>
​
    </body>
</html>
    