Building an Interactive Timeline with TimelineJS

For this assignment I used TimelineJS, a free tool from Knight Lab that turns a simple Google Sheet into an interactive, scrollable timeline. It’s especially useful for Digital Arts & Humanities projects because it lets you combine dates, text, and media (photos, videos, links) into a narrative that readers can click through. Instead of just listing events like the Marco Polo Bridge Incident in a paragraph, TimelineJS lets viewers move along the dates, see images from the time, and follow the story as it unfolds.

Step 1: Go to the TimelineJS site

First, I went to the TimelineJS homepage. On the front page there’s a big green button that says “Make a Timeline” under the “Easy-to-make, beautiful timelines” heading.

Clicking that button takes you to the main instructions page with the numbered steps for building a timeline.

Step 2: Copy the Google Sheets template

On the “Make a Timeline” page, Step 1 tells you to “Create your spreadsheet.” I clicked the blue “Get the Spreadsheet Template” button. This opened a sample Google Sheet.

I then chose File → Make a copy to save the template into my own Google Drive so I could edit it without changing the original.

Step 3: Fill in the timeline data

In my copy of the sheet, I started entering my events. For each row, I added:

• Year, Month, Day (for example, 1937 / 7 / 27)
• A Headline (e.g. Marco Polo Bridge Incident)
• A longer Text description of what happened
• A Media URL linking to an image from the Carleton digital collection
• Optional fields like Media Credit and Media Caption

Each row becomes one slide on the final timeline, so I used a separate row for each event I wanted to include.

Step 4: Publish the sheet to the web

Once I had a few events entered, I had to make the sheet accessible to TimelineJS. In Google Sheets, I clicked File → Share → Publish to web. In the window that popped up, I kept the default setting “Entire document” and “Web page”, then clicked Publish. Google then gave me a long public URL for the sheet, which I copied.

Step 5: Generate the timeline on TimelineJS

Back on the TimelineJS “Make a Timeline” page, I scrolled to Step 3: “Generate your timeline. In the box labeled “Google Spreadsheet URL”, I pasted the link I had just copied from the Publish to web window. I kept the default Width = 100% and Height = 650 so it would fit nicely on a webpage. There are optional settings below (language, fonts, starting slide, zoom level), but I left most of them at their defaults for now. Then I clicked the “Preview” button to make sure my events and images were showing up correctly.

Example Timeline

Here is the link.

Further Resources

If you want to explore TimelineJS more, these resources are helpful:

• Official TimelineJS site (overview, examples, and the template)
• Knight Lab’s detailed guide to making a timeline from a Google Spreadsheet