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 email@example.com.
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 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.
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.
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.
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.
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.
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.
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.
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:
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.
Need to find creative commons images, video, or audio? Try these sources!
The land on which we gather is the unceded territory of the Awaswas-speaking Uypi Tribe. The Amah Mutsun Tribal Band, comprised of the descendants of indigenous people taken to missions Santa Cruz and San Juan Bautista during Spanish colonization of the Central Coast, is today working hard to restore traditional stewardship practices on these lands and heal from historical trauma.
The land acknowledgement used at UC Santa Cruz was developed in partnership with the Amah Mutsun Tribal Band Chairman and the Amah Mutsun Relearning Program at the UCSC Arboretum.