GeoJSON - GovData

acc_d3_code.js

d3.select(window).on("resize", sizeChange);

        //Set d3 scale
        var color_domain = ['<100','<1000','<10000','<20000','20000 & more'];
        var legend_labels = ['<100','<1000','<10000','<20000','20000 & more']
        var color = d3.scale.ordinal()
                    .domain(color_domain)
                    // .range(['#f1e5e5','#d7b2b2','#bc7f7f','#a14c4c','#7a0000'])
                    .range(['#ffe38f','#ffcf40','#cbaf59','#bf9b30','#956f00'])

        //Set tooltip
        var div = d3.select("body").append("div")
         .attr("class", "tooltip")
         .style("opacity", 0);

        //Set d3 projection, path and svg
        var projection = d3.geo.mercator()
            .center([78, 27])
            .scale(1200);

        var path = d3.geo.path()
            .projection(projection);

        var svg = d3.select("#map")
          .append("svg")
          .attr("width", "130%")
          .attr("height","100%")
          .append("g");

        //Wait for data files to download before drawing
        queue()
          .defer(d3.json, "json/india_states.json")
          .defer(d3.csv, "No_of_Road_Acc.csv")
          .await(ready);

        function ready(error, state, data) {           
            //Set up for visualizing sample data
            function draw(yearSelected) {
                var pairStateWithNo = {};     //StateName: NoOfAccidents
                var pairStateWithRange = {};  //StateName: Range(<1000) 
                data.forEach(function(d) {
                  var accNum = d[yearSelected];
                  pairStateWithNo[d.States] = accNum;

                  var range = '';
                  var len = String(accNum).length;

                  //Determining the Range of data:
                  switch(true) {
                    case (len >= color_domain[2].length - 1) && (accNum < 20000): 
                      range = 3;
                      break;
                    case (len >= color_domain[2].length - 1) && (accNum >= 20000):
                      range = 4;
                      break;
                    case (len == 4) && (accNum < 10000):
                      range = 2;
                      break;
                    case (len > 2) && (accNum < 1000):
                      range = 1;
                      break;
                    case (len <= 2):
                      range = 0;
                      break;
                  }
                  pairStateWithRange[d.States] = color_domain[range];
                });

                var state_geojson = topojson.feature(state, state.objects.india_states);

                //enter()
                svg.selectAll(".state")
                    .data(state_geojson.features)
                    .enter()
                      .append("path")
                      .attr("class", "state")
                      .attr("d", path)

                //update()
                svg.selectAll(".state")
                    .style ( "fill" , function (d) {
                      var result = pairStateWithRange[d.properties.NAME_1];
                      if (result!='') { return color(result); }                  
                    })
                    .style("opacity", 0.8)
                    .on("mouseover", function(d) {
                       d3.select(this).transition().duration(100).style("opacity", 0.3)
                       // .style("stroke-width","3px");

                       div.transition().duration(100)
                       .style("opacity", 0.9)
                       div.text(d.properties.NAME_1 + ': ' + pairStateWithNo[d.properties.NAME_1])
                       .style("left", (d3.event.pageX) + "px")
                       .style("top", (d3.event.pageY -30) + "px");
                    })
                    .on("mouseout", function() {
                       d3.select(this)
                       .transition().duration(50)
                       .style("opacity", 0.8)
                       // .style("stroke-width","0.8px");
                       
                       div.transition().duration(50)
                       .style("opacity", 0);
                    });

                //exit()
                svg.selectAll(".state")
                    .data(state_geojson.features)
                    .exit()
                    .remove();

            }
            //Default call on load
            draw.call(this,"2016");

            //Choose from Dropdown
            // d3.select('#yearOpts')
            //   .on('change', function(){
            //     yearSelected = eval(d3.select(this).property('value'));
            //     draw.call(this,String(yearSelected));
            //   });        


            //Code for the 'Play' Button
            years = ['2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'];
            
            d3.select('#play')
              .on("click", function() {  
                var idx = 0;   
                var playing = false;       
                if(playing == false){           
                  timer = setInterval(function() {                   
                    if (idx < years.length){
                      yearSelected = years[idx];
                      draw.call(this,String(yearSelected));  
                      d3.select("#displayYear").text("Year: " + yearSelected);
                      idx += 1;
                       } 
                    else {
                      playing = true;
                      }
                    },1500);                  
                }
                else {
                   clearInterval(timer);  
                   playing = false;
                  }                
            })  
          }

        //Set up for drawing html legend elements
        // legendColorDomain =['<100','20000 & more'];
        // var legendColor = d3.scale.ordinal()
        //                   .domain(legendColorDomain)
        //                   .range(d3.schemeYlOrBr[9]);   
        // var soilColor = d3.interpolateYlOrBr;

        var legend = d3.select('.legend-scale')
          .append('ul')
          .attr('class', 'legend-labels');
        var keys = legend.selectAll('li')
          .data(color_domain);


        keys.enter().append('li')
          .text(function(d, i){ return legend_labels[i];})
          .append('span')
          .style('background', function(d) { return color(d);});

        //Function called when window is resized
        function sizeChange() {
            d3.select("g").attr("transform", "scale(" + $("#container").width()/1000 + ")");
            $("svg").height($("#container").width()*0.75);
        }

        // function sequence() {
        //   d3.selectAll('.state').transition().duration(500)
        //     .style("fill", function (d) {
        //               var result = pairStateWithRange[d.properties.NAME_1];
        //               if (result!='') { return color(result); }                  
        //             });
        //      }

