Fatal Force Hexbins

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-queue.v3.min.js"></script>
    <script src="./d3.hexbin.min.js"></script>
    <style>
      .states path {
        fill: #ddd;
        stroke: #fff;
        stroke-width: 2px;
      }
      .hex-mesh path{
        stroke: black;
        stroke-opacity: 0.4;
        stroke-width: 1;
        fill-opacity: 0;
      }
      .hexagons path{
        stroke-width: 2;
        stroke: white;
      }
    </style>
  </head>

<body>

var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

var projection = d3.geoAlbersUsa();

var path = d3.geoPath()
    .projection(projection);

var color = d3.scaleLinear()
    .range(['#fff ', '#e31a1c'])
    .domain([0, 20])
    .interpolate(d3.interpolateLab);

var hexbin = d3.hexbin()
      .size([width, height])
      .radius(20);

var states = svg.append('g')
    .attr('class', 'states');

var hexagon = svg.append('g')
    .attr('class', 'hexagons');

var mesh = svg.append('g')
    .attr('class', 'hex-mesh')
    .append('path')
      .attr('d', hexbin.mesh());

function render (geometry, shootings) {
    states.selectAll('path')
    .data(geometry.features)
    .enter().append('path')
    .attr('d', path);

hexagon.selectAll('path')
      .data(hexbin(shootings.map(d => { return d.properties.projected; })))
    .enter().append('path')
      .attr('transform', d => { return 'translate(' + d.x + ',' + d.y + ')'; })
      .attr('fill-opacity', 0)
      .attr('d', hexbin.hexagon(1))
      .transition()
        .attr('fill', d => { return color(d.length); })
        .attr('fill-opacity', 1)
      .transition()
        .attr('d', hexbin.hexagon(hexbin.radius()));
  }

d3.queue()
    .defer(d3.json, 'us.geojson')
    .defer(d3.json, 'police-shootings-2015-2017.geojson')  // https://www.washingtonpost.com/graphics/national/police-shootings-2015
    .awaitAll((err, results) => {
      if (err) { return console.error(err); }

shootings = results[1].features
        .map(d => {
          d.properties.projected = projection(d.geometry.coordinates);
          return d;
        })
        .filter(d => { return d.properties.projected; });

render(results[0], shootings);
    });

</script>
  </body>
</html>

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

https://d3js.org/d3.v4.js

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