D3 Examples - Map of India's Parliamentary Constitiencies, 2014

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/topojson.v1.js"></script>
    <script src="https://d3js.org/queue.v1.min.js"></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
​
    <style type="text/css">
​
      body {
        font-family: Arial, sans-serif;
      }
​
      .pc {
        fill: #bdbdbd;
        stroke: #fff;
        stroke-width: 0.5px;
      }
​
      .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: 80%;
        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: 70%;
        color: #999;
        clear: both;
      }
​
    </style>
  </head>
  <body onload="sizeChange()">
  
    <div id="container">
      <h1>Parliamentary Constituencies, 2014</h1>
      <div class='legend'>
        <div class='legend-title'>Reservation Status</div>
        <div class='legend-scale'>
        </div>
        <div class='legend-source'>Source: <a href="https://projects.datameet.org/maps/">Data{Meet}</a></div>
      </div>
    </div>
​
      <script type="text/javascript">
​
        d3.select(window).on("resize", sizeChange);
​
        //Set d3 scale
        var color_domain = ['GEN','SC','ST'];
        var legend_labels = ['GEN','SC','ST'];
        var color = d3.scale.threshold()
          .domain(color_domain)
          .range(["", "#b2df8a", "#1f78b4","#a6cee3"]);
​
        //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("#container")
          .append("svg")
          .attr("width", "100%")
          .attr("height","100%")
          .append("g");
​
        //Wait for data files to download before drawing
        queue()
          .defer(d3.json, "india_pc_2014_simplified.topojson")
          .defer(d3.json, "india_state_2014_simplified.topojson")
          .defer(d3.csv, "results.csv") //sample data
          .await(ready);
​
        function ready(error, pc, state, data) {
​
          //Set up for visualizing sample data
          var pairResultWithId = {};
          var pairNameWithId = {};
          data.forEach(function(d) {
            pairResultWithId[d.ST_CODE + d.PC_CODE] = d.Res;
            pairNameWithId[d.ST_CODE + d.PC_CODE] = d.PC_NAME;
          });
​
          //Drawing pc boundaries
          var pc_geojson = topojson.feature(pc, pc.objects.india_pc_2014);
          svg.selectAll(".pc")
              .data(pc_geojson.features)
              .enter().append("path")
              .attr("class", "pc")
              .attr("d", path)
              .style ( "fill" , function (d) {
                var result = pairResultWithId[d.properties.ST_CODE + d.properties.PC_CODE];
                if (result!='') {return color(result);}
                
              })
              .style("opacity", 0.8)
              .on("mouseover", function(d) {
                 d3.select(this).transition().duration(300).style("opacity", 1);
                 div.transition().duration(300)
                 .style("opacity", 1)
                 div.text(pairNameWithId[d.properties.ST_CODE + d.properties.PC_CODE] + " : " + pairResultWithId[d.properties.ST_CODE + d.properties.PC_CODE])
                 .style("left", (d3.event.pageX) + "px")
                 .style("top", (d3.event.pageY -30) + "px");
              })
              .on("mouseout", function() {
                 d3.select(this)
                 .transition().duration(300)
                 .style("opacity", 0.8);
                 div.transition().duration(300)
                 .style("opacity", 0);
              })
          ;
​
          //Drawing state boundaries          
          var state_geojson = topojson.feature(state, state.objects.india_state_2014);
          svg.selectAll(".state")
              .data(state_geojson.features)
              .enter().append("path")
              .attr("class", "state")
              .attr("d", path);
​
        }
​
        //Set up for drawing html legend elements
        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);
        }
​
​
​
      </script>
  </body>
</html>
​
    