|
<!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> |
