D3 Examples - Choropleth

Choropleth
This choropleth shows unemployment rates as of August, 2016 with a threshold scale. I employed a mix of command-line tools to transform the fixed-width text file into a CSV, including dsv2dsv:
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.counties {
  fill: none;
}
​
.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
​
div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 60px;                    
    height: 28px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}
​
</style>
<svg width="800" height="600"></svg>
<div class="tooltip"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
​
var stateID = { 1: "AL", 2: "AK", 4: "AZ", 5: "AR", 6: "CA", 8: "CO",
9: "CT", 10: "DE", 11: "DC", 12: "FL", 13: "GA", 15: "HI",
16: "ID", 17: "IL", 18: "IN", 19: "IA", 20: "KS", 21: "KY",
22: "LA", 23: "ME", 24: "MD", 25: "MA", 26: "MI", 27: "MN" ,
28: "MS" , 29: "MO", 30: "MT", 31: "NE" , 32: "NV" , 33: "NH" ,
34: "NJ" , 35: "NM" , 36: "NY" , 37: "NC" , 38: "ND" , 39: "OH" ,
40: "OK" , 41: "OR" , 42: "PA" , 44: "RI" , 45: "SC" , 46: "SD" ,
47: "TN" , 48: "TX" , 49: "UT" , 50: "VT" , 51: "VA" , 53: "WA" ,
54: "WV" , 55: "WI" , 56: "WY" } 
  
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var words = d3.map();
​
// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
  
var x = d3.scaleLinear()
    .domain([1, 10])
    .rangeRound([600, 860]);
​
var color = d3.scaleThreshold()
    .domain([0,1])
    .range(d3.schemeBlues[9]);
​
var g = svg.append("g")
    .attr("class", "key")
    .attr("transform", "translate(0,40)");
​
g.selectAll("rect")
  .data(color.range().map(function(d) {
      d = color.invertExtent(d);
      if (d[0] == null) d[0] = x.domain()[0];
      if (d[1] == null) d[1] = x.domain()[1];
      return d;
    }))
  .enter().append("rect")
    .attr("height", 8)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .attr("fill", function(d) { return color(d[0]); });
​
g.append("text")
    .attr("class", "caption")
    .attr("x", x.range()[0])
    .attr("y", -6)
    .attr("fill", "#000")
    .attr("text-anchor", "start")
    .attr("font-weight", "bold")
    .text("Unemployment rate");
​
g.call(d3.axisBottom(x)
    .tickSize(13)
    .tickFormat(function(x, i) { return i ? x : x + "%"; })
    .tickValues(color.domain()))
  .select(".domain")
    .remove();
​
d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.csv, "all_words_by_state.csv", function(d) { words.set(d.state_code, d); })
    .await(ready);
​
function ready(error, us) {
  if (error) throw error;
​
  var path = d3.geoPath(d3.geoIdentity().fitSize([width, height], topojson.feature(us, us.objects.states)));
​
  svg.append("g")
      .attr("class", "state")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("fill", function(d) { return color(Math.random()) })
      .attr("d", path)
            .on("mouseover", function(d){
                var w = words['$' + stateID[d.id]]
          
          div.transition()      
                .duration(200)      
                .style("opacity", .9);      
            div .html(w['word_2'] + "<br/>" +  w["word_3"])
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");                
          
        });
​
​
  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path)
  
  
  
    svg.append("g").attr("class", "state-label").selectAll("text")
    .data(topojson.feature(us, us.objects.states).features)
    .enter()
    .append("text")
    .attr("fill", "black")
    .attr("transform", function(d) { 
        var centroid = path.centroid(d);
        return "translate(" + centroid[0] + "," + centroid[1] + ")"
    })
    .attr("text-anchor", "middle")
    .attr("dy", ".35em")
    .text(function(d) {
          return words['$' +  stateID[+d.id]].word_1;
    }); 
  
​
  
  
}
  
​
​
</script>
​
    