TimelineJS: Easy to make, beautiful timelines

TimelineJS is a free, “open-source tool that enables anyone to build visually rich, interactive timelines.” It is part of the larger suite of KnightLab tools, and reinvigorates the classic historical timeline by allowing for media-rich slides and the ability to interactively visualize different groups of events in relationship to each other. Beyond simply putting events in chronological order, TimelineJS, like all of KnightLab’s tools, encourages you to tell engaging stories that foreground the importance of understanding change over time. As users make their way through the timeline they can either follow your narrative pathway by clicking on the “next” arrow in the slide viewer or by clicking on interesting events in the timeline itself. This can be a useful tool to put together interactive presentations for lectures, or can make a great project for students to demonstrate their understanding of history and digital tools.

How to Use
TImelineJS is a tool that combines two main elements: a slide deck at the top that displays text and other media that describes events included on a timeline below. The timeline is visible at all times, no matter where in the slide deck you are, so that you can consider how the event you are reading about connects to others in the timeline. Building a project with TimelineJS requires only an understanding of how to input information into a spreadsheet using Google Sheets. There are four basic steps in order to build your very own TimelineJS project, outlined below:

1. Create Your Spreadsheet: Your first step will be to create your spreadsheet using Google Sheets. Clicking on “Make a Timeline” at the top of the TimelineJS page will take you to Step One. Once there, click on the button that reads “Get the Spreadsheet Template.” A new tab should open and you will click “Make a copy.” The spreadsheet will then open up in Google Sheets already partially populated. This is a good time to change the title of the sheet to the title of your project, and to save the spreadsheet in a place in your Drive where you will easily be able to find it.

2. Build Your Timeline: All of the dates, text, and media for your timeline will be composed in the spreadsheet you just opened. Each row in the spreadsheet correlates to one moment, or slide, you’d like to include on your timeline. You can add as many rows as you’d like, although the TimelineJS team advises against adding more than twenty in order to keep your user engaged in the story, and to make sure the moments you include contribute to an overall story.

Each column is set up for different kinds of information about that moment. Clicking on the column header will provide some information about what kind of information to include and how. The first row (row 2) should be reserved for your title slide, set by selecting “title” from the dropdown menu in column P if it is not selected already. You don’t need to include a date for this slide because it will introduce your timeline, but you can add a title, description, and media to introduce your timeline (think of it like the title page of a book).

a. Inputting Dates: Columns A-I ask for date information. You can keep this as detailed (down to the minute) or as broad (year only) as you’d like. If you’d like the entry to only be marked as a single point, just fill out columns A-D. If you would like this entry to span a range of time, also enter end date information in columns E-H. If you want the date to display in a certain way, put that information in column I. At the very least, every row besides your title row should contain a year in column A so that it is included on the timeline.

b. Describe This Event: Columns J and K allow you to describe your event. First, give your event a headline in column J. You can think of this as the traditional way events are marked on a timeline: Great Wall of China Completed or Bartolomeu Dias Makes His First Voyage. Column K allows you to provide more context, detail, or narrative to describe why you included this event.

c. Add Media: Columns L-O allow you to include media in your timeline, one of TimelineJS’ most engaging features. include a link to media from the open web in column L. TimelineJS accepts a wide range of media, but you must make sure it fits their Supported Media Types. Use columns M and N to give credit to the original source of your media and provide a caption. Column O will allow you to set a custom thumbnail for your media by inputting an image URL.

d. Customizing Your Timeline: Columns P-R provides three additional ways to customize the presentation of your Timeline. Column P allows you to set the Type to either Title or Era. Title should be reserved only for the row with your title slide, and era should be selected if you want to mark off certain periods in your timeline. Column Q allows you to assign each moment to a Group, which can be very useful if you’re trying to compare timelines for different people, places, or events. Groups will appear stacked on the timeline with all moments assigned to a particular group appearing in a row together. You can call the group anything you want, but must make sure the group name matches exactly in each row. For example, World War II and WWII would appear as two different groups even though you intended it to reference the same group. Instead, you would need to decide on one spelling for the TimelineJS software to group them together. Finally, you can use column R to set the background for each slide by either entering a HEX# or an image URL

3. Publish Your Spreadsheet: After you are finished entering information in your spreadsheet, you are ready to bring your spreadsheet into TImelineJS. First, you will need to toggle to the top of Google Sheets and publish your spreadsheet to the web by clicking File and then “Publish to the Web.” Change the Link setting from Entire Document to od1, then click publish. Next, click on “Share” at the top of the Google Sheet and make sure it is set to “Anyone with a link can view” (do not select edit to prevent unwanted changes being made to your timeline). Once you have completed these two steps, copy the URL to your Google Sheet from your browser.

4. Generate Your Timeline: Finally, paste the link to your Google Sheet in Step 3 on the TimelineJS page. This will read in your spreadsheet and generate your timeline that you can preview at the bottom of the page. This step also gives you options to customize the font, language, starting slide, and other display settings. If you need to make changes simply make the edits in your spreadsheet and click on “Preview” above the timeline viewer to see them. This means that once you have shared your timeline, any changes you make to your spreadsheet will be reflected in your timeline each time a user opens or refreshes your project.

When you are finished editing your timeline, you are ready to share it! TimelineJS provides two embed options to include your timeline in a website or presentation. The second embed code (the one that begins with