[ Launch: Tributary inlet ] c3b6be63e7999001efcb by poezn
-
-
Save poezn/c3b6be63e7999001efcb to your computer and use it in GitHub Desktop.
stacking blocks
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":"stacking blocks","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"assets.svg":{"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},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"inline-console":true,"thumbnail":"http://i.imgur.com/nUrCn0d.png"} |
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
[ | |
{"country": "United States","under-construction": 0.0,"under-planned": 0.0,"free": 0.0,"over-construction": 0.0,"over-planned": 3.0}, | |
{"country": "Russia *","under-construction": 0.0,"under-planned": 0.0,"free": 0.0,"over-construction": 5.6,"over-planned": 5.9}, | |
{"country": "EU28","under-construction": 0.0,"under-planned": 0.0,"free": 0.0,"over-construction": 14.4,"over-planned": 23.1}, | |
{"country": "Ukraine","under-construction": 0.1,"under-planned": 0.0,"free": 0.0,"over-construction": 0.1,"over-planned": 2.0}, | |
{"country": "Japan","under-construction": 0.1,"under-planned": 0.0,"free": 0.0,"over-construction": 1.5,"over-planned": 4.9}, | |
{"country": "South Korea","under-construction": 3.9,"under-planned": 0.0,"free": 0.0,"over-construction": 4.2,"over-planned": 7.0}, | |
{"country": "Australia","under-construction": 0.0,"under-planned": 4.3,"free": 0.0,"over-construction": 0.0,"over-planned": 0.6}, | |
{"country": "Indonesia","under-construction": 8.1,"under-planned": 0.6,"free": 0.0,"over-construction": 0.0,"over-planned": 24.8}, | |
{"country": "South Africa","under-construction": 9.5,"under-planned": 2.6,"free": 0.8,"over-construction": 0.0,"over-planned": 0.0}, | |
{"country": "India","under-construction": 92.9,"under-planned": 0.0,"free": 0.0,"over-construction": 14.7,"over-planned": 303.3}, | |
{"country": "China","under-construction": 104.6,"under-planned": 0.0,"free": 0.0,"over-construction": 8.4,"over-planned": 370.0} | |
] |
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
var step = 6, | |
h = 400, | |
duration = 0 | |
blocksInColumn = 4, | |
padding = 2; | |
var scale = d3.scale.linear() | |
.domain([-380, 105]) | |
.range([500, 200]) | |
g.append("path") | |
.attr({ | |
"d": function() { | |
var zero = scale(0); | |
return "M" + zero + " 0L" + zero + " 1000" | |
} | |
}) | |
.style({ | |
"stroke": "#000" | |
}) | |
var wBar = (scale(-(blocksInColumn*step)) - scale(0)) - padding; | |
var layout = function(selection) { | |
selection.append("text") | |
.attr({ | |
"class": "label" | |
}) | |
.text(function(d) { return d.country }); | |
selection | |
.attr({ | |
"transform": function(d, i) { | |
var baseline = scale(d["free"] + d["under-planned"] + d["under-construction"]); | |
return "translate(" + [baseline, (i * 83 + 20)].join(" ") + ")"; | |
} | |
}) | |
var blocks = selection.selectAll("rect") | |
.data(function(d) { | |
var dataInConstruction = d3.range(0, d["under-construction"] + d["over-construction"], step); | |
var dataPlanned = d3.range(0, d["under-planned"] + d["over-planned"], step); | |
var blockData = _.flatten([ | |
_.map(dataInConstruction, function() { return "construction" }), | |
_.map(dataPlanned, function() { return "planned" }) | |
]); | |
return blockData; | |
}); | |
blocks.exit().remove(); | |
blocks.enter().append("rect") | |
.attr({ | |
"width": wBar, | |
"height": wBar, | |
"transform": function(d, i) { | |
var ty = (i % blocksInColumn) * (wBar + padding) , | |
tx = Math.floor(i / blocksInColumn) * (wBar + padding) | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}); | |
blocks | |
.attr({ | |
"class": function(d) { return d; } | |
}) | |
.style({ | |
"opacity": 0 | |
}) | |
.transition() | |
.delay(function(d, i) { | |
return duration + (i * 40); | |
}) | |
.style({ | |
"opacity": 1 | |
}); | |
} | |
g.selectAll(".blocks") | |
.data(tb.data) | |
.enter().append("g") | |
.attr({ | |
"class": "blocks" | |
}) | |
.call(layout); | |
console.log(scale(0)); | |
console.log(wBar); | |
console.log(scale(0) - scale(100)) |
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
#display { | |
background-color: #FFF; | |
} | |
.label { | |
fill: #888; | |
font-size: 12px; | |
} | |
.planned { | |
fill: #5dadcb; | |
} | |
.construction { | |
fill: #477b8e; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment