Dynamic Hexbins

Computing hexbins from a constantly-fluctuating sample of 2,000 random points.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
  background: #fff;
}

.hexagons path {
  fill: none;
  stroke: #fff;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="d3-hexbin.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

var margin = {top: 12, right: 12, bottom: 12, left: 12},
    width = 960,
    height = 500,
    θ = 0,
    δθ = .03,
    i = -1,
    n = 2000,
    k = 20; // samples to replace per frame

var randomX = d3.randomBates(12),
    randomY = d3.randomBates(6),
    points = d3.range(n)
      .map(function() {
        return [(width + Math.round(Math.random()) - 80 + 80 * Math.cos(θ)) * randomX(), (height - 80 + 80 * Math.sin(θ)) * randomY()];
      });

var color = d3.scaleSequential(d3.interpolateBuPu)
    .domain([0, 35]);

var hexbin = d3.hexbin()
    .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]])
    .radius(13);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.timer(function() {
  θ += δθ;
  var new_points = d3.range(k)
    .map(function() {
      return [(width - 80 + 80 * Math.cos(θ)) * randomX(), (height - 80 + 80 * Math.sin(θ)) * randomY()];
    });
  points = points.slice(k)
    .concat(new_points);

hexagon = svg.select(".hexagons").selectAll("path")
      .data(hexbin(points), function(d) { return d.x + "," + d.y; });

hexagon.exit().remove();

hexagon.enter().append("path")
      .attr("d", hexbin.hexagon())
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .merge(hexagon)
      .style("fill", function(d) { return color(d.length); });
});

</script>

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

https://d3js.org/d3-scale-chromatic.v1.min.js