I found the wonderful Data for Radicals site, that has a rich set of illustrated tutorials on making interactive visualizations. Since I’ve been collecting timeline-creators, here’s another example — but this time, it’s a Vertical Timeline. A clip of the tutorial is below, go to this link to see the full thing!
The Absurdly Illustrated Guide To Your First Dynamic, Data Driven Timeline
…
Timeline, like Tabletop.js, is a creation of Balance Media and the brainchild of WNYC’s John Keefe (here’s John talking about the thinking behind the vertical timeline). In print, most of us are used to seeing timelines presented horizontally, but that’s probably not an ideal format for the up-and-down scrolling that web browsers encourage.
Putting together a Timeline.js timeline is easy — I was able to do it on my first try in under an hour. Let me show you how:
1. Download Timeline.js from Github. (Remember, you can view any image on this blog full size by clicking on it. I leave helpful annotations on the images, so if you can’t read ‘em, click ‘em!)
2. Unzip Timeline-Master.zip. Inside you will find three files: css, img, and js, and a number of assorted files.
3. Open index.html in a browser. If you click on index.html to open it in a browser, you will see an example timeline. The data displayed on a Timeline.js timeline is kept in a Google spreadsheet. Here’s the example spreadsheet that index.html is linked to:
