Sine Wave Circles by curran

index.html

<!DOCTYPE html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="500"></svg>
<script>
  var svg = d3.select("svg").style("background-color", "black"),
      width = svg.attr("width"),
      height = svg.attr("height"),
      n = 40,
      circles = svg.selectAll("circle").data(d3.range(n))
        .enter().append("circle")
          .attr("cx", function(d){ return (d + 0.5) * width / n; })
          .attr("r", width / n / 2)
          .attr("fill", "white");
  d3.timer(function (time){
    circles.attr("cy", function(d){
      return (Math.sin(d / 5 + time / 1000)) * height / 4 + height / 2;
    });
  });
</script>