India - Road Accidents

<!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;
        }

.txt {
            pointer-events: none;
        }
        .names{
            pointer-events: none;
        }

</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. Source: <a href="https://data.gov.in/keywords/indian-road-accident-data">data.gov.in</a>, 2015
    </p>
    <svg id="mySvg"></svg>

</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([79, 22])
            .translate([w / 2, h / 2])
            .scale([1500]);

var o = d3.scale.quantize()
            .range(["#d4b9da", "#c994c7", "#df65b0", "#e7298a", "#ce1256"]);
    //"#49006a" for Goa

//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

for (var i = 0; i < data.length; i++) {

//Grab country name
                var dataStates = data[i].states;
                //Grab data value, and convert from string to float
                var dataValue = +data[i].accidentsPerLakhPopulation2012;

//Find the corresponding country inside the GeoJSON
                for (var j = 0; j < json_country.features.length; j++) {

//We'll check the official ISO country code
                    var jsonStates = json_country.features[j].properties.NAME_1;

if (dataStates == jsonStates) {
                        //Copy the data value into the GeoJSON
                        json_country.features[j].properties.accidents = dataValue;

//Stop looking through the JSON
                        break;
                    }
                }
            }

acc = data.map(function(d){return +d.accidentsPerLakhPopulation2012;});
            o.domain([d3.min(acc), 110]);
            mycolors = []
            for (ind = 0; ind<= 5; ind++){
                if (ind ===0){
                    mycolors.push({name:"<= " + (Math.round(d3.min(acc)+((ind +1 )*(110 - d3.min(acc))/5))).toString() + " people", col:o(d3.min(acc)+((ind)*(110 - d3.min(acc))/5))})
                }
                else if (ind < 5){
                    mycolors.push({name:(Math.round(d3.min(acc)+((ind )*(110 - d3.min(acc))/5))+ 1).toString() + " - " + (Math.round(d3.min(acc)+((ind +1 )*(110 - d3.min(acc))/5))).toString() + " people", col:o(d3.min(acc)+((ind)*(110 - d3.min(acc))/5))})
                }
                else {
                    mycolors.push({name: "> " + (Math.round(110)).toString() + " people", col:"#67001f"})
                }
            }

countries = svg.selectAll("path")
                    .data(json_country.features)
                    .enter()
                    .append("path")
                    .style("fill", function (d) {
                        if (d.properties.accidents < 110){
                            return o(d.properties.accidents);
                        }
                        else{
                            return "#67001f";// Goa is extremely different from others and hence handles as special case
                        }
                    })
                    .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);
            //Load in cities data
            d3.csv("ne_10m_populated_places.csv", function(cities) {
                //Create a circle for each city
                populatedCities = svg.selectAll("circle")
                        .data(cities)
                        .enter()
                        .append("circle")
                        .attr("class",function(d){
                            //console.log(d)
                            return d.NAME.replace(/ /g, '').toLowerCase();
                        })
                        .attr("cx", function(d) {
                            return projection([d.LONGITUDE, d.LATITUDE])[0];
                        })
                        .attr("cy", function(d) {
                            return projection([d.LONGITUDE, d.LATITUDE])[1];
                        })
                        .attr("r", function(d) {
                            //Use Math.sqrt to scale by area (not radius)
                            return Math.sqrt(+d.GN_POP / w * 0.01);
                        })
                        .style("fill", "slategray")
                        .style("opacity", 0.9);
                populatedCitiesText = svg.append("g")
                        .attr("class", "states-names")
                        .selectAll("text")
                        .data(cities)
                        .enter()
                        .append("text")
                        .attr("class", function (d) {
                            return d.NAME.replace(/ /g, '').toLowerCase() + " txt";
                        })
                        .text(function(d){
                            //console.log(d)
                            return d.NAME;
                        })
                        .attr("x", function(d) {
                            return projection([d.LONGITUDE, d.LATITUDE])[0]+1;
                        })
                        .attr("y", function(d) {
                            return projection([d.LONGITUDE, d.LATITUDE])[1]+1;
                        })
                        .attr("text-anchor","middle")
                        .attr('fill', 'none')
                        .attr('font-size', "10px");
                //console.log(populatedCities)
                populatedCities.on("mouseover", function(){
                            c = this.getAttribute('class');
                            //console.log("." + c + "txt");
                            d3.selectAll("." + c + ".txt")
                                    .attr("fill", "white");
                        })
                        .on("mouseout", function(){
                            c = this.getAttribute('class');
                            d3.selectAll("." + c + ".txt")
                                    .attr("fill", "none");
                        });
                stateNames = svg.append("g")
                        .attr("class", "states-names")
                        .selectAll("text")
                        .data(json_country.features)
                        .enter()
                        .append("svg:text")
                        .attr("class", function (d) {
                            return "names " + d.properties.NAME_1.replace(/ /g, '').toLowerCase();
                        })
                        .text(function(d){
                            //console.log(d)
                            return d.properties.NAME_1.toUpperCase() + "\n" + "(" + d.properties.accidents + ")";
                        })

.attr("x", function(d){
                            return path.centroid(d)[0];
                        })
                        .attr("y", function(d){
                            return  path.centroid(d)[1];
                        })
                        .attr("text-anchor","middle")
                        .attr('fill', 'none')
                        .attr('font-size', "14px");
                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);
                            d3.select(".names." + c.substring(6))
                                    .attr("fill","white")

})
                        .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)
                            d3.select(".names." + c.substring(6))
                                    .attr("fill","none")
                        });

svg.append("text")
                        .attr("x", 30)
                        .attr("y", 400+120 + 19)
                        .attr("dy", ".35em")
                        .style("text-anchor", "start")
                        .text("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(mycolors)
                        .enter().append("g")
                        .attr("class", function (d) {
                            return "legend " + d.col
                        })
                        .attr("transform", function (d, i) {
                            return "translate(0," + i * 20 + ")";
                        });

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

legend.append("text")
                        .attr("x", 30 + 30)
                        .attr("y", 400+150 + 19)
                        .attr("dy", ".35em")
                        .style("text-anchor", "start")
                        .text(function (d) {
                            return d.name;
                        });

});

})
    });
</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