mritterhoff/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Inspired by (and code lifted from) mbostock's General Update Pattern III. This example looks very similar, but is a bit more complex in that it will work well with arbirtary strings, rather than those that are garenteed to have unique characters, like the example I worked off of. This is accomplished by determining the incidence of each character, as it appeared, and then using that incidence and character to be returned in a key function. This insured that characters didn't try to go the same spot, as the result of my first naive attempt.
Check out out the live example at bl.ocks

  
## 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 width = 960,
    height = 500,
	names,
	i=0;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(32," + (height / 2) + ")");

	d3.csv("prez.csv",
    function(data, error) {
      callbackError = error;
      callbackData = data;
      doStuff(data);
  });

	var letterSeperation = 35;
	var transitionTime = 750;
	var timeBetweenNames = 1500;

function doStuff(data) {
	names = data;

	function update(data) {
	  // data becomes an array of letters/spaces
	  data = data.Prez.split("");

	  // this should go in a function
	  var tempData = [];
	  var letterCount = {};
	  data.forEach(function(letter) {
  		var count = letterCount[letter];
  		if (count === undefined) {
  			count = 0;
  		}
  		tempData.push({letter: letter, incidence: count});
  		letterCount[letter] = count + 1;
	  });
	  data = tempData;
	  //console.log(JSON.stringify(data, null, 2));

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

	  // UPDATE
	  // Update old elements as needed.
	  text.attr("class", "update")
	  .attr("y", 0) // fixes any incomplete transitions hopefully
		.transition()
		  .duration(transitionTime)
		  .attr("x", function(d, i) { return i * letterSeperation; });

	  // 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 * letterSeperation; })
		  .style("fill-opacity", 0)
		  .text(function(d) { return d.letter; })
		.transition()
		  .duration(transitionTime)
		  .attr("y", 0)
		  .style("fill-opacity", 1);

	  // EXIT
	  // Remove old elements as needed.
	  text.exit()
		  .attr("class", "exit")
		.transition()
		  .duration(transitionTime)
		  .attr("y", 60)
		  .style("fill-opacity", 0)
		  .remove();
	}

	// The initial display.
	update(names[randomIndex(names.length)]);

	// Grab a random sample of letters from the alphabet, in alphabetical order.
	setInterval(function() {
	  //update(shuffle(alphabet)
		//  .slice(0, Math.floor(Math.random() * 26))
		 // .sort());
		update(names[randomIndex(names.length)]);
	}, timeBetweenNames);


	function randomIndex(array) {
		return Math.floor(Math.random()*names.length);
	}
}

</script>

## prez.csv
Prez
George Washington
John Adams
Thomas Jefferson
James Madison
James Monroe
John Quincy Adams
Andrew Jackson
Martin Van Buren
William Henry Harrison
John Tyler
James Knox Polk
Zachary Taylor
Millard Fillmore
Franklin Pierce
James Buchanan
Abraham Lincoln
Andrew Johnson
Ulysses S. Grant
Rutherford Birchard Hayes
James Abram Garfield
Chester Alan Arthur
Grover Cleveland
Benjamin Harrison
Grover Cleveland
William McKinley
Theodore Roosevelt
William Howard Taft
Woodrow Wilson
Warren Gamaliel Harding
Calvin Coolidge
Herbert Clark Hoover
Franklin Delano Roosevelt
Harry S. Truman
Dwight David Eisenhower
John Fitzgerald Kennedy
Lyndon Baines Johnson
Richard Milhous Nixon
Gerald Rudolph Ford
James Earl Carter
Ronald Wilson Reagan
George Herbert Walker Bush
William Jefferson Clinton
George Walker Bush
Barack Hussein Obama
	<!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 width = 960,
	height = 500,
	names,
	i=0;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(32," + (height / 2) + ")");

	d3.csv("prez.csv",
	function(data, error) {
	callbackError = error;
	callbackData = data;
	doStuff(data);
	});

	var letterSeperation = 35;
	var transitionTime = 750;
	var timeBetweenNames = 1500;

	function doStuff(data) {
	names = data;

	function update(data) {
	// data becomes an array of letters/spaces
	data = data.Prez.split("");

	// this should go in a function
	var tempData = [];
	var letterCount = {};
	data.forEach(function(letter) {
	var count = letterCount[letter];
	if (count === undefined) {
	count = 0;
	}
	tempData.push({letter: letter, incidence: count});
	letterCount[letter] = count + 1;
	});
	data = tempData;
	//console.log(JSON.stringify(data, null, 2));

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

	// UPDATE
	// Update old elements as needed.
	text.attr("class", "update")
	.attr("y", 0) // fixes any incomplete transitions hopefully
	.transition()
	.duration(transitionTime)
	.attr("x", function(d, i) { return i * letterSeperation; });

	// 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 * letterSeperation; })
	.style("fill-opacity", 0)
	.text(function(d) { return d.letter; })
	.transition()
	.duration(transitionTime)
	.attr("y", 0)
	.style("fill-opacity", 1);

	// EXIT
	// Remove old elements as needed.
	text.exit()
	.attr("class", "exit")
	.transition()
	.duration(transitionTime)
	.attr("y", 60)
	.style("fill-opacity", 0)
	.remove();
	}

	// The initial display.
	update(names[randomIndex(names.length)]);

	// Grab a random sample of letters from the alphabet, in alphabetical order.
	setInterval(function() {
	//update(shuffle(alphabet)
	// .slice(0, Math.floor(Math.random() * 26))
	// .sort());
	update(names[randomIndex(names.length)]);
	}, timeBetweenNames);


	function randomIndex(array) {
	return Math.floor(Math.random()*names.length);
	}
	}

	</script>
	Prez
	George Washington
	John Adams
	Thomas Jefferson
	James Madison
	James Monroe
	John Quincy Adams
	Andrew Jackson
	Martin Van Buren
	William Henry Harrison
	John Tyler
	James Knox Polk
	Zachary Taylor
	Millard Fillmore
	Franklin Pierce
	James Buchanan
	Abraham Lincoln
	Andrew Johnson
	Ulysses S. Grant
	Rutherford Birchard Hayes
	James Abram Garfield
	Chester Alan Arthur
	Grover Cleveland
	Benjamin Harrison
	Grover Cleveland
	William McKinley
	Theodore Roosevelt
	William Howard Taft
	Woodrow Wilson
	Warren Gamaliel Harding
	Calvin Coolidge
	Herbert Clark Hoover
	Franklin Delano Roosevelt
	Harry S. Truman
	Dwight David Eisenhower
	John Fitzgerald Kennedy
	Lyndon Baines Johnson
	Richard Milhous Nixon
	Gerald Rudolph Ford
	James Earl Carter
	Ronald Wilson Reagan
	George Herbert Walker Bush
	William Jefferson Clinton
	George Walker Bush
	Barack Hussein Obama