thejefflarson · November 15, 2011 16:42
diff --git a/slides.js b/slides.js
 var extend = function(obj){
  var others = [].slice.call(arguments,1);
  others.forEach(function(other){
    for(var j in other) obj[j] = other[j];
  });
  return obj;
 }

 var Node = function(value){
  this.value = value;
  this.next = null;
  this.prev = null;
 };
 Node.prototype = extend(Node.prototype, {});

 var List = function(){
  this.length = 0;
 };
 List.prototype = extend(List.prototype, {
  push : function(value) {
    var node = new Node(value);

    if(!(this.head || this.tail)){
      this.head = this.tail = node;
      this.head.next = this.head.prev = this.head;
    } else {
      node.prev = this.tail;
      this.tail.next = node;
      this.tail = node;
      this.tail.next = this.head;
      this.head.prev = this.tail;
    }

    this.length++;
  }
 });

 var list = new List();
 var current = null;
 var elems = [];

 var show = function(node) { node.style.display = "block"; };
 var hide = function(node) { node.style.display = "none"; };
 // sets current by side effect
 var next = function(){
  elems.forEach(hide);
  current = current.next;
  show(current.value);
 };
 // sets current by side effect
 var prev = function(){
  elems.forEach(hide);
  current = current.prev;
  show(current.value);
 };

 var keyPress = function(e){
  if(current){
    if([32, 39].indexOf(e.keyCode) > -1) {
      next();
    } else if([37, 8].indexOf(e.keyCode) > -1) {
      prev();
    }
  }
 };


 // sets current by side effect
 var go = function(){
  elems = [].slice.call(document.getElementsByTagName("div"));
  elems.forEach(function(el) { list.push(el); });
  current = list.head;
  show(current.value);
  document.addEventListener("keydown", keyPress, false);
 };

 document.addEventListener("DOMContentLoaded", go, false);
diff --git a/styles.css b/styles.css
 /* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section, summary,
 time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
  display: block;
 }
 body {
  line-height: 1;
 }
 ol, ul {
  list-style: none;
 }
 blockquote, q {
  quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
  content: '';
  content: none;
 }

 /* remember to define visible focus styles!
 :focus {
  outline: ?????;
 } */

 /* remember to highlight inserts somehow! */
 ins {
  text-decoration: none;
 }
 del {
  text-decoration: line-through;
 }

 table {
  border-collapse: collapse;
  border-spacing: 0;
 }

 div {
  display:none;
  width:100%;
  height:100%;
  text-align:center;
 }

 body {
  background-color: papayaWhip;
  color: #3d3535;
  font-family:"Helvetica";
  padding:75px;
 }

 h2{
  letter-spacing: -5px;
  font-size:150px;
  font-weight: bold;
  margin-bottom: 0.15em;
 }

 img, pre {
  margin-left: auto;
  margin-right: auto;
 }

 a {
  text-decoration: none;
  color: #2F2F65;
 }

 em {
  color: #b01e1f;
 }

 b {
  color: #24a51c;
 }

 .maps li {
  position:relative;
  margin-top: -190px;
 }

 .maps li p {
  font-size: 40px;
  font-weight: bold;
 }

 .maps li.first{
  margin:0;
 }

 .iso {
  -webkit-transform: rotate(-45deg) skew(20deg, 20deg);
 }

 .maps li img {
  border:1px solid black;
  background-color: white;
  opacity: 0.75;
  width: 256px;
  height: 256px;
 }

 pre {
  text-align: left;
  font-family: "Monaco";
  font-weight:normal;
  font-size:14px;
  letter-spacing: 0px;
  line-height:16px;
  width: 40em;
 }
