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
xxxxxxxxxx
<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