Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Jul 6, 2013
Embed
What would you like to do?
mbostock chained transitions
{"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": [
{"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}
]}
]}
]}
// 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);
}
}
circle {
fill: #000;
stroke: #000;
stroke-width: 1.5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.