D3 Examples - A simple choropleth map

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3: Loading GeoJSON data and generating SVG paths</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style type="text/css">
      /* No style rules here yet */
body,html{
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    font-size: 11px;
    text-align: center;
  }
/*
#chart{
    background-color: #F5F2EB;
    border: 1px solid #CCC;
  }   */
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //Width and height
      var w = 500;
      var h = 300;
​
      var margin = {
          top: 60,
          bottom: 40,
          left: 70,
          right: 40
        };
​
        var width = w - margin.left - margin.right;
        var height = h - margin.top - margin.bottom;
​
      
      // define map projection
      var projection = d3.geoAlbersUsa()
        .translate([w/2, h/2])
        .scale([1500]);
​
      //Define default path generator
      var path = d3.geoPath()
        .projection(projection);
​
      var svg = d3.select("body")
        .append("svg")
        .attr("id", "chart")
        .attr("width", w)
        .attr("height", h)
        .append("g")
        .attr("tranform", "translate(0" + margin.left + "," + margin.top + ")");
​
        var color = d3.scaleQuantile()
          .range(["rgb(237, 248, 233)", "rgb(186, 228, 179)", "rgb(116,196,118)", "rgb(49,163,84)", "rgb(0,109,44)"]);
​
      d3.csv("results.csv", function(data){
​
        color.domain([ d3.min(data, function(d){ return d.bowmanPercent; }),
          d3.max(data, function(d){ return d.bowmanPercent; })
          ]);
​
      d3.json("us-states.json", function(json){
​
        //Merge the agriculture and GeoJSON data
        //Loop through once for each data value
        for(var i = 0; i < data.length; i++){
          // grab state name
          var dataState = data[i].ward;
​
          //grab data value, and convert from string to float
          var dataValue = parseFloat(data[i].ward);
​
          //find the corresponding state inside the GeoJSON
          for(var n = 0; n < json.features.length; n++){
​
            // properties name gets the states name
            var jsonward = json.features[n].properties.name;
            // if statment to merge by name of state
            if(dataState == jsonward){
              //Copy the data value into the JSON
              // basically creating a new value column in JSON data
              json.features[n].properties.value = dataValue;
​
              //stop looking through the JSON
              break;
            }
          }
        }
​
        svg.selectAll("path")
          .data(json.features)
          .enter()
          .append("path")
          .attr("d", path)
          .style("fill", function(d){
            //get the data value
            var value = d.properties.value;
​
            if(value){
              //If value exists
              return color(value);
            } else {
              // If value is undefined
              //we do this because alaska and hawaii are not in dataset we are using but still in projections
              return "#ccc"
            }
​
          });
​
​
      });
​
})
​
    </script>
  </body>
</html>
    