Road Accidents by State in India in 2012

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Maps and Charts</title>
    <script type="text/javascript" src="../d3.js"></script>

body {
            background-color: lightgray;
        }

#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;
            background-color: darkslategray;
        }

.legend text {
            font-family: arial;
            font-size: 12px;
            fill: lightgray;
        }

</style>
</head>
<body>
<div id="container">
    <h1>Road Accidents by State in India in 2012</h1>

<p>Road accidents in the year 2012 is presented in the below map. The color of each state indicates the number of
        road accidents per
        100,000 people. The color scale varies from <span style="color: #007ae6">'medium shade of blue'</span> to <span
                style="color: yellowgreen">'yellowgreen'</span>. Hovering over the map highlights the state in the map
        as well as the legend. Likewise, hovering over the legend highlights the legend as well as the state in the
        map.Source: <a href="https://data.gov.in/keywords/indian-road-accident-data">data.gov.in</a>, 2015
    </p>
    <svg id="mySvg"></svg>
    <p>Clearly, something is wrong in Goa. It is a tourist place that attracts lot of foreigners, and in turn, lots of
        natives. Also,
        the carnival environment and drunken driving cause a lot of accidents. However, this needs to be investigated
        further.
        North eastern countries do not have many accidents. Probably this is a function of per capita income and may be
        there are not
        enough vehicles on the roads or may be the people are more educated and responsible.</p>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
    //Width and height
    var w = 1080;
    var h = 900;

//Define map projection
    var projection = d3.geo.mercator()
            .center([82, 22])
            .translate([w / 2, h / 2])
            .scale([1500]);

var o = d3.scale.linear()
            .range(["#007ae6", "yellowGreen"]);

//Define path generator
    var path = d3.geo.path()
            .projection(projection);

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

//Load in GeoJSON data
    d3.json("IND_adm1_simplified.json", function (json_country) {
        d3.csv("roadac2012_AnnexureII.csv", function (data) {
            // Below commented code is useful if the json_country data has all countries

acc_data = data.map(function (d) {
                return {'states': d.states, 'accidents': +d.accidentsPerLakhPopulation2012};
            });
            acc = acc_data.map(function (d) {
                return d.accidents
            });
            o.domain([d3.min(acc), 50])

countries = svg.selectAll("path")
                    .data(json_country.features)
                    .enter()
                    .append("path")
                    .style("fill", function (d) {
                        for (ind = 0; ind < acc_data.length; ind++) {
                            if (d.properties.NAME_1 == acc_data[ind].states) {
                                return o(acc_data[ind].accidents);
                            }
                        }
                    })
                    .attr("class", function (d) {
                        return "state " + d.properties.NAME_1.replace(/ /g, '').toLowerCase();
                    })
                    .attr("id", function (d) {
                        return d.properties.HASC_1;
                    })
                    .attr("d", path)
                    .style("stroke", "darkslategray")
                    .style("stroke-width", 0.5);
            countries.on('mouseover', function () {
                        c = this.getAttribute('class')
                        d3.selectAll(".legend." + c.substring(6) + " text")
                                .style("font-weight", "bold")
                                .style("fill", "white")
                        d3.selectAll(".legend." + c.substring(6) + " rect")
                                .style("stroke", "white")
                                .style("stroke-width", 2)
                        d3.selectAll(".state." + c.substring(6))
                                .style("stroke", "white")
                                .style("stroke-width", 2)

})
                    .on('mouseout', function () {
                        c = this.getAttribute('class')
                        d3.selectAll(".legend." + c.substring(6) + " text")
                                .style("font-weight", "normal")
                                .style("fill", "lightgray")
                        d3.selectAll(".legend." + c.substring(6) + " rect")
                                .style("stroke", "none")

d3.selectAll(".state." + c.substring(6))
                                .style("stroke", "darkslategray")
                                .style("stroke-width", 0.5)

});

svg.append("text")
                    .attr("x", 30)
                    .attr("y", 120 + 19)
                    .attr("dy", ".35em")
                    .style("text-anchor", "start")
                    .text("State, accidents per 100,000 people")
                    .style("font-weight", "bold")
                    .style("font-family", "Arial")
                    .style("text-decoration", "underline")
                    .style("fill", "lightgray");

var legend = svg.selectAll(".legend")
                    .data(acc_data)
                    .enter().append("g")
                    .attr("class", function (d) {
                        return "legend " + d.states.replace(/ /g, '').toLowerCase()
                    })
                    .attr("transform", function (d, i) {
                        return "translate(0," + i * 20 + ")";
                    })
                    .on('mouseover', function () {
                        c = this.getAttribute('class')
                        d3.selectAll(".state." + c.substring(7))
                                .style("stroke", "white")
                                .style("stroke-width", 2)
                        d3.selectAll(".legend." + c.substring(7) + " text")
                                .style("fill", "white")
                                .style("font-weight", "bold")
                        d3.selectAll(".legend." + c.substring(7) + " rect")
                                .style("stroke", "white")
                                .style("stroke-width", 2)
                    })
                    .on('mouseout', function () {
                        c = this.getAttribute('class')
                        d3.selectAll(".state." + c.substring(7))
                                .style("stroke", "darkslategray")
                                .style("stroke-width", 0.5)
                        d3.selectAll(".legend." + c.substring(7) + " text")
                                .style("fill", "lightgray")
                                .style("font-weight", "normal")
                        d3.selectAll(".legend." + c.substring(7) + " rect")
                                .style("stroke", "none")

});

legend.append("rect")
                    .attr("x", 30 + 5)
                    .attr("y", 150 + 10)
                    .attr("width", 18)
                    .attr("height", 18)
                    .attr("fill", function (d) {
                        return o(d.accidents);
                    });

legend.append("text")
                    .attr("x", 30 + 30)
                    .attr("y", 150 + 19)
                    .attr("dy", ".35em")
                    .style("text-anchor", "start")
                    .text(function (d) {
                        return d.states + ", " + d.accidents;
                    });
        })
    });
</script>
</body>
</html>

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

https://d3js.org/colorbrewer.v1.min.js

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