Skip to content

Instantly share code, notes, and snippets.

@lorenzopub
Created January 13, 2017 13:54
Show Gist options
  • Save lorenzopub/4fbcc8c19797970169dddc2d854fde5c to your computer and use it in GitHub Desktop.
Save lorenzopub/4fbcc8c19797970169dddc2d854fde5c to your computer and use it in GitHub Desktop.
Bubble Update Pattern
license: gpl-3.0
<html>
<head>
<style>
body {
margin: 0;
font-family: "Helvetica", sans-serif;
}
text {
text-anchor: middle;
fill: #fff;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
var width = window.innerWidth, height = window.innerHeight;
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var pack = d3.pack()
.size([width, height])
.padding(1.5);
redraw(randomizeData());
d3.interval(function(){
redraw(randomizeData());
}, 1500);
function redraw(classes){
// transition
var t = d3.transition()
.duration(750);
// hierarchy
var h = d3.hierarchy({children: classes})
.sum(function(d) { return d.size; })
//JOIN
var circle = svg.selectAll("circle")
.data(pack(h).leaves(), function(d){ return d.data.name; });
var text = svg.selectAll("text")
.data(pack(h).leaves(), function(d){ return d.data.name; });
//EXIT
circle.exit()
.style("fill", "#b26745")
.transition(t)
.attr("r", 1e-6)
.remove();
text.exit()
.transition(t)
.attr("opacity", 1e-6)
.remove();
//UPDATE
circle
.transition(t)
.style("fill", "#3a403d")
.attr("r", function(d){ return d.r })
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; })
text
.transition(t)
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; });
//ENTER
circle.enter().append("circle")
.attr("r", 1e-6)
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; })
.style("fill", "#fff")
.transition(t)
.style("fill", "#45b29d")
.attr("r", function(d){ return d.r });
text.enter().append("text")
.attr("opacity", 1e-6)
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; })
.text(function(d){ return d.data.name; })
.transition(t)
.attr("opacity", 1);
}
function randomizeData(){
var d0 = shuffle(alphabet),
d1 = [],
d2 = [];
for (var i = 0; i < random(1, alphabet.length); i++){
d1.push(d0[i]);
}
d1.forEach(function(d){
d2.push({name: d, size: random(1, 10)})
});
return d2;
}
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment