D3 Examples - Fatal Force Hexbins

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <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>
​
  <script>
  var width = 960,
      height = 500;
​
  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>
​
    