[ Launch: Normal - Dry - Drought ] c4db4fdf3120c7e8344d by poezn
-
-
Save poezn/c4db4fdf3120c7e8344d to your computer and use it in GitHub Desktop.
Normal - Dry - Drought
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":"Normal - Dry - Drought","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"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}},"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,"thumbnail":"http://i.imgur.com/oylIbEX.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
var data = [ | |
{"label": "Normal Year", "value": 29}, | |
{"label": "Dry Year", "value": 39}, | |
{"label": "Drought Year", "value": 60} | |
]; | |
var w = 100, | |
h = 200, | |
durationPerPercent = 50; | |
var yScale = d3.scale.linear() | |
.domain([0, 100]) | |
.range([h, 0]) | |
var years = g.selectAll("g.year") | |
.data(data); | |
var newYears = years.enter().append("g") | |
.attr({ | |
"class": "year", | |
"transform": function(d, i) { | |
return "translate(" + (w*1.4*i) + " 0)"; | |
} | |
}); | |
var bars = newYears.append("g") | |
.attr("transform", "translate(0, 34)"); | |
var labels = newYears.append("g"); | |
bars.append("rect") | |
.attr({ | |
"class": "total", | |
"height": function(d, i) { | |
return yScale(0) - yScale(100); | |
}, | |
"width": w, | |
"transform": function(d, i) { | |
var tx = 0, | |
ty = yScale(100); | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}); | |
bars.append("rect") | |
.attr({ | |
"class": function(d, i) { return i < 2 ? "gw" : "gw drought" }, | |
"height": 0, | |
"width": w, | |
"transform": function(d, i) { | |
var tx = 0, | |
ty = yScale(0); | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}); | |
bars.append("rect") | |
.attr({ | |
"class": function(d, i) { return i < 2 ? "gw-top" : "gw-top drought" }, | |
"height": 3, | |
"width": w, | |
"transform": function(d, i) { | |
var tx = 0, | |
ty = yScale(0) - 1; | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}); | |
labels.append("text") | |
.attr({ | |
"class": "title", | |
"text-anchor": "middle", | |
"transform": function(d, i) { | |
var tx = w/2, | |
ty = 20; | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}) | |
.text(function(d) { return d.label }); | |
labels.append("text") | |
.attr({ | |
"class": "number", | |
"text-anchor": "middle", | |
"transform": function(d, i) { | |
var tx = w/2, | |
ty = yScale(d.value) + 60; | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}) | |
.text(function(d) { return d.value + "%" }); | |
bars.select("rect.gw") | |
.transition() | |
.duration(function(d, i) { return d.value * durationPerPercent }) | |
.ease("linear") | |
.delay(1000) | |
.attr({ | |
"height": function(d, i) { | |
return yScale(0) - yScale(d.value); | |
}, | |
"transform": function(d, i) { | |
var tx = 0, | |
ty = yScale(d.value); | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}); | |
bars.select("rect.gw-top") | |
.transition() | |
.duration(function(d, i) { return d.value * durationPerPercent }) | |
.ease("linear") | |
.delay(1000) | |
.attr({ | |
"height": 3, | |
"transform": function(d, i) { | |
var tx = 0, | |
ty = yScale(d.value) - 1; | |
return "translate(" + [tx, ty].join(" ") + ")" | |
} | |
}); |
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
rect.total { | |
fill: #F4F4F4; | |
} | |
rect.gw { | |
fill: #5DB2D3; | |
mask: url(#stripes); | |
} | |
rect.gw-top { | |
fill: #398eca; | |
} | |
rect.gw.drought { | |
fill: #ca5139; | |
} | |
rect.gw-top.drought { | |
fill: #9d3329; | |
} | |
#display { | |
background-color: #FFF; | |
} | |
text.title { | |
font-size: 12px; | |
} | |
text.number { | |
font-weight: bold; | |
fill: #FFF | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment