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;
  this.page = parseInt(value.getAttribute("page"), 10);
};
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();
      window.location.hash = current.page;
    } else if([37, 8].indexOf(e.keyCode) > -1) {
      prev();
      window.location.hash = current.page;
    }
  }
};

var parseHash = function(n) {
  return parseInt(window.location.hash.replace(/#/,""), 10)
}

// sets current by side effect
var go = function(){
  elems = [].slice.call(document.getElementsByTagName("div"));
  elems.forEach(function(el, idx) {
    el.setAttribute("page", idx + 1);
    list.push(el); 
  });
  current = list.head;

  if (window.location.hash && parseHash(window.location.hash) > 1) {
    for (var i = 1; i < parseHash(window.location.hash); i++) {
      next();
    }
  } else {
    show(current.value);
  }

  document.addEventListener("keydown", keyPress, false);
  //document.addEventListener("click", next, false);
};

document.addEventListener("DOMContentLoaded", go, false);

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;
}

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>