D3 Examples - Traffic fatalities in North Carolina over 2012

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Traffic Fatalities in North Carolina, 2012</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js" charset="utf-8"></script>
        <style media="screen">
            body {
                margin: 0;
                background-color: lightGrey;
                font-family: Helvatica, sans-serif;
            }
​
            #container {
                width: 600px;
                background-color: white;
                box-shadow: 3px 3px 5px #ccc;
                margin: 50px auto 0;
                padding: 40px;
            }
​
            h2 {
                text-align: center;
            }
​
            p {
                text-align: center;
            }
​
            svg {
                background-color: white;
            }
​
            g.bar text {
                opacity: 0;
                font-size: 11px;
                font-family: sans-serif;
                font-weight: bold;
                text-anchor: end;
            }
​
            g.bar:hover text {
                opacity: 1;
            }
​
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11pt;
            }
​
            .y.axis path,
            .y.axis line {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
        <h2>Traffic Fatalities in North Carolina, 2012</h2>
        <p>as reported by the <a href="https://connect.ncdot.gov/business/DMV/DMV%20Documents/2012%20Crash%20Facts.pdf">North Carolina Department of Transportation</a></p>
        </div>
    </body>
    <script type="text/javascript">
        var dataset = [{month: 'January', fatalities: 73}, {month: 'February', fatalities: 86}, {month: 'March', fatalities: 97},
            {month: 'April', fatalities: 85}, {month: 'May', fatalities: 109}, {month: 'June', fatalities: 118},
            {month: 'July', fatalities: 125}, {month: 'August', fatalities: 120}, {month: 'September', fatalities: 128},
            {month: 'October', fatalities: 116},{month: 'November', fatalities: 110}, {month: 'December', fatalities: 95}];
​
        var w = 600;
        var h = 600;
        var padding = [ 50, 50, 50, 100];
​
​
        var yScale = d3.scale.ordinal()
            .domain(dataset.map(function(d){ return d.month; }))
            .rangeRoundBands([padding[0], h - padding[2] ], 0.1);
​
        var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d){ return d.fatalities; })])
            .range([0, w - padding[1] - padding[3]]);
​
​
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient('bottom');
​
        var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient('left');
​
        var svg = d3.select('#container')
            .append('svg')
            .attr({
                width: w,
                height: h
            });
​
        var groups = svg.selectAll("g")
            .data(dataset)
            .enter()
            .append("g")
            .attr({
                class: 'bar'
            });
​
​
        var bars = groups.append('rect')
            .attr({
                x: padding[3],
                y:  function(d){ return yScale(d.month); },
                width: 0,
                height: yScale.rangeBand(),
                fill: 'FireBrick'
            });
​
        var text = groups.append('text')
            .text(function(d){ return d.fatalities; })
            .attr({
                x: 0,
                y: function(d){ return yScale(d.month) + yScale.rangeBand()/2; },
            });
​
        bars.transition()
            .delay( function(d, i){ return i * 25; })
            .duration(500)
            .attr({
                width: function(d){ return xScale(d.fatalities); },
            });
​
        text.transition()
            .delay( function(d, i){ return i * 25; })
            .duration(500)
            .attr({
                x: function(d){ return xScale(d.fatalities) + padding[3] - 10;},
            });
​
        svg.append('g')
            .attr({
                class: 'x axis',
                transform: 'translate(' + padding[3] + ', ' + (h - padding[2]) + ')',
            })
            .call(xAxis);
​
        svg.append('g')
            .attr({
                class: 'y axis',
                transform: 'translate( ' + padding[3] + ', 0)',
            })
            .call(yAxis);
​
        bars.on('mouseover', function(){
                d3.select(this).attr({
                    fill: 'CadetBlue'
                });
            })
            .on('mouseout', function(){
                d3.select(this).transition()
                    .duration(100)
                    .attr({
                    fill: 'FireBrick'
                });
            });
​
    </script>
</html>
​
    