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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment