Time Travel with TimelineJS

What is TimelineJS and why should I use It?

TimelineJS is an open-source tool that allows users to create easy-to-make, beautiful,  interactive timelines.  Timelines are great visual aids to any DH project, particularly those involving history!  Not yet convinced? Here is an example of a finished product: 

Are you now convinced? If so, follow me through a tutorial on the tool!

Step 1. Choose your topic and read through these guidelines for making a timeline

For our walkthrough, we will follow the important contributions women have made to computer science.

Tips for making a timeline:

• Less is more; It is recommended to have no more than 20 slides for a reader to click through
• Pick stories that have a strong chronological narrative.  It won’t work as well if a story jumps around in the timeline
• Write each event as a small part of a larger narrative
• Include events that build up to major occurrences (rather than just the major ones on their own)

Step 2. Create a Google Spreadsheet using the TimelineJS template.   

a.)  To get started, simply click the link above to access the template

The TimelineJS template

 

b.) Copy this to your Google Drive by clicking the “Use this Template” button in the top left corner.  Once it’s yours, make sure not to change any column headers, don’t remove any columns, and don’t leave any blank rows in your spreadsheet.

c.) Add your starting dates. The first four spreadsheet columns (A-D) are the date of your timeline entry.  You must enter at least the year, but you can also include month, day, and time.  Add a display date in column I.  To enter BCE dates, use a negative year.  For example, if I wanted to say an event took place in 500 BCE, I would enter -500.

d.) Add your end dates (optional).  The second four columns (E-H) are the end dates of your timeline entry.  Like your starting dates, you must enter at least the year, but you can also include month, day, and time.   Adding end dates will allow TimelineJS to display spans of time (eras) in the bottom portion of the timeline.

e.) Add content.  Columns J and K contain the headline and the body text that will be displayed one each slide of your timeline.   

f.) Add media.  This can be done in columns L-O. TimelineJS works on any website or blog and can take media from a variety of different sources.  This includes:

• Twitter
• Google Maps
• Flickr
• SoundCloud
• Vimeo
• Vine
• Wikipedia
• Document Cloud
• and many more!

For more information about compatibility of media sources see TimelineJS’s guide to using spreadsheets 

 

    g.) Add Titles and Eras.  You can use the Type column (P) to activate a few more specialized features in your timeline.   This includes the title option.  If you use the word title in this column, then your Timeline will use the row as a “title slide,” which is shown before all others and does not require a date. Title slides also will not appear in the markers in the navigation section of the Timeline. You should only have one row with “title” in the Type column.  This also includes the era option.  If you use the word era in this column, your Timeline will use the row to label a span of time in the axis area of the timeline navigation.   If you don’t want to use any of these features, you can leave it blank.

 

h.) Use CSS to style your timeline

To find the colors you want to use, look at a color hex values table and select it’s code (it will have a # and 6 digits), visit this link to browse through your options and learn more: 

Publishing your Timeline

3. Go to the File menu of your Google spreadsheet and click “Publish to the Web”

 

     a.)  In the window that pops up, make sure you select:

•   Link (this should be the default option)

• “Automatically republish when changes are made”
• “Entire Document”

• Optional: if you only want Carleton students to view your project, select “Requires users to sign in with their Carleton account”

 

 

 

if you are using Google Apps for Work or Google Apps for Education, this may not work without the cooperation of your local Google Apps administrator, even if you follow the steps exactly.

4.   Copy the link

5.   Open the TimelineJS website
6.   Paste your copied link into the “Google spreadsheet URL” box (scroll down to the bottom of the front page)

5.   Choose your styling options

Here, you can select features such as:

• Different fonts
• Start your timeline at the end
• Show navigation at the top
• Debug
• Use hash bookmarks
• Set a default start slide and zoom level

8.    Copy the embed code that is displayed and paste it on your website where you would like it to appear. Congratulations, you have made your own timeline!

 

 

If you run into issues, this may be because you need to download the Knight Lab Timeline plug-in to WordPress.

Other tutorials on TimelineJS can be found here and here