D3 Examples - Modular US State Choropleth

Modular US State Choropleth
A modular version of this excellent choropleth - will map any CSV statesdata.csv on a linear continuous value, using d3js v4.
Requirements for statesdata.csv:
state column with standard full-length state names
value column with any numeric values
Also, you can edit the color ramp using the lowColor and highColor variables.
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src='https://cdn.jsdelivr.net/gh/caged/d3-tip/v0.8.0-alpha.1/index.js'></script>
<style type="text/css">
​
/* Legend Font Style */
body {
    font: 11px sans-serif;
    background-color: #ffffff;
}
        
/* Legend Position Style */
.legend {
    position:absolute;
    left:20px;
    top:30px;
}
​
.axis text {
    font: 10px sans-serif;
}
​
.axis line, .axis path {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
    .d3-tip {
      line-height: 1;
      font-weight: bold;
      padding: 12px;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      border-radius: 2px;
    }
​
    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
      box-sizing: border-box;
      display: inline;
      font-size: 10px;
      width: 100%;
      line-height: 1;
      color: rgba(0, 0, 0, 0.8);
      content: "\25BC";
      position: absolute;
      text-align: center;
    }
​
    /* Style northward tooltips differently */
    .d3-tip.n:after {
      margin: -1px 0 0 0;
      top: 100%;
      left: 0;
    }
</style>
</head>
<body>
<script type="text/javascript">
​
//Width and height of map
var width = 960;
var height = 500;
​
var lowColor = '#f9f9f9'
var highColor = '#bc2a66'
​
// D3 Projection
var projection = d3.geoAlbersUsa()
  .translate([width / 2, height / 2]) // translate to center of screen
  .scale([1000]); // scale things down so see entire US
​
// Define path generator
var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
  .projection(projection); // tell path generator to use albersUsa projection
​
//Create SVG element and append map to the SVG
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
​
// Load in my states data!
d3.csv("statesdata.csv", function(data) {
    var dataArray = [];
    for (var d = 0; d < data.length; d++) {
        dataArray.push(parseFloat(data[d].value))
    }
    var minVal = d3.min(dataArray)
    var maxVal = d3.max(dataArray)
    var ramp = d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor])
    
  // Load GeoJSON data and merge with states data
  d3.json("us-states.json", function(json) {
​
    // Loop through each state data value in the .csv file
    for (var i = 0; i < data.length; i++) {
​
      // Grab State Name
      var dataState = data[i].state;
​
      // Grab data value 
      var dataValue = data[i].value;
      
      var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return d.state+ ': '+
      d.value;
  });
​
      // Find the corresponding state inside the GeoJSON
      for (var j = 0; j < json.features.length; j++) {
        var jsonState = json.features[j].properties.name;
​
        if (dataState == jsonState) {
​
          // Copy the data value into the JSON
          json.features[j].properties.value = dataValue;
​
          // Stop looking through the JSON
          break;
        }
      }
    }
​
    // Bind the data to the SVG and create one path per GeoJSON feature
    svg.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .style("stroke", "#fff")
      .style("stroke-width", "1")
      .style("fill", function(d) { return ramp(d.properties.value) });
    
        // add a legend
        var w = 140, h = 300;
​
svg.call(tip);
​
        var y = d3.scaleLinear()
            .range([h, 0])
            .domain([minVal, maxVal]);
​
        var yAxis = d3.axisRight(y);
​
  });
});
</script>
</body>
</html>
​
    