Skip to Main Content

HIS 1300: The U.S. in Global Perspective: 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

Let's develop a timeline showcasing the history of outer-space exploration. Use the examples below to start filling out a timeline. The last 3 examples listed are ideas for you to find the rest of the details for and then enter into the timeline.

Title: History of Space Exploration

--Note: Make sure in the "Type" column, you select "title" so Timeline JS knows this entry is the title for the entire timeline.

Date(s): (leave this blank since this is the title entry)

Text: This is a quick demo showcasing the capabilities of TimelineJS. This is an example timeline that covers a few examples from the history of travel into outer space.

Media: https://www.nasa.gov/sites/default/files/thumbnails/image/iss068e044225.jpg

Media Credit: From NASA.gov

Media Caption: Earth's horizon from space.

Event: Sputnik Launched

Date(s): October 4, 1957 - October, 26, 1957

Text: Sputnik, the first artificial satellite, was launched into space on October 4, 1957. It was built and launched by the Union of Soviet Socialist Republics (USSR). Sputnik weighed 185 pounds (84 kilograms). It sent a radio signal back to Earth for three weeks until its batteries ran out, and continued in orbit for three months until aerodynamic drag caused it to fall back into the atmosphere on January 4, 1958. The satellite's unanticipated success precipitated the American Sputnik crisis and triggered the Space Race, part of the Cold War.

Media: https://www.nasa.gov/sites/default/files/thumbnails/image/sputnik_asm.jpg

Media Credit: From NASA.gov

Media Caption: Sputnik I

Event: First Human Enters Space

Date(s): April 12, 1961

Text: Yuri Gagarin from the Soviet Union was the first human in space. His vehicle, Vostok 1 circled Earth at a speed of 27,400 kilometers per hour with the flight lasting 108 minutes. Vostok's reentry was controlled by a computer. Unlike the early U.S. human spaceflight programs, Gagarin did not land inside of capsule. Instead, he ejected from the spacecraft and landed by parachute.

Media: https://www.nasa.gov/sites/default/files/1961_april_yuri_gagarin.jpg

Media Credit: From NASA.gov

Media Caption: Yuri Gagarin preparing for his launch into space.

Event: Mariner 5 Launched

Dates: June 14, 1967 - 

Event: Apollo 4: Un-Crewed Test Flight is Launched

Dates: November 9, 1967 - 

Event: Apollo 11: Man Lands on the Moon

Dates: July 16, 1969 - July 24, 1969

Important Reminders / Common Mishaps

  1. Make sure the image/media URL is pointing to an actual image/video.
    1. Be sure to right-click on the image you find online and select "Open image in a new tab," and then copy the URL from that new tab. This URL should only contain the image/media.
    2. 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 in the spreadsheet.
    1. If timeline headers are modified in the spreadsheet, 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 Timeline JS site and copy/paste all of the records, without the header, into a fresh template.
  3. Careful using the Era feature.
    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