Skip to Main Content

Class-Specific Resources

HIS 4-01

TimelineJS

Digital Scholarship at UCSC Libraries

History 01 - History of the Present: Investigating the Historical Origins of Contemporary Problems

This page contains resources for History 01 History of the Present: Investigating the Historical Origins of Contemporary Problems. Here you'll find links to helpful tutorials and resources related to TimelineJS. You can also find more targeted help through our peer-to-peer support hours or by sending us an email at digitalscholarship@ucsc.edu.

Peer-to-Peer Support

The Digital Scholarship Department offers peer-to-peer support drop-in hours during Fall, Winter, and Spring quarters. Check back here during term time for a weekly support schedule.

Timeline JS

Timeline JS is an open source tool created and hosted by Northwestern University Knight Lab.  It is particularly useful to visualize how events fit within a historical timeline - what events overlap, what events were happening concurrently, and how the general zeitgeist may have affected a particular historical period.  They can also be used to capture an individual's lifetime or the key points of a specific set of circumstances. 

The tool allows you to add in images, video, sound, embed webpages, or focus on text.  You can see a full list of supported media types here.  You create a timeline by adding information to a Google Sheet that is formatted according to the Timeline.JS Template, choosing your style options through the Timeline.JS page, and viewing your timeline through the provided link.  The Timeline.JS page has a great walkthrough of the basic options.  This guide provides some additional tips that are specific to the HIS 4-01 class project.

HIS 4-01 Workflow

  1. Create a Google doc for each of your timeline entry items using the Timeline Entry Template.
  2. Make a copy of the Timeline Spreadsheet Template.
  3. Update line 2 with your Headline (title) and Text (description) for your group timeline.
  4. Enter the information from each Timeline Entry Template document you have into a line on the spreadsheet.  Use the tips from "copy text from another program" below and make sure you're copying your text into a single cell.
  5. Publish your spreadsheet so Timeline.JS can access the information.  Instructions with screenshots can be found in the Timeline.js instructions under step 2.  You only need to do  this step once, even if you want to test your spreadsheet in draft form.
    1. In Google Spreadsheets, go to File - Share - Publish to the Web
    2. Click "Publish" and confirm.  
    3. Copy the URL from the top of your browser (not the URL that shows on the previous box).
  6. To view your timeline, visit the Timline.js instructions and past your URL under step 3.  Step 4 will provide you with a url that will show your finished timeline. 
    TIP:  you can view this timeline at any time after you create it.  Just refresh the page and it will update to match your spreadsheet.  Checking it out during your drafting pages can help you fine tune your project.

Helpful tips for editing your Timeline.JS Google Sheet

The Timeline.JS spreadsheet is formatted specifically so that the Knight lab tool can take your information and turn it into an interactive timeline.  It's important that you don't delete any columns or headings.  Don't worry though, they've got you covered!  If you're trying to change something that shouldn't be changed, you'll get this notice from Google Sheets.  If you see this warning, stop what you're doing and leave that setting alone.

Google Sheets warning popup.

If you are working in a group, you may find yourself editing the page at the same time as your group member.  In the picture below, you can see where the 2 people on these sheet are active by the blue and green outlines of the cells.  Try to be mindful of the work your group mates are doing so that you don't delete their work.  If there are many people working on the same spreadsheet at the same time, there can be some lag between an edit and an update.

Multiple users on Google Sheets

 

Finally, while you can make the spreadsheet as long as you want it to, it's always a good idea to delete any empty rows when you're done with your project to keep things tidy.

  • Dates can be written in any order:   Timeline.JS will automatically show them in chronological order.  We recommend putting your dates in chronological order so that you can better keep track of where your events are and what you've added.
  • Dates should be written using numbers for the months and days.  
  • Times should be written using a 24 hour system.
  • The only required date is a year, except for your title card - which doesn't require any date and will always be placed at the front of the project.

Examples of dates that work:

Timeline.JS also allows you to use a Display Date - this field replaces the automated date.  You can use this if you have a lot of date information but just want the day, if you want to write out the date (e.g. February 1, 1923), or if you want to add text to the date.  In the example below, I used the "Display Date" to add a subtitle to the date so the Headline field could focus on a different aspect.

Alternate Display DateDisplay date presentation

For the most part, you can just put headlines and text into the spreadsheet boxes. One tricky thing about working with Google Sheets is that you may want to copy over text from another program that includes multiple paragraphs.  If you click on a cell and paste your text, you will notice that your text now occupies multiple cells.

Google Sheets - pasted in with the cell highlighted

 

To avoid this, click on the input box at the top of the sheet, and past your paragraphs there.  That will make sure all your text is in the same cell.  It won't, however, break up your text into multiple paragraphs for your timeline.  For that, you'll need to read below about some basic html markup.

Google sheets - multiple paragraphs pasted into the entry field

If you want to edit the style of your text, such as adding bold, italics, links in the body of your text, or paragraph breaks, you'll need to do that using html.  Below are a few tips for some basic html style guides.  For a comprehensive list of options to try, check out  W3 school's guide to HTML.  Timeline.JS will keep most html markup, but you should always test your spreadsheet just to be sure.

Here are some common html tags that you might want to use.  Note that there is a tag <example> and an end tag </example> for each option.  You'll need to make sure you have both for the html to work properly. 


<strong>This text is bold.</strong>

<em>This text is italic.</em>

<u>This text is underlined</u>

<a href="www.ucsc.edu">This text links to ucsc.edu</a>

<p>In order to have multiple paragraphs, you need to wrap each line in a paragraph tag.</p>
<p>In this example, these two sentences would have a paragraph break between them, so you can have multiple paragraphs.</p>

<br><br><p>You can add extra space between paragraphs by using the br tag.  It does not need an end tag, as it exists as it's own entity.</p>


Here is what that looks like in the google sheet, and then how that is presented in Timeline.JS:

HTML examples in Google Sheets

Timeline.JS display of html examples

 

Timeline.JS supports various media, and we recommend checking out their full list of media supported!  For most sites that host creative commons media, you can just link directly to the page that the media is on.  In some cases, however, you'll need to find the url for the specific media.  

For images, you can do this by right clicking on the image and choosing "Copy Image address".  You should only do this if you're working on a small class project, and some sites might not let you copy the image address this way.  If you're creating a site you expect to get a lot of views, you should find a place to upload the image yourself online, such as to your google drive account, and get the link from there.

It is a best practice to provide media credit and, where possible, to link your media credit to the place you found the image, even if the image is CC0 and doesn't require attribution.  These fields can accept HTML just like the text fields above can.

Find Image Address

 

Need to find creative commons images, video, or audio?  Try these sources!