Skip to Main Content
Chat With Us

Undergraduate Research in History

:

TimeLine JS

This is a guide for Boston College's undergraduate student population in how to approach historical research.

Doing a Project in TimeLine JS

For this project, you have to 1) select a topic and 2) explore multiple online, digital collections to 3) pick 10 objects to 4) arrange and describe. Those objects can include books, letters, maps, or images. But you need to carry your topic across at least two centuries and include three continents. 

Once you have those objects, use Timeline JS to chronologically organize and describe your material. 

What's on This Page

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

    Doing a Project in TimeLine JS

    empty

    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"

     

    Using the Google Sheet Template

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

    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

    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. 

    Publish to the Web

    empty

    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"
      • undefinedChange "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 empty​"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.). 

    Formatting Options at Publication

    empty

    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."

     

    Example

    For additional help

    For additional recommendations, contact your subject liaison (Dr. Bee Lehman) at brittany.lehman@bc.edu or schedule an appointment with them.