Skip to main content

Digital Tools: TimelineJS

A guide for some common DH Tools

TimelineJS

What is a Timeline?

Timelines are a form of data visualization. We are taking pieces of data (dates, times, images, text) and presenting them in an interesting way to tell a story or make an argument. Digital timelines have the advantage of being interactive, so you can embed interactive media, link to other materials (such as your longer essays that are part of this assignment), and edit them to add new events, or correct errors.

When should you use a timeline?

  • Visualize data that are linear, progressive, and sequential
  • Provide historical context to events (in other words, place them in their point in history)
  • The main goal of a timeline is to help people understand temporal relationships quickly

When should you not use a timeline?

  • The events in time you are trying to visualize is non-linear in nature
  • Your focus is on a very specific point in time (so not much movement)
  • There’s no need to contextualize an event in the greater spacetime-continuum

TimelineJS

TimelineJS was created by the Knight Lab, part of Northwestern University, as a way to provide journalists a quick and easy way to build an interactive timeline that could be included with online news stories. It requires no programming or coding knowledge, although if you know HTML and CSS you can use those languages to add additional features to your timeline, such as links and different styles.

TimelineJS works best in Firefox or Chrome, requires a Google login. You can either use a Gmail account, or create a Google account associated with any email address (including your @gettysburg.edu email). If you are using a non-Gmail account, click Use my current email address instead when signing up.

TimelineJS Help

TimelineJS Examples

Tips for Media and Formatting in TimelineJS

You can do some basic formatting using HTML. You can copy and paste the examples below in your spreadsheet and replace the TEXT HERE with the appropriate text.

To add a link to a webpage:

<a href="LINK HERE">TEXT HERE</a>

For example, to link to the Gettysburg College website, you would use:

<a href="https://www.gettysburg.edu">Gettysburg College</a>

Which results in 

Gettysburg College

To italicize text:

<em>TEXT HERE</em>

To bold text:

<strong>TEXT HERE</strong>

To add a blockquote:

<blockquote>TEXT HERE</blockquote>

To add a line break between paragraphs:

PARAGRAPH 1 TEXT
</br>
​PARAGRAPH 2 TEXT

-or-

<p>PARAGRAPH 1 TEXT HERE</p>
<p>PARAGRAPH 2 TEXT HERE</p>

If you are comfortable with HTML, then you can use just about any sort of HTML/CSS combination in your text. W3Schools has several good tutorials.