Authentic Lessons for 21st Century Learning

Timeline JS

Teresa Lansford | Published: August 26th, 2021 by K20 Center

Card

Cover Image

Timeline JS

On this site, students can link their own timeline information and images to create polished, interactive timelines. Timeline JS walks users through copying a Google sheet template, adding their own dates, images, and descriptions, publishing the Google sheet and then linking it to the TimelineJS site for a professional-looking end product to share with others.

Timeline JS

Summary

Timeline JS is a web interface that enables users to link a published spreadsheet of dates, images, and citations that is then turned into a professional-looking, interactive timeline that is viewable online from a link generated by the site. First, users are prompted to make a copy of Knight Lab’s preformatted timeline template in Google Sheets. The template is used to add dates or eras, descriptions, links to images, and citations. Although additional rows can be added to include more dates, the site recommends no more than twenty.

Once the Google sheet is complete, the site gives detailed information about how to publish the Google sheet and link it to their site’s interface. This generates a new link to either view the timeline or to embed the timeline on a website. Any time users want to update their timeline, they have only to update the Google sheet; then after giving a moment to refresh, updates to the timeline will appear at the link.

Procedure

  1. Visit https://timeline.knightlab.com/ 

  2. View the comprehensive tutorial video for tips and ideas.

  3. Follow the onscreen directions to make a copy of the Google sheet template.

  4. Add dates, images, descriptions, and citations to the Google sheet.

  5. Publish the Google sheet following the directions located at https://timeline.knightlab.com/.

  6. Copy the link information to your timeline, then preview or share your finished work.

  7. If your preview doesn’t look as you intended, revisit the tutorial video, experiment with your spreadsheet, and then give the published sheet time to refresh to see if you are satisfied with your changes.

Knight Lab. (2020). TimelineJS. Northwestern University. https://timeline.knightlab.com/