This is a simple map showing the breakdown of lynchings in America. A blue state means lynching victims were primarily black and red state means lynching victims were primarily white.
Built with blockbuilder.org
This is a simple map showing the breakdown of lynchings in America. A blue state means lynching victims were primarily black and red state means lynching victims were primarily white.
Built with blockbuilder.org
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<!-- I recommend you host this file on your own, since this will change without warning --> | |
<script src="http://datamaps.github.io/scripts/datamaps.all.min.js?v=1"></script> | |
<h2> American Lynches | 1830-1970</h2> | |
<div id="map" style="position: relative; width: 900px; max-height: 900px;"></div> | |
<script> | |
var map = new Datamap({ | |
scope: 'usa', | |
element: document.getElementById('map'), | |
geographyConfig:{ | |
highlightBorderColor: '#bada55', | |
popupTemplate: function(geography, data){ | |
return '<div class="hoverinfo">' + geography.properties.name + ' White/Black ' + data.LynchWhite + ' / ' + data.LynchBlack | |
}, | |
}, | |
height: 500, | |
fills: { | |
'none': '#999999', | |
'White': '#CC4731', | |
'Black': '#306596', | |
}, | |
data: { | |
"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 | |
} | |
} | |
}) | |
//keep this code | |
map.bubbles([ ], { | |
popupTemplate: function(geography, data) { | |
return "<div class='hoverinfo'>It is " + data.name + "</div>"; | |
} | |
}); | |
</script> | |
<script> | |
var ordinal = d3.scale.ordinal() | |
.domain(["white", "black", "none"]) | |
.range([ "rgb(204,71,49)", "rgb(48,101,150)", "rgb(153,153,153"]); | |
var svg = d3.select("svg"); | |
svg.append("g") | |
.attr("class", "legendOrdinal") | |
.attr("transform", "translate(450,450)"); | |
var legendOrdinal = d3.legend.color() | |
.shape("path", d3.svg.symbol().type("triangle-up").size(150)()) | |
.shapePadding(10) | |
.scale(ordinal); | |
svg.select(".legendOrdinal") | |
.call(legendOrdinal); | |
</script> | |
</body> |