CodePen

HTML

            
              <script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.hexbin.v0.min.js"></script>
<div id="test"></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .hexagon {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              width =  $("#test").width()  || 650
height = $("#test").height() || 650
i = -1
theta = 0
deltatheta = .03
n = 2000
k = 20 # samples to replace per frame
randomX = d3.random.normal(width / 2, 80)
randomY = d3.random.normal(height / 2, 80)
points = d3.range(n).map(-> [randomX(), randomY()] )
color = d3.scale.linear()
  .domain([0, 20])
  .range(["hsl(180,0%,100%)", "hsl(281,41%,69%)"])
  .interpolate(d3.interpolateHsl)
  #.range(["white", "steelblue"])
  #.interpolate(d3.interpolateLab)
hexbin = d3.hexbin()
  .size([width, height]).radius(20)
svg = d3.select("#test").append("svg")
  .attr("width", width)
  .attr("height", height)

hexagon = svg.append("g")
  .attr("class", "hexagons")
  .selectAll("path")
  .data(hexbin(points)).enter()
  .append("path").attr("d", hexbin.hexagon(19.5))
  .attr("transform", (d) -> "translate(#{d.x},#{d.y})" )
  .style("fill", (d) -> color d.length )

d3.timer ->
  theta += deltatheta
  randomX = d3.random.normal(width / 2 + 80 * Math.cos(theta), 80)
  randomY = d3.random.normal(height / 2 + 80 * Math.sin(theta), 80)
  j = 0
  while j < k
    i = (i + 1) % n
    points[i][0] = randomX()
    points[i][1] = randomY()
    ++j
  hexagon = hexagon.data(hexbin(points), (d) -> d.i + "," + d.j )
  hexagon.exit().remove()
  hexagon.enter().append("path")
    .attr("d", hexbin.hexagon(19.5))
    .attr("transform", (d) -> "translate(" + d.x + "," + d.y + ")")
  hexagon.style("fill", (d) -> color d.length)
  return



            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................