diff --git a/telling-stories.html b/telling-stories.html
 <html>
 <head>
 <title>Telling Stories</title>
 </head>
 <link rel="stylesheet" type="text/css" href="styles.css">
 <script type="text/javascript" src="slides.js"></script>
 <body>

 <div>
  <h2>Tell me a story</h2>
 </div>

 <div>
  <h2>Predicting the Future</h2>
  <small><a href="http://projects.propublica.org/unemployment/states/MD" target="_blank">unemployment</a></small>
 </div>

 <div>
  <h2>Tracking Progress</h2>
  <small><a href="http://projects.propublica.org/stimulus-speed-chart/" target="_blank">speed chart</a></small>
 </div>

 <div>
  <h2>Showing Changes</h2>
  <small><a href="http://hcr.propublica.org/document/show/1.html" target="_blank">doc differ</a></small>
 </div>

 <div>
  <h2>Opening Data</h2>
  <small><a href="http://projects.propublica.org/docdollars/" target="_blank">dollars for docs</a></small>
 </div>

 <div>
  <h2>Public Service</h2>
  <small><a href="http://projects.propublica.org/dialysis" target="_blank">dialysis</a></small>
 </div>

 <div>
  <h2>Data tells the story</h2>
  <small><a href="http://projects.propublica.org/schools/schools/362058002877" target="_blank">schools</a></small>
 </div>

 <div>
  <h2>To ask for a map is to say, "Tell me a story."</h2>
 </div>

 <div>
  <h2>Near and Far</h2>
  <small><a href="http://projects.propublica.org/drywall/" target="_blank">drywall</a></small>
 </div>

 <div>
  <h2>Simple Sentences</h2>
  <small><a href="http://projects.propublica.org/redistricting-maps/protect-your-vote" target="_blank">map</a></small>
 </div>

 <div>
  <h2>Thanks</h2>
 </div>

 </body>
 </html>
	var extend = function(obj){
	var others = [].slice.call(arguments,1);
	others.forEach(function(other){
	for(var j in other) obj[j] = other[j];
	});
	return obj;
	}

	var Node = function(value){
	this.value = value;
	this.next = null;
	this.prev = null;
	};
	Node.prototype = extend(Node.prototype, {});

	var List = function(){
	this.length = 0;
	};
	List.prototype = extend(List.prototype, {
	push : function(value) {
	var node = new Node(value);

	if(!(this.head \|\| this.tail)){
	this.head = this.tail = node;
	this.head.next = this.head.prev = this.head;
	} else {
	node.prev = this.tail;
	this.tail.next = node;
	this.tail = node;
	this.tail.next = this.head;
	this.head.prev = this.tail;
	}

	this.length++;
	}
	});

	var list = new List();
	var current = null;
	var elems = [];

	var show = function(node) { node.style.display = "block"; };
	var hide = function(node) { node.style.display = "none"; };
	// sets current by side effect
	var next = function(){
	elems.forEach(hide);
	current = current.next;
	show(current.value);
	};
	// sets current by side effect
	var prev = function(){
	elems.forEach(hide);
	current = current.prev;
	show(current.value);
	};

	var keyPress = function(e){
	if(current){
	if([32, 39].indexOf(e.keyCode) > -1) {
	next();
	} else if([37, 8].indexOf(e.keyCode) > -1) {
	prev();
	}
	}
	};


	// sets current by side effect
	var go = function(){
	elems = [].slice.call(document.getElementsByTagName("div"));
	elems.forEach(function(el) { list.push(el); });
	current = list.head;
	show(current.value);
	document.addEventListener("keydown", keyPress, false);
	};

	document.addEventListener("DOMContentLoaded", go, false);
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0b1 \| 201101
	NOTE: WORK IN PROGRESS
	USE WITH CAUTION AND TEST WITH ABANDON */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}

	/* remember to define visible focus styles!
	:focus {
	outline: ?????;
	} */

	/* remember to highlight inserts somehow! */
	ins {
	text-decoration: none;
	}
	del {
	text-decoration: line-through;
	}

	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	div {
	display:none;
	width:100%;
	height:100%;
	text-align:center;
	}

	body {
	background-color: papayaWhip;
	color: #3d3535;
	font-family:"Helvetica";
	padding:75px;
	}

	h2{
	letter-spacing: -5px;
	font-size:150px;
	font-weight: bold;
	margin-bottom: 0.15em;
	}

	img, pre {
	margin-left: auto;
	margin-right: auto;
	}

	a {
	text-decoration: none;
	color: #2F2F65;
	}

	em {
	color: #b01e1f;
	}

	b {
	color: #24a51c;
	}

	.maps li {
	position:relative;
	margin-top: -190px;
	}

	.maps li p {
	font-size: 40px;
	font-weight: bold;
	}

	.maps li.first{
	margin:0;
	}

	.iso {
	-webkit-transform: rotate(-45deg) skew(20deg, 20deg);
	}

	.maps li img {
	border:1px solid black;
	background-color: white;
	opacity: 0.75;
	width: 256px;
	height: 256px;
	}

	pre {
	text-align: left;
	font-family: "Monaco";
	font-weight:normal;
	font-size:14px;
	letter-spacing: 0px;
	line-height:16px;
	width: 40em;
	}
	<html>
	<head>
	<title>Telling Stories</title>
	</head>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script type="text/javascript" src="slides.js"></script>
	<body>

	<div>
	<h2>Tell me a story</h2>
	</div>

	<div>
	<h2>Predicting the Future</h2>
	<small><a href="http://projects.propublica.org/unemployment/states/MD" target="_blank">unemployment</a></small>
	</div>

	<div>
	<h2>Tracking Progress</h2>
	<small><a href="http://projects.propublica.org/stimulus-speed-chart/" target="_blank">speed chart</a></small>
	</div>

	<div>
	<h2>Showing Changes</h2>
	<small><a href="http://hcr.propublica.org/document/show/1.html" target="_blank">doc differ</a></small>
	</div>

	<div>
	<h2>Opening Data</h2>
	<small><a href="http://projects.propublica.org/docdollars/" target="_blank">dollars for docs</a></small>
	</div>

	<div>
	<h2>Public Service</h2>
	<small><a href="http://projects.propublica.org/dialysis" target="_blank">dialysis</a></small>
	</div>

	<div>
	<h2>Data tells the story</h2>
	<small><a href="http://projects.propublica.org/schools/schools/362058002877" target="_blank">schools</a></small>
	</div>

	<div>
	<h2>To ask for a map is to say, "Tell me a story."</h2>
	</div>

	<div>
	<h2>Near and Far</h2>
	<small><a href="http://projects.propublica.org/drywall/" target="_blank">drywall</a></small>
	</div>

	<div>
	<h2>Simple Sentences</h2>
	<small><a href="http://projects.propublica.org/redistricting-maps/protect-your-vote" target="_blank">map</a></small>
	</div>

	<div>
	<h2>Thanks</h2>
	</div>

	</body>
	</html>