'use strict';
var dataset = _.range(8).map(function(d) {
  return d * 200;
});

var W = 640;
var H = 480;
var svg = d3.select('body')
  .append('svg')
  .attr('width', W)
  .attr('height', H)
  .style('background-color', '#333')
  
var SPACING = W / dataset.length;
  
var circles = svg.selectAll('circle')
  .data(dataset)
  .enter().append('circle')
  .attr('cx', function(d, i) {
    return i * SPACING + SPACING / 2;
  })
  .attr('cy', H / 2)
  .attr('stroke', '#555')
  .attr('stroke-width', 5)
  .attr('fill', '#222')
  .attr('r', 5)
  .transition()
  .duration(1400)
  .delay(function(d) {
    return d;
  })
  .each(step)

  
function step() {
  var i = 0;
  var c =  function(r) {
      if (r) {
        i = 0;
        return;
      }
      return i++;
  };
  var circles = d3.select(this);
  
  (function repeat() {
    circles
      .transition()
        .duration(700)
        .attr('r', 40)
      .transition()
        .duration(2800)
        .attr('r', 5)
        .each('end', repeat);
  })();
  
};