Animated Stacked Bar Chart - Accident Statistics in India (2009 - 2012)

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: relative;
        width: 960px;
    }

.axis text {
        font: 11px sans-serif;
    }

.axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

.bar {
        fill: steelblue;
        fill-opacity: .9;
    }

.x.axis path {
        display: none;
        text-anchor: "end";
    }

label {
        position: absolute;
        right: 10px;
    }

#container {
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
        width: 1080px;
        padding: 50px;
        margin-left: auto;
        margin-right: auto;
        box-shadow: 3px 3px 5px 5px #cccccc;
    }
    #mySvg {
        margin-left: auto;
        margin-right: auto;
    }

</style>
<div id="container">
    <h1>Comparison of Share of Road Accidents by State in India between 2009 and 2012</h1>
    <p>Stacked bar chart of road accidents by state is shown in the scatter plot. All the states in India are listed along the x-axis.
        The stack of accidents in each of the four years is shown along the y-axis. The color of each bar differentiates the contribution of accidents each year. Source: <a href="https://data.gov.in/keywords/indian-road-accident-data">data.gov.in</a>, 2015
    </p>
    <label><input type="checkbox"> Sort values</label>
    <svg id="mySvg"></svg>
    <p>A check box is provided to arrange the states by the number of accidents. Unchecking the box re-arranges the states alphabetically. There are few issues that still need to be resolved.
    For example, getting the state names initially is not very intuitive. The tool-tip has not been implemented yet.</p>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 100, left: 100},
            width = 960 - margin.left - margin.right,
            height = 600 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1, 1);

var y = d3.scale.linear()
            .range([0, height]);

var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom");

var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");

var colors = d3.scale.category10();

var stack = d3.layout.stack();  //Flip the order

var svg = d3.select("#mySvg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("roadac2012_AnnexureII.csv", function(error, data) {

data = data.map(function(d){
            return [{x:2009, y:+d.accidents2009, state: d.states},
                {x:2010, y:+d.accidents2010, state: d.states},
                {x:2011, y:+d.accidents2011, state: d.states},
                {x:2012, y:+d.accidents2012, state: d.states}]
        });
        data = data[0].map(function(col, i) {
            return data.map(function(row) {
                return row[i]
            })
        });

stack(data);

x.domain(d3.range(data[0].length));

y.domain([0,
            d3.max(data, function (d) {
                return d3.max(d, function (d) {
                    return d.y0 + d.y;
                });
            })
        ]);
        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", ".15em")
                .attr("transform", "rotate(-65)" );

svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("No. of Accidents");

d3.select("input").on("change", change);

function change() {
            //clearTimeout(sortTimeout);
            //console.log(data)

// Copy-on-write since tweens are evaluated after a delay.
            var x0 = x.domain(data[3].sort(this.checked
                            ? function(a, b) { return (b.y0 + b.y) - (a.y0 + a.y); }
                            : function(a, b) { return d3.ascending(a.state, b.state); })
                    .map(function(d) { return d.state;}))
                    .copy();
            svg.selectAll(".bar")
                    .sort(function(a, b) { return x0(a.state) - x0(b.state); });

var transition = svg.transition().duration(750),
                    delay = function(d, i) { return i * 1; };

transition.selectAll("rect")
                    .delay(delay)
                    .attr("x", function(d) { return x0(d.state); });

transition.select(".x.axis")
                    .call(xAxis)
                    .selectAll("text")
                    .style("text-anchor", "end")
                    .attr("dx", "-.8em")
                    .attr("dy", ".15em")
                    .attr("transform", "rotate(-35)" )
                    .delay(delay);
        }
    });

</script>

https://d3js.org/d3.v3.min.js