Another Inlet

_.md

Gist #4290897
Gist #4290814
Gist #4290791
Gist #4290726
Gist #4290721
Gist #4290667
Gist #4290622
Gist #4290523
Gist #4290508
Gist #4290483
Gist #4290448
Gist #4290411
Gist #4290343
Gist #4290285
Gist #3200444

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":false,"vim":true,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6006744328632739,"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,"hidepanel":false}

inlet.js

var lineData=[], a=0, data=[], i, num=26, r, step= (360 / num) / 180 *Math.PI ;

var svg = d3.select("svg");

var lineFunction = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate("basis-closed");

for( i = 0; i < num; i++ ){
  data[i]=Math.ceil(Math.random()*6);
  r = 183 + data[i] * 43;
  a += step;
  lineData.push( {"x": Math.sin(a)*r, "y": Math.cos(a)*r} );
}

svg.append("path")
  .attr({"d": lineFunction(lineData),"fill": "#FF0000", "opacity": 0.6 })
  .attr("transform", "translate(500,500)");

lineData=[];
for( i = 0; i < num; i++ ){
  data[i]=Math.ceil(Math.random()*6);
  r = 188+data[i]*45;
  a += step;
  lineData.push( {"x": Math.sin(a)*r, "y": Math.cos(a)*r} );
}

var o=svg.append("path")
.attr({"d": lineFunction(lineData),"fill": "#333", "opacity":0.7})
.attr("transform", "translate(500,500)");


lineData=[];
for( i = 0; i < num; i++ ){
  data[i]=Math.ceil(Math.random()*6);
  r = 188+data[i]*45;
  a += step;
  lineData.push( {"x": Math.sin(a)*r, "y": Math.cos(a)*r} );
}

o.transition().duration(2000).attr({"d": lineFunction(lineData),"fill": "#333", "opacity":0.7})

svg.selectAll("rect").data(data).enter().append("rect")
 .attr({"fill":"#25CAF3","x":13,"height":3,"y":function(d,i){return i*4+223;},"width":function(d){return d*8;}})

  setInterval(function() {
for( i = 0; i < num; i++ ){
  data[i]=Math.ceil(Math.random()*6);
  r = 188+data[i]*45;
  a += step;
  lineData[i]= {"x": Math.sin(a)*r, "y": Math.cos(a)*r} ;
}

o.transition().duration(2000).attr({"d": lineFunction(lineData),"fill": "#333", "opacity":0.7})

 }, 1500);