mbostock chained transitions

_.md

[ Launch: mbostock chained transitions ] 5939921 by gelicia
[ Launch: Tributary inlet ] 5939835 by gelicia

config.json

{"description":"mbostock chained transitions","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.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}

data.json

{"data": [
  {"key":"AZ", 
   "value": 9.3333, 
   "details":[
     {"key": "Phoenix",
      "value": 9.3333,
      "details": [
        {"key": "Apples" , "value":6},
        {"key": "Oranges" , "value":13},
        {"key": "Bananas" , "value":9}
      ]}
   ]},    
   {"key":"CA", 
   "value": 9.75, 
   "details":[
     {"key": "Berkeley",
      "value": 8.5,
      "details": [
        {"key": "Avocados" , "value":10},
        {"key": "Oranges" , "value":7}
      ]},
     {"key": "San Franicisco",
      "value": 11,
      "details": [
        {"key": "Avocados" , "value":8},
        {"key": "Apples" , "value":14}
      ]}
   ]},   
   {"key":"IL", 
   "value": 5.1666, 
   "details":[
     {"key": "Chicago",
      "value": 3,
      "details": [
        {"key": "Limes" , "value":3}
      ]},
     {"key": "Aurora",
      "value": 7.5,
      "details": [
        {"key": "Pears" , "value":11},
        {"key": "Oranges" , "value":4}
      ]},
     {"key": "Rockford",
      "value": 5,
      "details": [
        {"key": "Apples" , "value":2},
        {"key": "Pears" , "value":12},
       	{"key": "Bananas" , "value":5},
        {"key": "Oranges" , "value":1}
      ]}
   ]}
]}

inlet.js

// modified from http://bl.ocks.org/mbostock/1125997

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var dataAll = tributary.data.data;
var pathArr = [];
var levelData = getLevelData(dataAll, pathArr);

var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.selectAll("rect")
    .data(levelData)
  .enter().append("rect")
.attr({
  x : 50,
  y: 50,
  height : 50,
  width: 50,
  fill : "#000"
})
  .transition()
    .duration(2500)
    .delay(function(d) { return d * 40; })
  //  .each(slide);

function slide() {
  var circle = d3.select(this);
  
  (function repeat() {
    circle = circle.transition()
        .attr("cx", width)
      .transition()
        .attr("cx", 0)
        .each("start", repeat);
  })();
}

function getLevelData(data, thisPathArr){
  if (thisPathArr.length === 0 ) {  
    return data;
  }    
  else {
    var idx = thisPathArr.shift();
    thisPathArr = thisPathArr === undefined? [] : thisPathArr; 
    return getLevelData(data[idx].details, thisPathArr);
  }  
}  

style.css

circle {
  fill: #000;
  stroke: #000;
  stroke-width: 1.5px;
}