index.html

## index.html
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
            <style>

    .hexagon {
        fill: none;
        stroke: #000;
        stroke-width: .5px;
    }

    </style>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/d3.hexbin.v0.min.js"></script>
</head>
<body>
<script>

    var width = 960,
            height = 500,
            i = -1,
            θ = 0,
            δθ = .03,
            n = 2000,
            k = 20; // samples to replace per frame

    var randomX = d3.random.normal(width / 2, 80),
            randomY = d3.random.normal(height / 2, 80),
            points = d3.range(n).map(function() { return [randomX(), randomY()]; });

    var color = d3.scale.linear()
            .domain([0, 20])
            .range(["white", "steelblue"])
            .interpolate(d3.interpolateLab);

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

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

    var hexagon = svg.append("g")
            .attr("class", "hexagons")
            .selectAll("path")
            .data(hexbin(points))
            .enter().append("path")
            .attr("d", crittergon())
            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + "), scale(0.05), matrix(1 0 0 -1 0 800)"; })
            .style("fill", function(d) { return color(d.length); });

    d3.timer(function() {
        θ += δθ;
        randomX = d3.random.normal(width / 2 + 80 * Math.cos(θ), 80),
                randomY = d3.random.normal(height / 2 + 80 * Math.sin(θ), 80);

        for (var j = 0; j < k; ++j) {
            i = (i + 1) % n;
            points[i][0] = randomX();
            points[i][1] = randomY();
        }

        hexagon = hexagon
                .data(hexbin(points), function(d) { return d.i + "," + d.j; });

        hexagon.exit().remove();

        hexagon.enter().append("path")
                .attr("d", crittergon())
                .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + "), scale(0.05), matrix(1 0 0 -1 0 800)"; });

        hexagon
                .style("fill", function(d) { return color(d.length); });
    });

    function crittergon() {
        return "M632 246q-7 12 -18 21q-2 2 -4 3l-116 78q48 29 95 58q6 4 14 9q7 5 14 13q6 8 10 20q4 11 4 30q0 18 -4 31q-4 14 -10 23q-7 10 -14 16t-14 11l-220 134l-4 2q-3 2 -7 4l-8 2q-3 1 -7 2t-8 1q-7 1 -15 0q-3 0 -7 -1l-8 -2q-3 -1 -7 -2q-4 -2 -7 -4l-4 -2q-113 -69 -227 -138q-23 -10 -36 -32q-10 -16 -11 -36v-2v-3v-2v-6v-265v-3q-1 -16 5 -30v-1l1 -2q2 -3 4 -7q0 -1 1 -2q1 -2 3 -5l3 -3q2 -4 8 -9q6 -6 13 -10l236 -144l4 -2q3 -2 7 -4q4 -1 7 -2l8 -2t7 -1q4 0 8 -1q4 1 7 1q4 0 8 1t7 2l8 2q4 2 7 4l4 2q118 72 237 144q13 9 22 21q10 13 13 28q4 17 2 31q-3 15 -11 29zM605 195q-4 -17 -19 -26l-236 -144q-1 0 -2 -1l-4 -2t-4 -1q-2 -1 -4 -1q-2 -1 -4 -1h-8q-2 0 -4 1q-2 0 -4 1q-2 0 -4 1l-4 2l-1 1h-1l-236 144q-7 5 -12 12l-1 1q-6 9 -7 19v2v12v32v45v52v51v45v32v12q1 7 3 12v2q1 1 2 3q0 1 1 1q0 1 1 2q0 1 1 1q0 1 1 2l4 4v1q3 3 8 5l6 4q2 1 5 2q17 4 32 -5q118 -72 236 -145q8 -4 12 -11q5 -7 7 -14q2 -8 0 -16q-1 -8 -5 -16q-3 -4 -6 -7q-4 -3 -8 -5q-1 -1 -2 -1l-4 -2t-4 -1q-2 -1 -4 -1q-2 -1 -4 -1h-8q-2 0 -4 1q-2 0 -4 1q-2 0 -4 1l-4 2q-1 1 -2 1l-144 88q-4 2 -9 2t-10 -2q-4 -3 -7 -7q-2 -4 -2 -9v-2v-135v0q0 -5 2 -9q2 -5 7 -7q87 -54 175 -107v0q2 -2 4 -2q1 0 2 -1h3h1h5q0 1 1 1t3 1l1 1q102 62 204 125q11 6 22 6t21 -6q10 -5 15 -14q9 -15 5 -32z";
    }

</script>