var width = 300,
    height = 300,
    size = 17;

var color = d3.scale.ordinal()
    .range(["#e74c3c", "#8e44ad", "#ecf0f1", "#1abc9c", "steelblue"]);

var svg = d3.select("#stage").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(-50,-50)");

var rect = svg.selectAll("rect")
    .data(d3.merge(d3.range(0, width + size, size).map(function(x) {
      return d3.range(0, height + size, size).map(function(y) {
        return [x, y];
      });
    })))
  .enter().append("rect")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("width", size)
    .attr("height", size)
    .style("stroke", "#000")
    .style("stroke-width", "2px")
    .style("fill", "#000");

	rect.transition()
    .duration(0)
    .delay(function(d, i) { return i * 5; })
    .each(pulse);

function pulse() {
  var rect = d3.select(this);
  (function loop() {
    rect = rect.transition()
        .duration(750)
        .style("fill", color(Math.random() * 5 | 0))
        .each("end", function() { if (this.__transition__.count < 2) loop(); });
  })();
}