[ Launch: mbostock chained transitions ] 5939921 by gelicia
[ Launch: Tributary inlet ] 5939835 by gelicia
-
-
Save gelicia/5939921 to your computer and use it in GitHub Desktop.
mbostock chained transitions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} | |
]} | |
]} | |
]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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