Three Open Source Timeline Tools And Thoughts On The Future Of News Timelines


By Lauren Rabaino

We’ve long-touted Dipity as a great tool for making timelines, but the days of free, online tools are quickly being replaced by an era of free open-source tools.  While Dipity is still great if you want an easy-to-use interface and are willing to shell out $50/month for unlimited use, open source timelines give you ultimate control and ownership of your content.

1. ProPublica’s Timeline Setter

Timeline Setter is by far my favorite of the open-source toosl because it’s easy to use and was created with a news organization in mind (read previous 10,000 Words coverage about Timeline Setter here). From the site’s description:

It is a command-line utility that takes a specially-structured CSV file as input and outputs standards-compliant HTML/CSS/JavaScript. It supports any span of time from minutes to years, and supports multiple parallel event series in a single timeline. It can handle custom descriptions and even arbitrary HTML in each event “card.” It creates fluid embeds that will look great at any width.

The CSV structure that powers the data for the timeline is relatively straight-forward. You have a column for the date, the title and the description, then an HTML field to input photos or video. If you’ve never used a Ruby package before or worked in command line, students at CUNY have put together a dead simple video tutorial to show you the way (part I embedded below; see part II on YouTube):

Customizing the look of the timeline means tweaking a little CSS, although the default styles from ProPublica are slick and professional.

Here are some examples of news organizations using Timeline Setter:

LA Times

Chicago Tribune


2. Similie Timeline

Simlie Timeline is one of the older open-source options out there. I personally don’t think it’s as clean as Timeline Setter (or as easy to create), but I do like that all the key information is visible upon first load of the timeline, whereas Timeline Setter’s default layout requires users to navigate through various points, seeing only one item at a time.  The Dallas Morning News used this timeline on its JFK page:

Download the code for SIMILE Timeline here.

3. Timeglider

If you’re looking for a jQuery option for creating timelines, you might want to consider Timeglider. From the project’s page:

The timeline can be zoomed by dragging the vertical slider at right: up for zooming in (less time shown) and down for zooming out (more time shown). The mousewheel also works as a zoom controller. Any white area on the “stage” of the timeline can be dragged left and right, as can the blue “ruler” which marks out different units of time. Clicking on an event brings up a small modal window with a description and links if any are provided in the data.

This timeline was designed to work on tablets and other touch-enabled devices. I couldn’t find any examples of a news organization using this tool.

Don’t want to code? There’s always Vuvox.

There are other free options out there for creating a timeline if you have no coding experience or technical resources at your disposal. I mentioned Dipity at the beginning of this post. If you use a free account, you’re limited to only three timelines, which isn’t sustainable for a news organization. If you want to shell out $5/month, you get five timelines, which still isn’t very reasonable.

Vuvuox is another oldie-but-goodie drag ‘n drop tool for creating panorama-style sliders. Although not natively a timleine tool, it can easily be adapted to create timeline-like displays for information. As far as I can tell, Vuvox is still free with the ability to create an unlimited number of projects. It’s not fully-customizable, but you can work around its limitations by uploading custom images. See an example of a timeline I created for CoPress below.

We still have a long way to go with timelines

With the exception of Vuvox, which wasn’t even meant for timelines, all of the more traditional options listed above are really rather boring in terms of the way people share and consume content. The idea of a timeline that is literally a line with a few points on it is, frankly, boring. I really love what The University of Washington put together on its 150th Anniversary: A timeline of memories over the span of 15 decades.

This isn’t your standard left-to-right, click-to-see-points-in-time kind of timeline. It scrolls vertically, displaying tiles with images. On the left side, users can choose to filter by theme or department. The implementation is beautiful and shareable — a format I would love to see a news organization take on.  Of course, this timeline probably took a lot of time by a third-party design vendor (not ideal for a newsroom on a deadline), but investing the time to build one initially could pay off for resusability in the future.

HTML5 also poses many options for creating beautiful, useable, shareable timelines. If you look at marketing content like Nike’s Better World site shows how a narrative can be told through a unique, modern display.

What are the best timelines you’ve seen? Discuss in the comments.