Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

The U.S. in Global Perspective (HIST 1300): Timeline JS

Introduction to Timeline JS

TimelineJS allows you to create a visually attractive timeline that may incorporate a variety of media. Created by the Knight Lab at Northwestern University, the tool is primarily intended for journalists but can be used in many disciplines and is particularly useful for digital humanities projects. (quoted from here)

Enter data into Google Sheets and generate an interactive timeline

Key Features

  • Headline
  • Text
  • Dates
  • Tag
  • Media
  • Media Caption
  • Media Credit

In-Class Example (together)

Let's develop a timeline showcasing three epidemics in the 21st century.

Epidemic: Severe Acute Respiratory Syndrome (SARS)

Dates: 2002 - 2003

Text: Severe acute respiratory syndrome (SARS) is a viral respiratory disease of zoonotic origin caused by severe acute respiratory syndrome coronavirus (SARS-CoV or SARS-CoV-1), the first identified strain of the SARS coronavirus species severe acute respiratory syndrome–related coronavirus (SARSr-CoV). The first known cases occurred in November 2002, and the syndrome caused the 2002–2004 SARS outbreak. In the 2010s, Chinese scientists traced the virus through the intermediary of Asian palm civets to cave-dwelling horseshoe bats in Xiyang Yi Ethnic Township, Yunnan

Media: https://upload.wikimedia.org/wikipedia/commons/7/76/Novel_Coronavirus_SARS-CoV-2.jpg

Media Credit: From Wikimedia Commons, the free media repository

Media Caption:  This colorized transmission electron microscope image shows SARS-CoV-2—also known as 2019-nCoV, the virus that causes COVID-19—isolated from a patient in the U.S. Virus particles are shown emerging from the surface of cells cultured in the lab. The protruding capsid structures (so-called Spike protein) of the virus give these viruses their name, corona being the Latin term for crown

Epidemic: Swine Flu

Dates: 2009 - 2010

Epidemic: Middle East Respiratory Syndrome (MERS)

Dates: 2015 - ongoing

Epidemic: COVID-19

Dates: 2019 - ongoing

Common Pitfalls

  1. Ensure the image URL is pointing to an actual image.
    1. A good way to check if an image can be used, open a new browser tab and paste the image URL to verify it is indeed an actual image before pasting into the Google Sheet. It should end with the image extension (.jpg, .jpeg, .gif, .png)
  2. Do not modify the template headers.
    1. If timeline headers are modified, the template will be unusable. Even if the headers are restored, the template may not work and may generate an error in the timeline. The solution is to launch a new template from the TimelineJS site and copy/paste all of the records, without the header, into a fresh template.
  3. Careful using Eras.
    1. An Era is specifically a method to color-code a span of years on the timeline itself. It does nothing else.
    2. An Era should not used to add timeline elements. It should not to be used either as a single event in time nor as an event that covers multiple years.

University Libraries

One Bear Place #97148
Waco, TX 76798-7148

(254) 710-6702