Another Inlet

_.md

Gist #4298038
Gist #4298001
Gist #4297969
Gist #4297902
Gist #4297885
Gist #4297882
Gist #4297857
Gist #4297786
Gist #4297780
Gist #4297765
Gist #4297726
Gist #4297654
Gist #4297613
Gist #4297566
Gist #4297484
Gist #4297340
Gist #4297336
Gist #4297300
Gist #4297176
Gist #4297168
Gist #4297024
Gist #4297013
Gist #4296993
Gist #4296856
Gist #4296701
Gist #4296632
Gist #4296602
Gist #4296526
Gist #4296508
Gist #4296441
Gist #4296428
Gist #4296369
Gist #4296340
Gist #4296122
Gist #4295946
Gist #4295610
Gist #4295580
Gist #4295545
Gist #4295449
Gist #4295421
Gist #4295349
Gist #4295278
Gist #4295261
Gist #4295176
Gist #4295065
Gist #4295050
Gist #4295040
Gist #4295033
Gist #4295031
Gist #4294970
Gist #4291239
Gist #4291189
Gist #4291133
Gist #4291114
Gist #4291056
Gist #4291036
Gist #4291030
Gist #4291012
Gist #4290942
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.5528887421591288,"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 dataset=[], lineData=[], a=0, data=[], i, num=26, r, step= (360 / num) / 180 *Math.PI ;

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

// generates 26 fake numbers in an array
var fakearray = function(){
  var tmp=[];
  for( i = 0; i < num; i++ )tmp[i]=Math.ceil(Math.random()*50);  
  return tmp;
}

// creates a stack of fake objects to work with
for(var e = 0; e < 99; e++ ){
  var tmp = { "color":"#000333","stuff":{"num":2,"values":fakearray(),"moarvalues":fakearray()}};
  dataset.push(tmp);
}
//console.log(dataset);

var xxx = d3.scale.linear()
  .range([0, 273]);

    
var s=[];

function pick(){
  var chosen="";
  for( var f = 0; f < 3; f++){
    var index=Math.round(Math.random()*dataset.length);
       chosen+=index+" "; 
    s[f]= dataset[ index ] ;
  }
  //console.log(chosen);
}

pick();


var yo= function(d,i){
  var m=[];
  for( i = 0; i < num; i++ ){
     r = 87+d[i];
     a += step;
     m[i]= {"x": Math.sin(a)*r, "y": Math.cos(a)*r} ;
  }
  return m;
}

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


var t=svg.selectAll("g")
    .data(s)
    .enter()
    .append("g")
    .attr({"transform":function(d,i){ return "translate("+xxx(i)+",300)"},"x":function(d,i){return i*200},"y":0});

t.data(s,function(d){return d.stuff.values;})
  .append("path")
  .attr("class","one")
  .attr('opacity',0.76)
  .attr('fill','#F01046')
  .transition().duration(200).attr({"d": function(d){ return lineFunction(yo(d.stuff.values)) } });

t.data(s,function(d){return d.stuff.moarvalues;})
  .append("path")
  .attr("class","two")
  .attr('opacity',0.56)
  .attr('fill','#00ADFF')
  .transition().duration(200).attr({"d": function(d){ return lineFunction(yo(d.stuff.moarvalues)) } });

  svg.selectAll("path").attr("transform", "translate(200,100)");


t.selectAll("g")
      .data(function(d){return d.stuff.moarvalues})
      .enter()
      .append("rect")
  .attr( { "opacity":0.2,"fill":"#FFF","x":function(d,i){return i*4+150},"y":function(d){return 60-d+40;},"width":3, "height": function(d){return d;} } );

  //  t.selectAll("g").data(s,function(d){ return d.stuff.moarvalues;}).enter().append("rect")
    // .attr( { "fill":"#F73DD9","x":function(d,i){return i*8+4}, "width":3, "height": function(d){return d;} } );


  setInterval(function() {
    
   pick();
    
    svg.selectAll("g").selectAll("path")
      .data(s,function(d){return d})
      .transition().duration(1500)
      .attr({"d": function(d){ return lineFunction(yo(d.stuff.values)) } });
 
//svg.selectAll("rect").data(data)
 //.transition()
  //.duration(500)
  //.attr({"fill":"#3D9DF7","x":13,"height":3,"y":function(d,i){return i*4+223;},"width":function(d){return d;}});

      
 }, 1000);