Skip to main content

Create Stunning Visual Timelines

Do you plan to develop an assignment that involves a timeline or some form of historical analysis? The Timeline JS tool is an attractive, user-friendly way to communicate this information.

Make Your Timeline

Your timeline is based on information you enter in a spreadsheet. Access the Google Sheet template here.

Within the spreadsheet, you should only use columns A to N.

Google Sheet full template for Timeline tool

  1. Each row, beginning with Row 3, represents an event on your timeline. Columns A to D represent the start moment of your event (Year, Month, Day, Time).
  2. Columns E to H represent the end moment of your event (End Year, End Month, End Day, End Time). Ignore Column I.
  3. Columns L to N represent an image, video, or other visual linked on the web you want to use to illustrate your event (Media, Media Credit, Media Caption). Ignore Columns O to Q.
  4. Repeat for every event on your timeline.
  5. When ready to publish, go to File menu in your Google Sheet. Choose Publish to the Web. In popup window, change “Entire Document” to “od1.” “Web page” remains. Publish. Ignore link provided and close pop-up window.
  6. Copy the browser URL of your Google Sheet.

Publish and Share Your Timeline

The Knight Lab, a collaboration of Northwestern’s Medill School of Journalism and McCormick School of Engineering, developed the Timeline JS tool open-source tool for you and students to use. You can format your timeline only through The Knight Lab website.

  1. Go to Step 3, Generate Your Timeline, at https://timeline.knightlab.com/.
  2. Paste the Google Sheet browser URL to “Google Spreadsheet URL” box.
  3. Move to Step 4, Share Your Timeline, on the webpage. Choose “Open Preview in a new window” to view your graphic timeline.
  4. Your timeline is now ready to view and share! Preview an example timeline here.

Video tutorial for MSHE “Wall of Oppression” Timeline assignment.

Leave a Comment

Your email address will not be published. Required fields are marked *