people on rings

_.md

[ Launch: people on rings ] 6680791 by mjgil

config.json

{"description":"people on rings","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/oa3dHL1.jpg"}

inlet.js

var n = 13         //number of rings
    , radius = 70  //radius interval
    , deg = 360     //angle (in degrees) we will split
    , width = 16    //width of each box
    , t = 39     //"time'
    , a = 115.32
    , ntheta = 1.02228
    , speed_factor = 0.182

    , opacity = 0.
    , stroke_opacity = 0.42336
    , stroke_width = 1.83643
    , fill_color = "#008800"
    , stroke_colors = ["#ffffff", "#fff"]
    , corners = 21




var sw = tributary.sw;
//make the sin waves extend past the width a little
var sh = tributary.sh;


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", "#111111")


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")
  var cells = rings
    .selectAll("g.square use")
      .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;
    var cells = 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 + ")"; })
    var rects = cells
    /*
    .append("svg:rect")
        .attr("x", -d.width / 2)
        .attr("y", -d.width / 2)
        .attr("width", d.width)
        .attr("height", d.width);
    */
    var icons = cells
    .append("svg:use")
     .attr("xlink:href", "#manicon")
        .attr("x", -d.width / 2)
        .attr("y", -d.width / 2)
        .attr("width", d.width)
        .attr("height", d.width);
}



//Append the man and the woman icons (from thenounproject.com)
var defs = svg.append("defs")
var man = defs.append("g")
    .attr("id", "manicon")
man.append("circle")
    .attr("cx", 18.118)
    .attr("cy", 8.159)
    .attr("r", 8.159)
man.append("path")
    .attr("d", "M8.472,95.426c0,2.524,2.05,4.574,4.574,4.574c2.529,0,4.576-2.05,4.576-4.574l0.004-38.374h2.037L19.65,95.426\nc0,2.524,2.048,4.574,4.574,4.574s4.573-2.05,4.573-4.574l0.02-66.158h2.006v24.38c0,4.905,6.398,4.905,6.384,0v-24.9\nc0-5.418-3.184-10.728-9.523-10.728L9.396,18.012C3.619,18.012,0,22.722,0,28.599v25.05c0,4.869,6.433,4.869,6.433,0v-24.38h2.048\nL8.472,95.426z")

updateRing(t)