Objectives
After this lab, students will be able to:
- Create a basic timeline using TimelineJS and Google Sheets
Background Reading
- Schöch, Christoph. “Big? Smart? Clean? Messy? Data in the Humanities.”
- Listen to “Roger Ekrich on Segmented Sleep.“
- Look over the TimelineJS site and browse the projects.
- Look at the timelines presented at “Cartographies of Time.“
- Create a Google account (if you don’t have one already
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:
- Your favorite band’s album releases
- Harry Potter
- The Civil War
- Montgomery Bus Boycott
- Gettysburg College presidents
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.