Using TimelineJS and a GoogleDoc spreadsheet to create a responsive timeline

TimelineJS creates responsive timelines based on GoogleDoc spreadsheet.

ODDI works with journalists broadcasting in over 60 languages around the world. One of the challenges the UX studio is focusing on this year is how to help busy journalists create more interactive content. We want to identify existing tools (or create new ones) that will enable journalists to quickly and easily tell stories in new ways, while ensuring that the content is accessible across devices.

For our first project, we collaborated with the Vietnamese language service at Radio Free Asia to create a timeline of online dissidents in Vietnam who have been jailed.

After exploring various timeline tools, we settled on TimelineJS.

TimelineJS is a free, open source tool developed by Zach Wise and The Knight News Innovation Lab that enables journalists to make responsive timelines that work well on a desktop screen or mobile device.


How It Works

In its most basic form, the timelines can be created with a GoogleDoc Spreadsheet, so they’re easy to update, make corrections and expand in the future. And, because they’re based on a GoogleDoc, multiple journalists can collaborate simultaneously to create a timeline on a deadline.

Each timeline can include a variety of media. Journalists can use photos, maps, videos, audio files, tweets and wikipedia articles to help tell the story.

TimelineJS currently supports more than 30 languages. And if a language isn’t supported, it’s relatively easy to add it by creating a language file that translates the months, days of the week and navigation.

Building a Timeline

Creating a timeline is easy. Simply grab a copy of the timeline template and fill in the information.

GoogleDoc spreadsheet for a timeline about Aung San Suu Kyi

Each row represents a new date in the timeline. Begin by creating a start date for the event. Write a headline and short text description.

The media column is your opportunity to include multimedia content. Simply insert the link to an image, Google map, unique tweet, Wikipedia article, SoundCloud file or YouTube link. TimelineJS will process the link and incorporate the content directly in the timeline.

Flickr, GoogleMaps, YouTube, Vimeo, SoundCloud, Twitter and Wikipedia icons

If you’re linking to an image, you should be hosting it or linking to it from your Flickr account so that you can control the file size and quality of the image (and to avoid this).

When you’re ready to see your timeline, go to the File menu and select “Publish to the Web.” Check the box next to “Automatically republish when changes are made” and click “start publishing.” This will give you the spreadsheet URL to insert into TimelineJS. Copy the link and paste it into the embed generator.

You now have several options for customizing your timeline—changing the language for the navigation, choosing a map style and selecting the fonts.

Timeline Tips and Inspiration

Here are some basic suggestions for working with TimelineJS:

  • Vary the pacing using different types of media. Decide whether a map, image, video or tweet will best tell the story for that specific date.
  • Keep the headlines and text short but descriptive. Remember that you can link to additional content to enable readers to dig deeper.
  • It’s easy to add to the timeline and collaborate with others. Think about setting up a timeline with a handful of points to start with and then building on it as the story evolves.
  • You can customize the look and feel of the timeline by tweaking the CSS.

In addition, Zach Wise suggests that you “pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.”

Remember that there are lots of different ways to use a timeline to help tell a story:

Spreading the Word

Before we met with RFA, there were already a few journalists in the language services who had used TimelineJS. Our goal is to democratize the process so that there aren’t just one or two timeline ‘experts’. We want to have entire newsrooms of journalists who are comfortable creating interactive content.

To help us accomplish our goal, we created a short tutorial video and we’re hosting a series of brown bag sessions to introduce TimelineJS to more journalists throughout VOA, RFA, RFE/RL, MBN and OCB.

Update: April 16, 2013

We reached out to Chris Spurlock, Graphics Editor at the Huffington Post, to find out how he used TimelineJS to follow the breaking news of twin explosions at the Boston Marathon.

Huffington Post timeline of the explosions at the Boston Marathon

ODDI: When did you start working on the timeline and how did you set it up?
Spurlock: As soon as I got word of the blast and how serious it appeared to be, I immediately set up the HTML for the timeline, which I did by simply cloning our Newtown page. Next I made a copy of our Newtown Google Spreadsheet and shared it with the reporter I was working with. Lastly, I copy-pasted the new Google Docs link into the HTML file and got the timeline live online.

ODDI: How did you collaborate on creating the timeline?
Spurlock: From there, the reporter and I started working on filling in the sheet. I started with the events from earlier in the day (race start, winners, etc.) and she started from the present moment and worked backward until we met in the middle.

After we had it decently flushed out and fact-checked we put it up on the site and continued to add to it (and are still adding as of now). We had a reporter from Sports offer to grab and add AP photos for us, and later we passed it off to the NewsDesk for the evening.

ODDI: What’s your favorite part about working with TimelineJS?
Spurlock: What I love is that all you have to do is share the Doc and an infinite number of people can collaborate and add info. The only tricky part is making sure you don’t paste over something someone has just entered. You also have to be careful of typos and other errors, because as soon as something is added, it goes live.

ODDI: How long did it take you to post the timeline?
Spurlock: I think I started the timeline about 30 minutes after the first bomb, and it was up on the site in less than an hour after that.

ODDI: How’ve you used TimelineJS to tell stories?
Spurlock: We’ve used the tool for big breaking news events like the Aurora and Newtown shootings, but also for other stories, both serious and not.

- – - – -

What are your thoughts on TimelineJS? What tools do you think more journalists could use to produce interactive content? Post in the comments section below or tweet us @BBGinnovate.

- – - – -

Thank you to April Deibert and Chris Spurlock for their contributions to this article.

(The foregoing commentary does not constitute endorsement by the US Government, the Broadcasting Board of Governors, VOA, MBN, OCB, RFA, or RFE/RL of the information products or services discussed.)

The following two tabs change content below.
Brian Williamson

Brian Williamson

Brian Williamson is the senior UX designer for the Office of Digital & Design Innovation. Follow him on Twitter: @drawinghands.

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *