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

forked from malcolm-decuire's block: American Lynches

<!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>
  <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: data
          
          
          
        }
      })
      
      
      
      
       //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