Skip to content

Instantly share code, notes, and snippets.

@christophermanning

christophermanning/README.md

Forked from mbostock/.block
Created October 1, 2012 03:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save christophermanning/3809302 to your computer and use it in GitHub Desktop.
Save christophermanning/3809302 to your computer and use it in GitHub Desktop.
Download ZIP
General Update Pattern, III
Raw
README.md

By adding transitions, we can more easily follow the elements as they are entered, updated and exited. Separate transitions are defined for each of the three states.

Note that no transition is applied to the merged enter + update selection; this is because it would supersede the transition already scheduled on entering and updating elements. It's possible to schedule concurrent elements by using transition.transition or by setting transition.id, but it's simpler here to only transition the x-position on update; for entering elements, the x-position is assigned statically.

Want to read more? Try these tutorials:

See the D3 wiki for even more resources.

Previous: Key Functions

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: bold 48px monospace;
}
.enter {
fill: green;
}
.update {
fill: #333;
}
.exit {
fill: brown;
}
</style>
<body>
<script src="http://d3js.org/d3.v2.min.js?2.10.1"></script>
<script>
var d3_committer_index = 0;
// git shortlog -s | sort -rn
var d3_committers = [
'Mike Bostock',
'Jason Davies',
'Michael Bostock',
'Kristofer Monisit',
'yasirs',
'Lars Kotthoff',
'Square',
'Jeffrey Heer',
'webmonarch',
'Nelson Minar',
'Trevor Norris',
'Nathan Vander Wilt',
'Peter Woodman',
'Mitsutoshi Aoe',
'Steven Noble',
'David Poncelow',
'Xavier Shay',
'Tim Branyen',
'Michael Meisel',
'Jon Seymour',
'Johan Sundström',
'Ian Malpass',
'chris viau',
'Caged',
'Andrew Sutherland',
'Zee Agency',
'vtstarin',
'Tommy Montgomery',
'Stephen Bannasch',
'Mike Bostock + Erica Kwan',
'Michael Jackson',
'Lachèze Alexandre',
'Kevin J. Lynagh',
'Jim Radford',
'Jan Alonzo',
'Ignacio',
'Ger Hobbelt',
'Gerard Hundman',
'George Adams',
'Dirk Bergstrom',
'Carlos Scheidegger',
'Brandon Liu',
'Andy Chong'
];
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(32," + (height / 2) + ")");
function update(data) {
// DATA JOIN
// Join new data with old elements, if any.
var text = svg.selectAll("text")
.data(data, function(d) { return d; });
// UPDATE
// Update old elements as needed.
text.attr("class", "update")
.transition()
.duration(750)
.attr("x", function(d, i) { return i * 32; });
// ENTER
// Create new elements as needed.
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()
.duration(750)
.attr("y", 0)
.style("fill-opacity", 1);
// EXIT
// Remove old elements as needed.
text.exit()
.attr("class", "exit")
.transition()
.duration(750)
.attr("y", 60)
.style("fill-opacity", 1e-6)
.remove();
}
// The initial display.
update(d3_committers[d3_committer_index].split(""));
// Grab a random sample of letters from the alphabet, in alphabetical order.
setInterval(function() {
update(d3_committers[++d3_committer_index % d3_committers.length].split(""));
}, 1500);
// Shuffles the input array.
function shuffle(array) {
var m = array.length, t, i;
while (m) {
i = Math.floor(Math.random() * m--);
t = array[m], array[m] = array[i], array[i] = t;
}
return array;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment