Timeline Lab

 Objectives

After this lab, students will be able to:

  • Create a basic timeline using TimelineJS and Google Sheets

Background Reading

TimelineJS

For the purposes of this activity, you should create 5-7 different slides, or rows, to place in your timeline. Some ideas for inspiration:

Tips from TimelineJS

  • No more than 20 slides
  • Have a strong chronological narrative, that is, events that make sense when telling the story in a time-bound environment
  • Each slide should be written as part of a larger narrative
  • Include important events that build up to major events

Logging into TimelineJS

TimelineJS requires a Google Account as you will need to access Google Sheets. You can use a Gmail account, or create a Google account for any other email address.

Go to https://timeline.knightlab.com/ and click Make a Timeline.  The directions at https://timeline.knightlab.com/#make are very helpful, but we will parse these out a bit more.

Creating a Timeline

In order to create a timeline, you will need to input data into a Google Sheet using the TimelineJS template. Click Make a copy to add the Template to your Google Drive. Do not change the headers in the template, and do not leave any blank rows.

Timeline Data Sections

TimelineJS has different sections for different types of data. You can use HTML in these sections if you want to create links, add images, etc.

Date

There are sections for year, month, day, and time. You can input as many or as few as you want.

Ending Date

These sections are for timeline sections that cover a range of dates. The first date field, then, is the start date.

Display Date

By default, TimelineJS will display the dates in the previous fields, but you can override that here.

Headline and Text

Should be obvious …

Media

You can put links to different media here, such as images, videos, sounds, Tweets, Wikipedia articles, and Google Maps. You have to insert links to media, so you have to have them hosted somewhere if they aren’t already online (such as Sites). A full list of supported Media is available at https://timeline.knightlab.com/docs/media-types.html

Media Credit

Use this space to provide attribution. Hint: use links here to link back to the original source if not using your own images.

Media Captions

Captions for your media.

Media Thumbnail

These thumbnails will show up in the little flags in your larger timeline at the bottom.

Type

This is a dropdown. Title rows are for your first slide in the sequence. Eras let you split your timeline into  different sections along the bottom. To use Eras, at the bottom of your Sheet, enter the start and end dates of each Era, and give it a Headline, and select Era from the Type dropdown. Normal slides are just blank for the Type.

Group

Groups allow you to stack different slides vertically on the bottom timeline.

Background

The background is for the entire slide, you can use a color hex code, or an image.

Examples

Timeline: http://public.gettysburg.edu/~rmiessle/smb.html

Google Sheet: https://docs.google.com/spreadsheets/d/1h-zhsh60UoC0hHbsCu_isVHsBAw4pcLDS1tCcSEIDzI/edit?usp=sharing

Publishing the Google Sheet

Once you have added the data to your timeline, you need to publish your Google Sheet. Go to the File menu in Google Docs and select Publish to the Web. Click Publish, then OK to Are you sure? Then copy the URL that appears.

Generate the Timeline

Back at step 3 on https://timeline.knightlab.com/#make, paste the URL of your Google Sheet. You can change the width and height if you want, but it’s probably best to leave them alone.

Update your Options

Click the show link next to Optional Settings to adjust the fonts, where the timeline starts, and how far out you want the timeline at the bottom zoomed.

Share or Embed Your Link

If you just want to share the timeline, copy and paste the Share Link URL that appears. If you are embedding your timeline inside a bigger site, you will need to copy the Embed code and paste it into the appropriate part of your site.

css.php