American Lynches

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="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.all.min.js"></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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://datamaps.github.io/scripts/datamaps.all.min.js?v=1 to a secure url

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

https://d3js.org/topojson.v1.min.js

https://datamaps.github.io/scripts/datamaps.all.min.js?v=1