hexes

_.md

[ Launch: test ] 684a67b8fef058b8088d by radiodario
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"hexes","endpoint":"","display":"svg","public":true,"require":[{"name":"","url":"http://d3js.org/d3.hexbin.v0.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var width = 427,
    height = 548,
    i = -1,
    theta = 0,
    dtheta = 0.3,
    n = 2000,
    k = 52; // 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, 40])
    .range(["black", "yellow"])
    .interpolate(d3.interpolateLab);

var size = d3.scale.linear()
	.domain([0, 40])
	.range([0, 7]);

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

var svg = d3.select("svg")
	.style("background-color", "black")
    .attr("width", width)
    .attr("height", height);

var hexagon = svg.append("g")
    .attr("class", "apps")
  .selectAll("circle")
    .data(hexbin(points))
    .enter()
  .append('circle')
	.attr("r", function(d) { return size(d.length) })
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.style("fill", function(d) { return color(d.length); });


d3.timer(function() {
  theta += dtheta;
  randomX = d3.random.normal(width / 2 + 80 * Math.cos(theta), 80),
  randomY = d3.random.normal(height / 2 + 80 * Math.sin(theta), 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('circle')
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
  
  hexagon
      .attr("r", function(d) { return size(d.length) })
      .style("fill", function(d) { return color(d.length); });
});