Make a Timeline
Knight Lab’s TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet. Experts can use their JSON skills to create custom installations. TimelineJS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!
What You Will Need
- A computer with an internet connection
- A non-Hamilton Google account
- Digital photos, illustrations, documents, maps, videos, etc.
- Dates and descriptive information associated with the media you choose
To make this easier, we have some images and historical info about the Hamilton College campus you can use to make your timeline.
Get Started
Step 1
-
5 Minutes
The Timeline JS website has a sample timeline, some general tips and tricks, and a four-step process for getting your own timeline up and running.
Step 2
-
5 Minutes
Configure your template
Follow Timeline JS's four-step process for downloading a template (to a non-Hamilton Google account) and making your timeline public. You will want to open your timeline in a new tab so you can view changes to it as you edit your Google sheet.
Step 3
-
5 Minutes
Step 4
-
15 Minutes
Organize your materials
Choose the dates and images you want to include in your timeline. Keep it short. Four seems like a good number to play with now. You probably would not want to use more than 15-20 items for any timeline.
Step 5
-
5 Minutes
Add media to your timeline
Enter the link to an image you want to use in column L of row 5 of your template. You can delete existing content from rows 2-4 any time, but it can be helpful to keep them as examples when you first begin adding your entries.
Step 6
-
5 Minutes
Add text to your timeline
First, enter a year in column A of row 5. You do not need to include months and days. Next, add a 1-3 word headline in column J and some descriptive text in column K. Finally, add a credit and caption for your image in columns M and N. You can leave them blank for now.
Step 7
-
20 minutes
Repeat until your timeline is complete
Open the tab or window displaying your timeline and refresh the page. Your new image and accompanying text should have been added to the timeline. Now all you have to do is repeat steps 5 and 6 to add more content, add a title slide, and delete the Timeline JS entries. You're done!
Next Steps
Take your timeline to the next level by following these guidelines.
- Choose horizontal media when possible. Timeline JS is optimized for images with a 3:2 aspect ratio.
- Use images whose height is at least 640 pixels.
- Keep titles to 1-3 words.
- Do not exceed 500 characters for your body text. Less is best.
- Consult the Timeline JS help section for suggestions for making your timeline even better.
Contact
TECH Lab
