Built with blockbuilder.org
forked from EE2dev's block: Bars transitioning over text
license: mit |
Built with blockbuilder.org
forked from EE2dev's block: Bars transitioning over text
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
@import url('https://fonts.googleapis.com/css?family=Comfortaa'); | |
body { margin:0;top:0;right:50;bottom:0;left:0; } | |
svg { width:100%; height: 100% } | |
.intro-text { | |
font-family: 'Comfortaa'; | |
} | |
</style> | |
</head> | |
<body> | |
<br><br><br><br><br><br> | |
<script> | |
var letters = [" ", " ", " ", " ", " ", " ", "", " ", " ", " ", " ", " ", " ", " "]; | |
var letters2 = [" ", " ", "j", "a", "r", "e", "d", " ", "w", "i", "l", "b", "e", "r"] | |
var indexLetters = d3.range(16); | |
var margin = {top: 20, right: 20, bottom: 30, left:50}, | |
width = 360 - margin.left - margin.right, | |
height = 120 - margin.top - margin.bottom; | |
var x = d3.scale.ordinal() | |
.domain(indexLetters).rangeRoundBands([0, width], .2); | |
var y = d3.scale.linear() | |
.domain([0, 100]).range([height, 0]); | |
var colorScale1 = d3.scale.ordinal() | |
.domain([0,3]).range([]); | |
var colorScale = d3.scale.ordinal() | |
.domain(indexLetters).range(["coral","#67c7d3","#dbb64b","rgb(141, 211, 199)", "coral","#67c7d3","#dbb64b","rgb(141, 211, 199)","#67c7d3","coral","#67c7d3"]); | |
var svg = d3.select("body").append("svg") | |
.attr("class", "ie") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
var text1 = svg.selectAll("text") | |
.data(indexLetters) | |
.enter().append("text") | |
.attr("class", "intro-text") | |
.attr("x", function(d) { return x(d) + x.rangeBand()/2; }) | |
.attr("y", height - 40) | |
.attr("dy", "1em") | |
.style("text-anchor", "middle") | |
.text(function(d) { return letters[d];}); | |
svg.selectAll(".bar") | |
.data(indexLetters) | |
.enter().append("rect") | |
.attr("class", "bar") | |
.attr("x", function(d) { return x(d); }) | |
.attr("width", x.rangeBand()) | |
.attr("y", y(0)) | |
.attr("height", height - y(0)) | |
.style("fill", function(d) {return colorScale(d);}) | |
.transition() | |
.duration(900) | |
.delay(function(d, i) {return i*100;}) | |
.each(slide); | |
function slide() { | |
var bar = d3.select(this); | |
var grey = true; | |
(function repeat() { | |
grey = !grey; | |
bar.each(function(d) { | |
text1.filter(function(dt) {return dt === d;}) | |
.text(function(d) { return (grey) ? letters2[d] : letters[d];}) | |
}); | |
bar = bar.transition() | |
.attr("y", function(d) { return y(0); }) | |
.attr("height", function(d) { | |
return height - y(0); }) | |
.transition() | |
.attr("y", function(d) { return y(100); }) | |
.attr("height", function(d) { return height; }) | |
.style("fill", (d) => colorScale(d)) | |
.each("end", repeat) | |
})(); | |
} | |
</script> | |
</body> |