just another inlet to tributary

squarecircle.js

var start = Date.now()
    , n = 6         //number of rings
    , radius = 70  //radius interval
    , deg = 360     //angle (in degrees) we will split
    , width = 21    //width of each box
    , t = 1337     //"time'
    , a = 1
    , ntheta = 2
    , speed_factor = 0.02917

    , opacity = 0.01
    , stroke_opacity = 0.9
    , stroke_width = 2
    , fill_color = "#000000"
    , stroke_colors = ["#ffffff", "#000000"]
    , corners = 0




var sw = parseInt(d3.select("svg").style("width"))
//make the sin waves extend past the width a little
sw += .1 * sw
var sh = parseInt(d3.select("svg").style("height"))


var rings = [ ];

for (i in d3.range(n))
{
    var speed = i * speed_factor
    rings.push({ 
        radius: radius*i, 
        width: width, 
        speed: speed,
        phase: i
    })
}

var svg = d3.select("svg")

svg.append("rect")
    .attr("width", sw)
    .attr("height", sh)
    .attr("fill", "#888888")


svg = svg.append("svg:g")
    .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")scale(.6)");

var ring = svg.selectAll("g")
    .data(rings)
  .enter().append("svg:g")
    .attr("class", "ring")
    .each(ringEnter);


var updateRing = function(elapsed) {
  rotate = function(d,i) { 
    return "rotate(" + (a * d.speed * elapsed) + ")"; 
  };

  var rings = svg.selectAll("g.ring")
      .attr("transform", rotate)
    .selectAll("rect")
      .attr("transform", rotate)
      .attr("fill", fill_color)
      .attr("fill-opacity", opacity)
      .attr("stroke", function(d,i) {
          return stroke_colors[i % 2];
      })
      .attr("stroke-opacity", stroke_opacity)
      .attr("stroke-width", stroke_width)
      .attr("rx", corners)
      .attr("ry", corners)



}
function ringEnter(d, i) {
    //split up the circle into squares
    var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2),
    k = deg / theta;
  d3.select(this).selectAll("g")
      .data(d3.range(theta).map(function() { return d; }))
    .enter().append("svg:g")
      .attr("class", "square")
      .attr("transform", function(_, i) { return "rotate(" + i * k + ")translate(" + d.radius + ")"; })
    .append("svg:rect")
      .attr("x", -d.width / 2)
      .attr("y", -d.width / 2)
      .attr("width", d.width)
      .attr("height", d.width);
}
updateRing(t)