var width = innerWidth, 
    height = innerHeight,
    n = 30

var svg = d3.select('body').html('')
  .append('svg')
  .at({width, height})
  .append('g')
  .translate([0, height/2])

svg.append('rect').at({width, height, y: -height/2})

var x = d3.scaleLinear().domain([0, n - 1]).range([0, width])

var circleSel = svg.appendMany(d3.range(n), 'circle')
  .at({cx: x, r: width/n/2, fill: '#fff'})

d3.timer(function(t){
  circleSel.at('cy', function(d){
    return Math.sin(d/n*2 + t/1000)*height/2
  })
})