Tutorial: TimelineJS

When I was thinking about what to do for my midterm, I briefly looked at TimelineJS but decided that it did not quite fit the dataset that I wanted to use at the time. I will now revisit it and teach you (reader!) how to use it. TimelineJS was developed by the Northwestern University Knight Lab that is particularly focused on developing tools and programs for journalism purposes. They are lead by Ashir Badami, James Lee, Jeremy Gilbert, among others and have worked with a variety of professors, professional staff, and graduate students. The team is associated by Northwestern Medill (Journalism school) and the McCormick school of Engineering, thus demonstrating the project’s interdisciplinary roots. Though, today, I am focused on TimelineJS, they also have programs such as “Juxtapose” frame comparison software and “Soundcite” which is an inline audio feature. TimelineJS have a variety of interactive methods that allows both beginners and advanced users different options. In effect, the goal of TimelineJS is to provide an easy and accessible way to make simple timelines for a multitude of purposes. This is helpful for digital humanities work because a variety of disciplines benefit from timeline display methods. TimelineJS is especially easy to use and thus may be good for educational purposes and alternative class-presentation formats. The opening page looks like this:

This is a pretty simple opening design for it firstly brings the viewer straight to the actually “make a timeline” button without any other additional information. Since timelines are pretty well-known visualizations, I think this was a good choice because it increases the perceived efficiency of the program. At the same time, the “women in computer” bar is a concise way for the developers to showcase what sort of data TimelineJS was intended for.

Step 1: Click “Make a timeline”

When you click “Make a Timeline” it leads you to a list of steps quite similar to what I am doing for you right now! Click the “Get the Spreadsheet Template” button. It will then prompt you to make a copy of a spreadsheet, so click “make a copy” and then open your new spreadsheet! Do not change any of the spreadsheet titles or else the coding will not work. See below:

Step 2: Fill out Spreadsheet

Before you edit your timeline via the spreadsheet, you need to come up with a topic that can be displayed with a linear line. For the purposes of this tutorial, I chose to make a timeline of old pictures of Seattle. The example spreadsheet, that they have you copy, links everything from flicker and so I thought this would be a good plan for me too. If you want to do this as well, go to Flicker and make a free account. Then search up your chosen topic. For example, I searched “Seattle old.” I then chose the photos that had more detailed information and clearly stated the dates they were taken. Enter whatever information is available into your spreadsheet. I just did four entries today to test out the software but, depending on your project, you may want any number of images (or videos!). See my final spreadsheet below:

Step 3: Publish Spreadsheet to the Web

Following the directions from TimelineJS, on your spreadsheet go to “File” then “Share” then “publish to web.” Click “yes” when it prompt you to confirm. Under the “link” tab that pops up, copy the url that it provides (see below).

Step 4: Connect Spreadsheet to TimelineJS

Then, go back to the 4 steps page from TimelineJS and enter into step 3 “Google Spreadsheet URL” your URL (see below). They provide many options so, depending on your project, click whatever works best for you. It was sort of confusing at first because there is no “generate” button in their #3. However, see Step 5.

Step 5: Preview Timeline

Scroll down to TimelineJS’s step 4 and click the blue “preview” button before you click anything else. Right below, it will generate a preview of your timeline. If everything has worked, copy the “Embed” code to finally share your project!! You can also just directly link your timeline with the “Share Link” URL. If something in the preview does not look correct, go back to your spreadsheet and edit your entries. You may have to troubleshoot and, if so, go look at the helpful pages that TimelineJS provides. These have helped me.

My Final Embedded Timeline of Seattle Photos!!

Further Resources

1. Supported media types Timeline JS instructions
2. JSON data format reference — for those who might be more advanced.