var d3 = window.d3
/* const data = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90] */
var data = d3.range(9).map(function (n) { return n * 10; })

var sqrtScale = d3.scaleSqrt()
  .domain([0, 100])
  .range([0, 70])

var svg = d3.select('svg')
// const width = +svg.attr('width')
var height = +svg.attr('height')

// using this instead of a x-scale
// accumulate distance for each varying circle
var xAccumulate = 0

svg.select('#vis')
  .selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('r', function (d) { return sqrtScale(d); })
  .attr('cx', function (d, i) {
    if (i > 0) { xAccumulate += (sqrtScale(d) * 2) }
    return xAccumulate + (sqrtScale(d) * 2)
  })
  .attr('cy', function (d) { return height / 2; })

// https://github.com/d3/d3-transition#active
d3.selectAll('circle').transition()
  .delay(function (d, i) { return i * 50 })
  .on('start', function repeat () {
    d3.active(this)
        .style('fill', 'red')
      .transition()
        .style('fill', 'green')
      .transition()
        .style('fill', 'blue')
      .transition()
        .on('start', repeat)
  })