I was looking at a timeline on KPCC.org (Public Radio’s website here in Southern California) and got to wondering how they could quickly put together a timeline with a simple graphical interface, with images and links. My first thought was maybe they have a custom built module in there CMS that handles this, or maybe they are hand coding the whole thing on the fly, or maybe… but really this can’t be rocket science.
In most cases I only look for a solution when I have a problem. I’ve never had a need to build a timeline on the fly, so I’ve never much looked at what was already out regarding developing interactive timelines. But in this case my curiosity got the best of me and I had to look under the hood.
What I found was that essentially KPCC is using three scripts:
Now what’s cool is that all these timelines are being generated from Google Spreadsheets (WTF, so super easy). Basically here’s what being done :
- They are creating a Google Spreadsheet using unique column titles, and storing each set of data in a row. Pretty simple concept.
- Then using Tabletop.js they are taking the URL of the Google Spreadsheet and making it accessible through Javascript.
- What is generated from Tabletop.js is readable by Handlebars, which basically is the simplest of templating.
- Then they use Timeline to create a vertical timeline which utilizes Isotope (another cool script) and bam you got yourself a timeline on the fly!
Outside of the timeline I could potentially see the mass benefits of using Handlebars and Tabletop, ie putting together a simple prototype of a database driven site before investing the time and money into the real thing, and so on and so on.