vongillern/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Forked from: http://bl.ocks.org/christophermanning/3809302 (which was forked from: http://bl.ocks.org/mbostock/3808234).
I really liked this transition for the names of d3 contributors, however, occasionally you'd see some odd artifacts caused by a name having one instance of a letter, but the new/entering name had two or more instances of the same letter. This was caused by the key function for the data looking at the letter and only the letter. I've swapped out the key function and done some mapping to give each letter a unique key (the letter, plus the occurance of the letter upto that point in the name).
for the name bob loblaw the key for each letter is as follows:
b: b~1
o: o~1
b: b~2
l: l~1
o: o~2
b: b~3
l: l~3
a: a~1
w: w~1

  
## 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',
  'Lache`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) + ")");

var oldDataLookup = {};

function update(data) {

    var newDataCounts = { };
    var newDataLookup = data.map(function (d) {
        if (newDataCounts[d] === undefined)
            newDataCounts[d] = 0;
        var occurance = ++newDataCounts[d];
        return { letter: d, key: d + "~" + occurance };
    });

    // DATA JOIN
    // Join new data with old elements, if any.
    var text = svg.selectAll("text")
        .data(newDataLookup, function(d) { return d.key; });


    oldDataLookup = newDataLookup;


  // 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.letter; })
    .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>
	<!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',
	'Lache`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) + ")");

	var oldDataLookup = {};

	function update(data) {

	var newDataCounts = { };
	var newDataLookup = data.map(function (d) {
	if (newDataCounts[d] === undefined)
	newDataCounts[d] = 0;
	var occurance = ++newDataCounts[d];
	return { letter: d, key: d + "~" + occurance };
	});

	// DATA JOIN
	// Join new data with old elements, if any.
	var text = svg.selectAll("text")
	.data(newDataLookup, function(d) { return d.key; });


	oldDataLookup = newDataLookup;


	// 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.letter; })
	.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>