Making Timelines

NICAR 2013 - Krista & Lena


So many cool examples!

express an opinion take on new shapes track characters and emotion show interaction express an abstract concept show evolution and change show everything ever ever ever since the beginning of humankind show the near and the far

How can timelines help us tell our stories?

They can clearly show how your story unfolds event by event.

The New York Times did this with the 9/11 audio tapes. Their presentation included a vertical timeline on the left that is synced with audio files, an accompanying transcript and a map showing the planes' flight paths on the right.

California Watch used a timeline to explain how its investigation into structural problems in California public schools unfolded. The timeline is horizontal, with multimedia and a constantly updating document counter.

Timelines can orient readers in time by linking up events in your story with more well-known events.

For ProPublica's investigation into Memorial Medical Center after Hurricane Katrina, they paired events that received a lot of news coverage in Katrina's aftermath with the tick-tock of events unfolding inside Memorial Medical Center.

ProPublica also did this when the Susan G. Komen for the Cure charity cut its funding to Planned Parenthood and then reinstated it days later. ProPublica matched up what the charity said publicly and what actually happened.

Timelines can provide readers with a history of the story's subject, a sort of roadmap of how we got here.

For ProPublica's investigation into presidential pardons, they paired notable pardons with a chart showing pardons granted per year.

Timelines can show trends.

During the Arab Spring, the Guardian and the Wall Street Journal both released timelines of the protests. The Guardian chose a vertical timeline -- a sweeping timeline that showed the momentum of events -- divided by country and categorized by type of action, i.e. government response, regime change, related to the protests. The Wall Street Journal chose a horizontal timeline of multiple country-specific horizontal timelines with tick marks that synced with a map and explainer text. In a glance, the bottom portion of the interactive shows when protest activity was at its highest.


TimelineJS takes a more slideshow approach to timelines. It's got a navigation element on the bottom, and room for large photos and big quotes. You can embed pretty much whatever you want: videos, Flickr photos, tweets, etc. Here's a sample of what TimelineJS looks like

And a couple more:

All you need to start with Timeline JS is a Google Spreadsheet. Here's the TimelineJS Google Spreadsheet template, and here's an example:

Just make sure you "Publish to the Web" like it says on the TimelineJS site:

Then stick the url to your own Goodle Spreadsheet (find it by going to File > Publish to the Web, and copying the link at the bottom) into the site's own embed code generator, and you can preview your timeline right there, and adjust accordingly.

If you want a little more control, you can follow the directions on the TimelineJS GitHub page and paste this embed code right into your page. Here you can set the same options (like height, width, font, etc) as well as link to your own styles or additional javascript files.

Vertical Timeline

WNYC's Vertical Timeline uses a more Facebook style approach to show events over time. Here's an example:

And another one: Pedro Espada's Long Dance with the Law

All you need is a Google spreadsheet, formatted like this:

Here's WNYC's Google Spreadsheet template.

You'll need to include several javascript files in your page for the timeline to work. You can download them all from the Vertical Timeline GitHub page. To link your own Google spreadsheet to the timeline, all you do is paste the key to your spreadsheet at the beginning your script.js file. You can get that key by going to File > Publish to the Web, copying the part between the key= and & from the link at the bottom.

Vertical Timeline uses a couple of handy libraries including Tabletop.js to hook up your Google Spreadsheet, Handlebars.js for templating, and Isotope.js to filter or sort the events (and get those very cool transitions). Here's an example of what the code looks like for the sample timeline we pictured above:


ProPublica's TimelineSetter takes a slideshow approach with a navigation bar on top to show the series of events in the timeline at a glance and "cards" below that can be customized to include multiple sources of media, including photos, slideshows of photos, videos, maps, document embeds, etc. It can also handle multiple parallel event series on the same timeline. Here's an example:

And a couple more:

To get started, organize your timeline's events according to the following example spreadsheet with headers for date, display_date, description, link, series and html.

Save the spreadsheet as a .csv file. And then run the following line of code in your terminal, inserting the path to your .csv file after -c and the path to where you want the timeline and assets to be outputted to after -o.

timeline-setter -c /path/to/data.csv -o /path/to/output/directory

for example, here's what it would look like if you put a csv file into a a folder on your Desktop:

 timeline-setter -c /Users/lgroeger/Desktop/timeline_test/timeline_data.csv -o /Users/lgroeger/Desktop/timeline_test/

And voila! Your timeline is ready to be embedded. For more ways to customize the appearance of your timeline, check out ProPublica's Github write-up.

If you want to make a TimelineSetter timeline with some sample data, you can download the csv file that we used for a timeline on the widespread use of animal antibiotics and the FDA's lack of regulation.

Once you download the file, put it into a folder and then run the above command, substituting your own path for the one given. A bunch of new files should be generated right into that folder, including one called timeline.html. Open that up in a browser, and you should see the FDA timeline.

If you want, you can download a sample folder with all the finished files of a TimelineSetter timeline, to see what you should end up with.

Feel free to play around with the styles, substitute your own photos or videos or anything else. Have fun!

Get in Touch

We're here to help as much as we can in your timeline-making endeavors.

@kkjschmidt & @lenagroeger