Undergraduate Research in History

This page has a lot on it. You can use the following anchors (links down the page) to jump straight to a relevant box.

Timeline JS is free, easy to use software designed to help you make beautiful timelines with images and explanatory text. 

To start using Timeline JS,

1. head over to Knightlab's website at https://timeline.knightlab.com/
2. Click "Make a Timeline"

How to Use TimelineJS from Northwestern U. Knight Lab on Vimeo.

Timeline JS requires you to use a Google Sheet for your timeline. Helpfully, they provide a template for you to copy: 

• Timeline JS Spreadsheet Template 

Once you've made a copy (the link will automatically prompt you to do so), you'll need to begin inputting your own data.

Note:

• Change your document title so it reflects your project
• Do not change the column names
• Do not leave black rows

Creating your Title Slide:

1. On the blue line, skip the date columns (A-I) and write in the "Headline" (column J) for your project.
   The headline should be a short statement about what your viewers will learn. 
2. Under "Text" (column K), write a short paragraph explanation discussing what your timeline is about.
   Make sure to provide an argument about change over time. Include your project parameters (i.e., Between 1850 and 1925, different people groups in Europe and Africa rose up against oppression to fight against inequality. Those movements, despite distance, built on and influenced one another.)  
3. Take the URL for your preferred title image and paste it under "Media" (column L).
4. Include the credit for your chosen image under "Media Credit" (column M).
5. For your "media caption" (column N), 
6. Media thumbnail
7. Under "type" (column P) make sure the column reads "title."
8. Group
9. For "background" leave the cell blank. 

Once you've filled in the requisite Spreadsheet information, it's time to publish your timeline. To do so, follow these few, easy steps:

1. In your Google Sheet, click "File" and select "Publish to Web"
2. On the "Publish to Web" pop-up
   • Look under "Link"
   • Change "Entire Document" to "od1"
   • Click the green "Publish" button
   • (If you want your Timeline to be private, you can set it up require viewers to be logged in with their BC address)
3. Copy the URL for your spread sheet from the URL bar at the top of your window (do not use the one provided in the "Publish" popup)
4. Go to Knightlab's Time Line JS page and scroll down to item "3 Generate your timeline."
5. Paste your document URL into the ​"Google Spreadsheet URL" box
   • Adjust "Width" in percentage of the screen 
   • Adjust "Height" in pixels
6. Scroll down the page to "4 Share your timeline" and "Preview" your Timeline to check your images, captions, and descriptions. 
7. Share the automated link per email or embed the iframe coding into your target site (e.g., Canvas, WordPress, etc.). 

You have several formatting and style options you can manipulate when publish your Timeline.

1. Language: Using this option, you can change the interface's language.
2. Font: Choose your font pairs for your headers and descriptive text. 
3. Map Type: Modify chosen maps and modify them in your Google Spreadsheet. 
4. Default start slide: This one will automatically set to "0" (your title slide) unless you decide you'd prefer it to start at a different point in your timeline. 
5. Initial zoom level: This determines how much of your timeline you want to display on the initial load (e.g., the entire span of coverage or just a short period). 
6. Misc: 
   • "Start at the end" automatically sets the last slide at the start regardless of slide number. 
   • "Show nav on top" moves the timeline from the bottom. 
   • "Debug" is useful for checking for problem (likely won't be an issue unless you're doing some extra coding in the Spreadsheet).
   • "Use hash bookmarks" is something most of you will ignore.

For additional information on how to tweak your template, checkout Knightlab's "help docs."