Items on a circle

_.md

[ Launch Inlet ]
Gist #2271952

config.json

{"description":"Items on a circle","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"squarecircle.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"rings.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.561111111111112,"hidepanel":false}

inlet.js

var svg = d3.select("svg");
var sw = parseInt(svg.style("width"), 10);
var sh = parseInt(svg.style("height"), 10);

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

svg = svg.append("svg:g")
	// center the circle
    .attr("transform", "translate(" + sw / 2 + "," + sh / 2 + ")");
var nRings = 5;
var rings = d3.range(1, nRings+1).map(createRingData);
svg.selectAll("g")
    .data(rings)
  .enter().append("svg:g")
    .attr("class", "ring")
    .each(ringEnter);

//updateRing()

///////////////////////////////////////////////////////////////////
function createRingData(i) {
  var radius = 70  //radius interval
  var width = 15   //width of each box
  return { 
        radius: radius * i, 
        width: width, 
        speed: i * 0.02917,
        phase: i
    };
}

function ringEnter(d, i) {
  //split up the circle into squares
  //var ntheta = 2;
  //var theta = Math.floor(ntheta * Math.PI * d.radius / d.width * Math.SQRT1_2)
  //var k = 360 / theta;
  var perRing = 10;
  var perSegment = 360 / perRing;
  var data = d3.range(1, perRing+1).map(function() { return d; });
  var sw = 2;
  var sx = 50;
  var sy = 0;
  var sp = 'M'+ sx+','+sy;

  d3.select(this)
  	  .selectAll("g")
      .data(data)
    .enter().append("svg:g")
      .attr("class", "segment")
      .attr("transform", function(_, i) { 
        var rotation = i * perSegment;
        var translation = d.radius;
        var transform = [
          "rotate(" + rotation + ")",
          "translate(" + translation + ")"
        ].join(' ');

        return transform;
      })
  // bird
  .append('svg:path')
  	.attr('d', sp+'c-2.415,1.072-5.012,1.795-7.736,2.121c2.781-1.667,4.918-4.308,5.923-7.453c-2.603,1.544-5.486,2.665-8.555,3.268c-2.456-2.617-5.957-4.253-9.832-4.253c-7.439,0-13.471,6.031-13.471,13.47c0,1.056,0.12,2.084,0.349,3.071c-11.195-0.562-21.121-5.925-27.765-14.075c-1.16,1.99-1.824,4.303-1.824,6.772c0,4.673,2.378,8.796,5.993,11.212c-2.208-0.071-4.286-0.676-6.101-1.686c-0.001,0.056-0.001,0.113-0.001,0.17c0,6.526,4.644,11.97,10.806,13.208c-1.13,0.309-2.32,0.472-3.549,0.472c-0.869,0-1.712-0.083-2.535-0.241c1.714,5.352,6.689,9.247,12.583,9.356c-4.61,3.612-10.418,5.766-16.729,5.766c-1.088,0-2.16-0.063-3.214-0.188c5.962,3.822,13.042,6.052,20.65,6.052c24.777,0,38.327-20.526,38.327-38.328c0-0.583-0.014-1.165-0.041-1.743z')
    .attr('fill', '#00ABE5')
    .attr('stroke', '#FFFFFF')
  	.attr('stroke-width', sw)
    .attr('x', d.width/2)
    .attr('y', d.width/2)
  /*.append('svg:circle')
  	.attr('cx', -d.width/2)
    .attr('cy', -d.width/2)
    .attr('r', d.width)
    .attr('stroke', '#FFFFFF') 
  */
  /*
  .append("svg:rect")
      .attr("x", -d.width / 2)
      .attr("y", -d.width / 2)
      .attr("width", d.width)
      .attr("height", d.width);
	*/
}

function updateRing() {
  var opacity = 0
    , stroke_opacity = 1
    , stroke_width = 5
    , fill_color = "#000000"
    , stroke_colors = ["#FFFFFF", "#000000"]
    , corners = 0

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

  function transform (d, i) { 
    var time = 4096;     //"time'
    var a = 1;
    var rotation = a * d.speed * time;
    var transform = "rotate(" + rotation + ")";

    return transform; 
  }
}