mritterhoff · August 29, 2015 14:19
diff --git a/README.md b/README.md
diff --git a/index.html b/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>
diff --git a/prez.csv b/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