acc_styles.css

      body {
        /*font-family: Arial, sans-serif;*/
        font-family: 'Amita';
        color: #1f5404;
        height: 50%;
        width: 65%;
      }
      .state {
        fill: none;
        stroke: #636363;
        stroke-width: 1px;
        stroke-linejoin: round;
      }
      #container {
        margin:2%;
        padding:20px;
        /*border:2px solid #d0d0d0;*/
        border-radius: 5px;
      }
 
      div.tooltip {
        position: absolute;
        text-align: center;
        padding: 0.5em;
        font-size: 10px;
        color: #222;
        background: #FFF;
        border-radius: 2px;
        pointer-events: none;
        box-shadow: 0px 0px 2px 0px #a6a6a6;
        text-shadow:#f5f5f5 0 1px 0;
      }
      .legend .legend-title {
        text-align: left;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 90%;
      }
      .legend .legend-scale ul {
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
        float: left;
        list-style: none;
      }
      .legend .legend-scale ul li {
        font-size: 90%;
        list-style: none;
        margin-left: 0;
        line-height: 18px;
        margin-bottom: 2px;
        }
      .legend ul.legend-labels li span {
        display: block;
        float: left;
        height: 20px;
        width: 20px;
        margin-right: 5px;
        margin-left: 0;
      }
      .legend .legend-source {
        font-size: 80%;
        color: #999;
        clear: both;
      }

analysis.py

import pandas as pd  
import numpy as np

df = pd.read_csv('No_of_Road_Acc.csv')
# print(df.head())

# nparr = np.array(df)
df.set_index('States', inplace=True)

df=df.fillna(0)

max = df.values.max()
min = df.values.min()
print(max, min)


# python -m http.server

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="css/acc_styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>



  </head>
  <body onload="sizeChange()">
  
    <div id="container">
      <h3>Road Accidents in India</h3>
      <div class="col-md-3"> 
        <div class='legend'>
          <div class='legend-title'>Number of Accidents</div>
          <div class='legend-scale'></div>
          <div class='legend-source'>Source: <a href="https://data.gov.in/">https://data.gov.in/</a></div>
        </div>
        <br/>
        <button class="btn btn-info" id="play">Play</button>
        <p id="displayYear">Year: 2016</p>
        <!-- <select id = "yearOpts" class="selectpicker">
          <option value="2003">2003</option>
          <option value="2004">2004</option>
          <option value="2005">2005</option>
          <option value="2006">2006</option>
          <option value="2007">2007</option>
          <option value="2008">2008</option>
          <option value="2009">2009</option>
          <option value="2010">2010</option>
          <option value="2011">2011</option>
          <option value="2012">2012</option>
          <option value="2013">2013</option>
          <option value="2014">2014</option>
          <option value="2015">2015</option>
          <option value="2016" selected="selected">2016</option>         
        </select> -->

      </div>
      <div id="map" class="col-md-9"></div>
    </div>

      <script type="text/javascript" src='js/acc_d3_code.js'></script>
  </body>
</html>

No_of_Road_Acc.csv

No_of_Road_Acc_2016.csv