dancing circles with d3 bro

dancingCircles.js

var pi = Math.PI,
    cos = Math.cos,
    sin = Math.sin;

var thetaStep = 0.1;
var angle = pi;
var r = 10;
var length = 50;
var offx = offy = 125;

setInterval(function(){
    var circles = d3.selectAll("svg")
        .selectAll("circle")
        .data([angle, angle, angle, angle, angle, angle]);
        
    circles.enter().append("circle")    
        .attr("r", r);
    
    // changing the argument of sin and cos makes trippy stuff
    circles.attr("cx", function(angle, i) {
            return length*cos(angle - 2*i) + offx;
        })
        .attr("cy", function(angle, i){
            return length*sin(angle + 2*i) + offy;
        });
    
    angle += thetaStep;
    if(angle > 2*pi){
        angle = -2*pi;
    }
}, 25);

index.html

<style>
  circle {
    fill: black;
  }
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="dancingCircles.js"></script>
<svg width="720" height="400"></svg>