Built with blockbuilder.org
Created
October 31, 2016 04:20
-
-
Save oliviac12/e1c862b986851427bb3107a1ca1b4683 to your computer and use it in GitHub Desktop.
fresh block
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
license: mit |
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
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
text { | |
font: bold 48px monospace; | |
} | |
.enter { | |
fill: green; | |
} | |
.update { | |
fill: #333; | |
} | |
.exit { | |
fill: brown; | |
} | |
</style> | |
<svg width="960" height="500"></svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
var alphabet = "abcdefghijklmnopqrstuvwxyz".split(""); | |
var svg = d3.select("svg"), | |
width = +svg.attr("width"), | |
height = +svg.attr("height"), | |
g = svg.append("g").attr("transform", "translate(32," + (height / 2) + ")"); | |
function update(data) { | |
var t = d3.transition() | |
.duration(750); | |
// JOIN new data with old elements. | |
var text = g.selectAll("text") | |
.data(data, function(d) { return d; }); | |
// EXIT old elements not present in new data. | |
text.exit() | |
.attr("class", "exit") | |
.transition(t) | |
.attr("y", 60) | |
.style("fill-opacity", 1e-6) | |
.remove(); | |
// UPDATE old elements present in new data. | |
text.attr("class", "update") | |
.attr("y", 0) | |
.style("fill-opacity", 1) | |
.transition(t) | |
.attr("x", function(d, i) { return i * 32; }); | |
// ENTER new elements present in new data. | |
text.enter().append("text") | |
.attr("class", "enter") | |
.attr("dy", ".35em") | |
.attr("y", -60) | |
.attr("x", function(d, i) { return i * 32; }) | |
.style("fill-opacity", 1e-6) | |
.text(function(d) { return d; }) | |
.transition(t) | |
.attr("y", 0) | |
.style("fill-opacity", 1); | |
} | |
// The initial display. | |
update(alphabet); | |
// Grab a random sample of letters from the alphabet, in alphabetical order. | |
d3.interval(function() { | |
update(d3.shuffle(alphabet) | |
.slice(0, Math.floor(Math.random() * 26)) | |
.sort()); | |
}, 1500); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment