State Grid Choropleth

A state grid inspired by an Allison McCann graphic on state taxes. (See also David Mimno’s implementation.)

forked from mbostock's block: State Grid

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.state rect {
  fill: #dedede;
  stroke: #efefef;
}

.state text {
  font: 12px sans-serif;
  text-anchor: middle;
}
  
.q0-5 rect { fill: #fffafa; }
.q1-5 rect { fill: #ffd2c4; }
.q2-5 rect { fill: #ffa68e; }
.q3-5 rect { fill: #fc7657; }
.q4-5 rect { fill: #ef4123; }

#legend {
    padding: 1.5em 0 0 1.5em;
}
  
.list-inline {
    padding-left: 0;
    list-style: none;
}
  
.list-inline > li {
  display: inline-block;
}

li.key {
    border-top-width: 15px;
    border-top-style: solid;
    font-size: .75em;
    width: 10%;
    padding-left: 0;
    padding-right: 0;
}
  
li.q0-5 { color: #fffafa; }
li.q1-5 { color: #ffd2c4; }
li.q2-5 { color: #ffa68e; }
li.q3-5 { color: #fc7657; }
li.q4-5 { color: #ef4123; }

</style>
<body>
<svg width="960" height="500"></svg>
<script id="grid" type="text/plain">
                              ME
               WI          VT NH
WA ID MT ND MN IL MI    NY MA RI
OR NV WY SD IA IN OH PA NJ CT
CA UT CO NE MO KY WV VA MD DE
   AZ NM KS AR TN NC SC
         OK LA MS AL GA
HI AK    TX             FL
</script>
<script src="jenks.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var states = [],
    statesObj = {
      "AK": 12,
      "AL": 56,
      "AR": 27,
      "AZ": 41,
      "CA": 99,
      "CO": 61,
      "CT": 27,
      "DC": 1,
      "DE": 6,
      "FL": 390,
      "GA": 49,
      "HI": 4,
      "IA": 20,
      "ID": 13,
      "IL": 57,
      "IN": 45,
      "KS": 14,
      "KY": 36,
      "LA": 15,
      "MA": 20,
      "MD": 41,
      "ME": 14,
      "MI": 47,
      "MN": 32,
      "MO": 71,
      "MS": 21,
      "MT": 9,
      "NC": 93,
      "ND": 2,
      "NE": 12,
      "NH": 9,
      "NJ": 36,
      "NM": 11,
      "NV": 23,
      "NY": 83,
      "OH": 76,
      "OK": 13,
      "OR": 47,
      "PA": 73,
      "PR": 6,
      "RI": 6,
      "SC": 22,
      "SD": 5,
      "TN": 79,
      "TX": 70,
      "UT": 19,
      "VA": 89,
      "VI": 1,
      "VT": 9,
      "WA": 88,
      "WI": 29,
      "WV": 20,
      "WY": 5
    };

d3.select("#grid").text().split("\n").forEach(function(line, i) {
  var re = /\w+/g, m;
  while (m = re.exec(line)) {
    states.push({
    	name: m[0],
    	count: statesObj[m[0]],
    	x: m.index / 3,
    	y: i
  	});
  }
});

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var gridWidth = d3.max(states, function(d) { return d.x; }) + 1,
    gridHeight = d3.max(states, function(d) { return d.y; }) + 1,
    cellSize = 40;

var jenks5 = d3.scale.quantile()
      .domain(jenks(_.values(statesObj), 4))
      .range(d3.range(5).map(function(i) { return "q" + i + "-5"; }));

var state = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .selectAll(".state")
    .data(states)
  .enter().append("g")
    .attr("class", function(d) { return "state " + jenks5(d.count) })
    .attr("transform", function(d) { return "translate(" + (d.x - gridWidth / 2) * cellSize + "," + (d.y - gridHeight / 2) * cellSize + ")"; });

state.append("rect")
    .attr("x", -cellSize / 2)
    .attr("y", -cellSize / 2)
    .attr("width", cellSize - 1)
    .attr("height", cellSize - 1);

state.append("text")
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });
  
var legend = d3.select('body')
	.insert('div', ":first-child")
	  .attr("id", "legend")
  .append('ul')
    .attr('class', 'list-inline');

var keys = legend.selectAll('li.key')
    .data(jenks5.range());

keys.enter().append('li')
    .attr('class', function(d) { console.log(d); return'key ' + d; })
    .style('border-top-color', String);

</script>

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js

https://d3js.org/d3.v3.min.js