Skip to content

Instantly share code, notes, and snippets.

/README.md

Created November 23, 2015 23:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/19a3f0afed794cf720b3 to your computer and use it in GitHub Desktop.
Save anonymous/19a3f0afed794cf720b3 to your computer and use it in GitHub Desktop.
Download ZIP
State Grid
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.state rect {
fill: #dedede;
}
.state text {
font: 12px sans-serif;
text-anchor: middle;
}
.state--selected rect {
fill: #9f4a6c;
}
.state--selected text {
fill: white;
}
</style>
<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
OR NV WY SD IA IN OH PA NJ CT RI
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="//d3js.org/d3.v3.min.js"></script>
<script>
d3.json("lynchings.json", function(err, data) {
var states = []
console.log(data)
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],
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 max = 0;
var stateCodes = Object.keys(data);
stateCodes.forEach(function(d) {
if(data[d].LynchBlack > max) max = data[d].LynchBlack
if(data[d].LynchWhite > max) max = data[d].LynchWhite
})
console.log("max", max)
var colorScale = d3.scale.linear()
.domain([0, max])
.range(["#ffffff", "#db0015"]);
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"; })
.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)
.style({
fill: function(d) {
return colorScale(data[d.name].LynchBlack)
}
})
state.append("text")
.attr("dy", ".35em")
.text(function(d) { return d.name; });
})
</script>
Raw
lynchings.json
{
"AZ": {
"fillKey": "White",
"LynchWhite": 31,
"LynchBlack": 0
},
"CO": {
"fillKey": "White",
"LynchWhite": 65,
"LynchBlack": 3
},
"DE": {
"fillKey": "Black",
"LynchWhite": 0,
"LynchBlack": 1
},
"FL": {
"fillKey": "Black",
"LynchWhite": 25,
"LynchBlack": 257
},
"GA": {
"fillKey": "Black",
"LynchWhite": 39,
"LynchBlack": 492
},
"HI": {
"fillKey": "none",
"LynchWhite": 0,
"LynchBlack": 0
},
"ID": {
"fillKey": "White",
"LynchWhite": 20,
"LynchBlack": 0
},
"IL": {
"fillKey": "Black",
"LynchWhite": 15,
"LynchBlack": 19
},
"IN": {
"fillKey": "White",
"LynchWhite": 33,
"LynchBlack": 14
},
"IA": {
"fillKey": "White",
"LynchWhite": 17,
"LynchBlack": 2
},
"KS": {
"fillKey": "White",
"LynchWhite": 35,
"LynchBlack": 19
},
"KY": {
"fillKey": "Black",
"LynchWhite": 63,
"LynchBlack": 142
},
"LA": {
"fillKey": "Black",
"LynchWhite": 56,
"LynchBlack": 335
},
"MD": {
"fillKey": "White",
"LynchWhite": 2,
"LynchBlack": 27
},
"ME": {
"fillKey": "White",
"LynchWhite": 1,
"LynchBlack": 0
},
"MA": {
"fillKey": "none",
"LynchWhite": 0,
"LynchBlack": 0
},
"MN": {
"fillKey": "White",
"LynchWhite": 5,
"LynchBlack": 4
},
"MI": {
"fillKey": "White",
"LynchWhite": 7,
"LynchBlack": 1
},
"MS": {
"fillKey": "Black",
"LynchWhite": 42,
"LynchBlack": 539
},
"MO": {
"fillKey": "Black",
"LynchWhite": 53,
"LynchBlack": 69
},
"MT": {
"fillKey": "White",
"LynchWhite": 82,
"LynchBlack": 2
},
"NC": {
"fillKey": "Black",
"LynchWhite": 15,
"LynchBlack": 86
},
"NE": {
"fillKey": "White",
"LynchWhite": 52,
"LynchBlack": 5
},
"NV": {
"fillKey": "White",
"LynchWhite": 6,
"LynchBlack": 0
},
"NH": {
"fillKey": "none",
"LynchWhite": 0,
"LynchBlack": 0
},
"NJ": {
"fillKey": "none",
"LynchWhite": 1,
"LynchBlack": 1
},
"NY": {
"fillKey": "none",
"LynchWhite": 1,
"LynchBlack": 1
},
"ND": {
"fillKey": "White",
"LynchWhite": 13,
"LynchBlack": 3
},
"NM": {
"fillKey": "White",
"LynchWhite": 33,
"LynchBlack": 3
},
"OH": {
"fillKey": "Black",
"LynchWhite": 10,
"LynchBlack": 16
},
"OK": {
"fillKey": "White",
"LynchWhite": 82,
"LynchBlack": 40
},
"OR": {
"fillKey": "White",
"LynchWhite": 20,
"LynchBlack": 1
},
"PA": {
"fillKey": "Black",
"LynchWhite": 2,
"LynchBlack": 6
},
"RI": {
"fillKey": "none",
"LynchWhite": 0,
"LynchBlack": 0
},
"SC": {
"fillKey": "Black",
"LynchWhite": 4,
"LynchBlack": 156
},
"SD": {
"fillKey": "White",
"LynchWhite": 27,
"LynchBlack": 0
},
"TN": {
"fillKey": "Black",
"LynchWhite": 47,
"LynchBlack": 204
},
"TX": {
"fillKey": "Black",
"LynchWhite": 141,
"LynchBlack": 352
},
"UT": {
"fillKey": "White",
"LynchWhite": 6,
"LynchBlack": 2
},
"WI": {
"fillKey": "White",
"LynchWhite": 6,
"LynchBlack": 0
},
"VA": {
"fillKey": "Black",
"LynchWhite": 17,
"LynchBlack": 83
},
"VT": {
"fillKey": "White",
"LynchWhite": 1,
"LynchBlack": 0
},
"WA": {
"fillKey": "White",
"LynchWhite": 25,
"LynchBlack": 1
},
"WV": {
"fillKey": "Black",
"LynchWhite": 20,
"LynchBlack": 28
},
"WY": {
"fillKey": "White",
"LynchWhite": 30,
"LynchBlack": 5
},
"CA": {
"fillKey": "White",
"LynchWhite": 41,
"LynchBlack": 2
},
"CT": {
"fillKey": "none",
"LynchWhite": 0,
"LynchBlack": 0
},
"AK": {
"fillKey": "none",
"LynchWhite": 0,
"LynchBlack": 0
},
"AR": {
"fillKey": "Black",
"LynchWhite": 58,
"LynchBlack": 226
},
"AL": {
"fillKey": "Black",
"LynchWhite": 48,
"LynchBlack": 299
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment