TimelineJS

TimelineJS is an open-source tool created by the Northwestern University Knight Lab for building interactive, media-rich timelines.

TimelineJS is very easy for beginners to learn. Users with a more technical background in CSS and JSON can also easily customize their final product.

Make sure you have a Google account before heading to Knight Lab’s TimelineJS site.

Once there, scroll about halfway down the page and click on the blue button that says Get the Spreadsheet Template; a separate tab will open, and once there, click the blue button that says Make a copy.

The Spreadsheet Template has columns A through R. Each row in the spreadsheet represents a different record in your timeline. Each column represents a different field of data related to that particular record.

Note that you should not change the column headers; remove or move any columns; or leave any blank rows. 

To change the value in any cell, simply double-click the cell you wish to change and add your data.

The only value required to make your timeline is a year (column A), but we recommend including as much information as possible for each record.

Note that no matter what value you put into column A, your timeline will display the value you put into column I. If column I is empty the timeline will show the value in column A.

TimelineJS supports a variety of audio, video, and image media types from a range of publicly accessible sources. Many of these can be included in your timeline simply by adding the link to the media file in column L. However, you are also able to include media hosted in your own Google Drive.

Images stored on Google Drive need to be public in order for them to be visible on your timeline. To make a file public:

• Right-click that file and select Share…
• In the window that pops up, click the Advanced button at the bottom-right.
• Under Who has access, click Change.
• Select On – Public on the Web and click Save on the bottom-left.
• Copy the Link to Share at the top of the window.
• Add that to the cell in column L for the appropriate record.

In order to make your timeline accessible, you’ll need to publish your Spreadsheet Template to the web. To publish your Spreadsheet Template:

• Open your Spreadsheet Template.
• From the File menu, select Publish to the web…
• Make sure your options are set so that you publish the Entire Document as a Web page.
• Press the green Publish button.
• Click OK.

You can and should preview your timeline before sharing your final project. To preview your timeline:

• Copy the URL of your Spreadsheet Template in the browser’s address bar.
• Go to Knight Lab’s TimelineJS site and paste the URL into the appropriate box under 3 Generate Your Timeline.
• Scroll down and click the Preview button to see if your timeline’s content and media are displaying properly.

Once your timeline is ready to be shared, you’ll find the link and the code for embedding under 4 Share your timeline.

When starting any timeline project, it’s a good idea to create a folder in Google Drive where you can store the Spreadsheet Template as well as any media files you’ll be including in your timeline.

When copying the Spreadsheet Template to your Google Drive, be sure to rename it something relevant to your timeline project.

Remember that when you include media from publicly accessible sources, if that media becomes inaccessible or is taken offline, it will not display properly in your timeline.

TimelineJS Introductory Video: Created by the Knight Lab team.

TimelineJS FAQ: A list of frequently asked questions curated by the Knight Lab team.

Example Timelines: A list of demo projects curated by the Knight Lab team.

DH@CC Quick Guide to TimelineJS: A Google Docs copy of this Quick Guide.