created by Elana Altman
updated October 23, 2020 by Miranda Jones-Davidis, Ana Lam
updated May 12, 2022 by Ellie Yousif
This work is licensed under a Creative Commons Attribution 4.0 International License.
TimelineJS is a free, open-source tool that allows you to make media-rich, chronological timelines. It can be helpful for illuminating cause and effect, putting stories into historical context, highlighting changes over a period of time and understanding the impact of time on narratives.
- Illuminating the chronological order of events to tell a clear story
- Visualizing how something changes over a period of time
- Smaller digital projects that stand on their own, or that can be included as part of a larger project
- Telling stories that don't move in a linear, chronological fashion
- Making extremely customized visuals
- Showing how quantitative data changes over time - data visualization is a better tool for that
- https://timeline.knightlab.com/
- Spreadsheet Template
- A personal Google account (or other Google account that lets you share things publicly - unfortunately, your gBear account won't work here)
- Notepad, pen, post-its, etc. (for brainstorming/planning)
To get a sense of the structure of a TimelineJS, take a look at the examples below. As you view them, think about the following question: What do you find compelling or effective in these Timelines? What doesn't work as well for you? Why?
- The View From Ginling
- Columbia University and the Slavery Timeline
- Taxi Driver Scene Analysis; Shot by Shot
Now, let's dive into the specifics of a TimelineJS. A TimelineJS is a lot like a slideshow: Each TimelineJS includes a title slide and several event slides, with a dated timeline running along the bottom of the slides. The slides themselves are fairly structured, so it's useful to understand the components before building your timeline. To understand the components, we'll take a look at a Photographic History of Barnard's Greek Games.
Story-Portion of Slide (Top, Labeled in Pink)
- Media: Image, video, audio, Tweet, or other type of media that helps tell your story.
- Display Date: The date listed along with the story portion of your slide. This is usually the same as the **date **on the bottom of the slide, but might be formatted differently or contain additional information.
- Headline: The name of your slide. It will likely be the name of an event, though it can be anything that makes sense with your story! This appears again on the bottom-portion of the slide.
- Text: Additional text that helps tell your narrative.
- Credit: Space to provide credit and sourcing information for your media. This can include links as well as text.
- Caption: Short text that describes your media. While not required, it's a good idea to use a caption, as it's helpful for screenreader users, those with slower internet connections , and in cases where your media may not load (for example, if your media is a Tweet that is later deleted by the Twitter user).
Timeline Portion of Slide (Bottom, Labeled in Green)
- Date: This is when the event in your slide takes place. It can be very specific (a single day) or broader (a span of years).
- Headline: This will be the same headline from the top-portion of the slide
- Eras: These are a way of dividing your TimelineJS into chronological sections. They will be represented visually on the timeline with a colorful bar and title. For example, the Greek Games Timeline has two eras: "Original Games" and the "Revived Games."
- Group: Groups are a way of tagging related events, letting you showcase similar event subjects or types from anywhere in your chronology. Events in the same group appear on the timeline within the same horizontal row. In the Greek Games example, the group "hoop rolling" contains a slide about hoop rolling from the 1930s, as well as one from 2011.
Except for the date, all of these components are optional. So, you can pick and choose what makes the most sense for your slide. While including all of these components can help you tell a more complete, media-rich, narrative, there may be times where certain components don't make sense for the story you're telling.
The title slide can contain all of the same components as the event slides. However, it is not tied to any specific event or period of time:
It is helpful to outline your content before making your Timeline. Outlining ensures you have a strong, chronological story to tell that won't get lost in the technical weeds when you start making your timeline.
Start by picking your subject. For this tutorial, I would recommend creating a timeline about yourself or about Barnard - this is because you'll likely want to have easy access to media relating to your story. However, feel free to choose any subject you're interested in! The stories can be large or small in scope, and to make sure it has a strong chronological component, it should likely do at least one of the following three things:
- Show how something (a city, a religion, a type of art, your personal style, etc.) changes over time
- Show how certain events (passing of laws, protests, construction of a new building, earning a degree, etc.) lead to later events
- Highlight the pacing of events (the speed of a romance in a book, the long lead-up to a historical election, a sudden career switch, etc.)
Write down the events you'd like to include in your timeline (aim for about 5). Then, place them in chronological order.
Take a look at your list of events. Are there longer periods of time that would make sense to showcase in your TimelineJS as eras, or certain topics you want to highlight on your Timeline JS groups? If so, mark those down. It's also completely fine if you don't have any eras or groups, particularly since we're keeping our Timelines on the shorter side.
Take a moment to review your work. Does it have a strong start and end date? You may also want to start thinking more about your content: What would you like to say in your description of each one? What media (photo, video, etc.) will you show for each one? It's useful to think about your content before you start making your TimelineJS.
It's time to start using the TimelineJS tool! This tutorial, by EdTechTeacher, gives a nice overview of how to use TimelineJS. If you're new to TimelineJS, I'd recommend watching it before we go through the steps together.
We'll be using Google accounts to create our TimelineJS. Unfortunately, gBear accounts do not work with TimelineJS. So, please login to Google with a personal account (other another Google account that lets you share items publicly.)
To start your TimelineJS, please go to http://timeline.knightlab.com/.. Click the big green button that says "Make a Timeline."
For TimelineJS to work, you need to organize your content in a Google sheet. Luckily, there's a template for us to copy and edit. Click "Get the Spreadsheet Template," and confirm that you want to make a copy. Make sure you're making a copy to your personal (or other non-gBear) account. The spreadsheet should look something like this:
Before we continue, change the name of the spreadsheet to something more memorable. There's currently sample content in the spreadsheet, and soon we'll be changing it to our own content. First, however, there are a couple of things to know about working with the spreadsheet:
- Do not change the headers in Row 1; these are key for turning your spreadsheet into a Timeline
- Do not leave rows empty, as this will cause your timeline to break. It's fine to have some blank rows at the end - but make sure you don't skip any rows between your content!
Let's make your first slide. Each row represents one slide. We're going to walk through how to fill out the rows in detail because the spreadsheet isn't a format everyone is used to working with for a timeline - feel free to skim if you find it intuitive!
Take a look at the second row in the spreadsheet (the first one below the headers). Under the "type" column, it's labeled "title." This means this will be your first slide. Note that the order of your slides in your final timeline does not depend on the order of your rows. The "title" will always be first, even if it is listed last. And the rest of the slides will always be listed in chronological order.
Let's take a deeper look at this row, from left to right.
- Date cells: The first group of cells ask for start, end, and display dates. Because this is the title slide, these cells have been left blank. We'll leave them that way.
- Text cells: These are simple, just replace the sample "headline" and "text" cells with your own copy.
- Media cells: These cells refer to the media - image, video, Twitter post, etc. on your slide. You can view a list of all media types TimelineJS accepts.
Delete their sample media and add your own. As you add your media, keep the following tips in mind:
-
Your media must already be hosted somewhere on the internet; you cannot upload an image or video through TimelineJS.
-
There are some media platforms - such as flickr, imgur, YouTube, and Vimeo- that integrate easily with TimelineJS. If you're using one of these platforms, you can simply enter the web URL for your media. Example: https://www.flickr.com/photos/barnardcollege/38058641542/in/album-72157687854677831/
-
If you're using media hosted somewhere that doesn't automatically integrate with TimelineJS (Dropbox, a museum collection, a personal website etc.) make sure that you are linking to the image itself, not the page where it lives. This is one of the most common mistakes with TimelineJS. Your URL should have a media extension in it, such as .jpg, .png, .gif, .mp4, or .wav.
- Incorrect Link: https://www.metmuseum.org/art/collection/search/49186
- Correct Link: https://images.metmuseum.org/CRDImages/as/original/DP205729_CRD.jpg
-
Your URL must be publicly accessible to everyone. That means you cannot host your media on your gBear account, as these can't be shared publicly
-
The media thumbnail cell is usually best left blank; it lets you add tiny images to your timeline but can be tricky to use.
-
Additional Cells: The last three cells give additional options for customization. We've already added the "type" information, and the "group" cell is only relevant for events slides. The background cell lets you change your slides background - you can use an image file, a CSS color name, or a hex code.
You've finished your title slide! Now, let's move on to an event slide.
Making an event slide is very similar to making a Title slide, with one key difference: You'll need to add dates. Let's turn our attention to the next row (row 3), where there is a sample event slide:
In this example, there is both a start date (November 1, 2011) and an end date (December 15, 2011), showing that an event occurred over a range of time. However, the date can also just be a single date, month or year.
The date (or range of dates) will appear both on the top and bottom of the slide, as shown below. This slide was generated by the data in the example spreadsheet:
Here's how this works: this spreadsheet,
will generate a slide that looks like this:
Now that we've seen how dates work, add dates for your first event slide, and then fill out the text and media cells the same way we did for the title slide.
Next, we get to the additional cells:
- For an event slide, leave the type blank.
- For group, you can optionally add the name of a group to show up on the bottom of your timeline. For the Greek Games timeline, I added the groups hoop rolling and hurdles. To add a group, just type its name in the corresponding cells (shown in row 4 below).
- Just as you did on the title slide, you can change the background of your event slide.
Completed event slide rows should look similar to rows 3 & 4 below (but with your own content, of course!)
Now that you know how to make event slides, you can complete the rest of the slides on your timeline. Here is a guide and two sample spreadsheets to help you out if you get stuck:
- TimelineJS Spreadsheet documentation
- Women in Computing Sample Spreadsheet
- A Photographic History of the Barnard Greek Games Spreadsheet
Once you've finished making your slides, you can add eras to your TimelineJS. If you don't have any eras you want to add, you can skip to Publishing & Previewing Your Timeline.
As a reminder, eras are colored bars representing spans of time across the bottom of your Timeline, like in this example:
Just like slides, you add an era to your TimelineJS by adding a row to your spreadsheet. Since eras don't show up as full slides, you only need to fill out a few of the cells: add your start and end dates, give your era a name in the "headline" cell, and set "type" to "era." All other cells can be left blank. Here are some completed era rows as an example:
At last, you're done with your spreadsheet!
Publishing & Previewing Your Timeline
Now that you've finished your spreadsheet (the most difficult part!), it's time for TimelineJS to do its magic and turn your spreadsheet into a Timeline.
The easiest way to do this to follow steps 2 through 4 on the Timeline website, in the Make A Timeline section. We've already done the first step, creating a spreadsheet. Screenshots of the steps are shown below for reference:
Preview your TimelineJS, and see if you want to make any changes! You can edit your Timeline just by making changes in the spreadsheet - no need to republish!
Finally, you can also share your TimelineJS!
- In what ways did the TimelineJS tool expand how you think about time-based narratives?
- In what ways were you constrained by the TimelineJS tool?
- How might this tool help you "think digitally" about your project or course?
A full list of the examples used in this tutorial (as well as some other projects) is included below:
- The View From Ginling
- Columbia University and the Slavery Timeline
- Taxi Driver Scene Analysis; Shot by Shot
- A Photographic History of Barnard's Greek Games
- TimelineJS Examples Gallery
- Holocaust Timeline
- Gender, Sexuality and Space (Trinity College)
- View From Ginling (Barnard College, Spring 2018)
- How to Build a Timeline using TimelineJS: Shows an approach for starting with a large, open data-set
- TimelineJS Documentation & Help: Includes guides for more advanced features, such as further customizing the look and feel of your Timeline using code