Road Accidents in India - Comparison between 2011 and 2012.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Module 5 - Exercise</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

body {
            background-color: lightgray;
            font-family: Helvetica, Arial, sans-serif;
        }

h1 {
            font-size: 24px;
            margin: 0;
            margin: 10px 200px 10px 20px;
        }

p {
            font-size: 12px;
            margin: 10px 200px 10px 20px;
        }

svg {
            background-color: white;
            margin: 10px 200px 10px 20px;
        }

circle:hover {
            fill: #E20177;
        }

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

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

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

</style>
</head>
<body>
<div id="container">
    <h1>Comparison of Share of Road Accidents by State in India between 2011 and 2012</h1>

<p>Scatter plot of percentage contribution of road accidents by state is shown in the scatter plot. On the x-axis is
        the percentage contributions in 2011 and in Y - Axis is the percentage contribution in 2012. The circles above
        the diagonal indicate increase in accidents and the circles below indicate decrease in accidents. These are
        color coded in 'Orange' and 'Green' respectively. The size of the circle indicates the number of accidents per
        lakh population. Source: <a href="https://data.gov.in/keywords/indian-road-accident-data">data.gov.in</a>, 2015
    </p>
    <svg id="mySvg"></svg>
    <p>Looking at the graph, all but a few States saw increase in contribution of accidents than the previous year. It
        is interesting to note that although the contribution to the number of accidents reduced over the previous year
        and is much less compared to other state, the number of accidents per lakh population is quite high. Probably,
        it has to do with the amount of tourists visiting the state and also the partying that happens in this state.
        Since the state is very small compared to other larger states like Maharashtra, Tamilnadu, Madhya Pradesh
        etc.</p>

</div>
<script type="text/javascript">

var w = 700;
    var h = 600;
    var padding = [20, 10, 50, 50];  //Top, right, bottom, left

var xScale = d3.scale.linear()
            .range([padding[3], w - padding[1] - padding[3]]);

var yScale = d3.scale.linear()
            .range([padding[0], h - padding[2]]);

var rScale = d3.scale.linear()
            .range([0, 0.1]);

var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom")
            .tickFormat(function (d) {
                return d + "%";
            });
    var yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left")
            .tickFormat(function (d) {
                return d + "%";
            });

var svg = d3.select("#mySvg")
            .attr("width", w)
            .attr("height", h);

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

xScale.domain([0, 15]);

yScale.domain([15, 0]);
        svg.append("line")
                .attr("x1", xScale(0))
                .attr("y1", yScale(0))
                .attr("x2", xScale(15))
                .attr("y2", yScale(15))
                .attr("stroke-width", 1)
                .attr("stroke", "black")
                .attr("stroke-dasharray", (4, 4));

var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle");

circles.attr("cx", function (d) {
            return xScale(d.shareAccidents2011);
        })
                .attr("cy", function (d) {
                    return yScale(d.shareAccidents2012);
                })
                .attr("r", 0.1)
                .attr("fill", function (d) {
                    if (+d.shareAccidents2012 > +d.shareAccidents2011) {
                        return 'orange';
                    }
                    else {
                        return 'green';
                    }
                })
                .attr("opacity", 0.7)
                .append("title")
                .text(function (d) {
                    return d.states + "'s share of accidents in 2011 is " + d.shareAccidents2011 + "%, while the share of accidents in 2012 is " + d.shareAccidents2012 + "%.\n The number of accidents per lakh population in 2012 is " + d.accidentsPerLakhPopulation2012 + ".";
                });

circles.sort(function (a, b) {
            return d3.ascending(+a.shareAccidents2011, +b.shareAccidents2011);
        })
                .transition()
                .delay(function (d, i) {
                    return i * 20;
                })
                .duration(1000)
                .attr("r", function (d) {
                    return rScale(d.accidentsPerLakhPopulation2012);
                })

svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
                .call(xAxis);

svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + (padding[3] - 10) + ",0)")
                .call(yAxis);

});
    svg.append("g")
            .append("text")
            .attr("transform", "translate(" + (w - 230) + "," + (h - 45) + ")")
            .text("% share of road accidents in 2011")
            .attr("font-size", 11)
    svg.append("g")
            .attr("transform", "translate(55," + 190 + ")")
            .append("text")
            .attr("transform", "rotate(270)")
            .text("% share of road accidents in 2012")
            .attr("font-size", 11)
</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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