LogoLogo
  • About DS Learn
  • Tutorials
    • ¶ Digital Exhibits
      • Getting Started with Digital Exhibits
        • Considerations
        • Basic Steps
          • Site Organization
          • Usability & Accessibility
        • Platforms
    • ¶ Digital Storytelling
      • Introduction to ArcGIS StoryMaps
        • Getting Started
        • Using Content Blocks
        • Importing Maps from David Rumsey
      • Introduction to KnightLab StoryMap JS
      • TimelineJS
    • ¶ 3D Modeling & Immersive Technology
      • Adding 3D Models in Omeka
      • Intro to Photo Processing with Agisoft Metashape for 3D Model Making
      • Tips and Tricks for Taking Photos for 3D Model Creation
      • An Introduction to Apple's Reality Composer AR
      • Importing SketchFab Models into AR for the iPad or iPhone
      • Creating Basic 3D Objects for AR in Blender
      • Introduction to Meshlab
    • ¶ Data Visualization
      • Introduction to Tableau
        • Download and Install Tableau
        • Using Tableau to Visualize COVID-19 Data
        • Tableau DH
        • Resources
      • Beyond Simple Chart in Tableau
        • Beyond Simple chart Examples
      • Google Colab
        • Get Started
        • Data Import
        • Data Wangling
        • Visualization
        • Results Export
      • Out of Box Data Visualization Tools
        • How to use Google Data Studio with Google Sheets
        • Google Data Studio Interface
        • Creating Visualizations in Google Data Studio
    • ¶ Mapping
      • Tiling High-Resolution Images for Knightlab StoryMapJS
      • Hosting and Displaying Zoomable Images on Your Webpage
      • Georectifying Historical Maps using MapWarper
      • Making a Starter Map using Leaflet
    • ¶ REST API
      • How does REST API work?
      • JSON File
      • Get Started with Google Sheets Script Editor
      • Example 1: Extract Data by One Cell
      • Example 2: Extract Data by A Cell Range
    • ¶ Text Analysis
      • Introduction to Text Analysis
        • Step 1: Exercise One
        • Step 2: What is Text Analysis?
        • Step 3: Important Considerations
        • Step 4: Why Voyant and Lexos?
        • Step 5: Exercise Two
      • Text Repositories
      • Text Analysis in JSTOR
        • Overview of Constellate
        • Build A Dataset
        • Create A Stopwords List
        • Word Frequency
  • Digital Scholarship Incubator
    • Schedule
    • Getting Started
    • People
    • Project Guidelines
    • Topics
      • 3D Modeling and Immersive Technologies
        • Part 1: 3D Photogrammetry & Laser Scanning
          • Exercise: Experiment with 3D creation tools
        • Part 2: An Introduction to Apple's Reality Composer AR
          • Exercise: Experiment with Apple RealityComposer AR
      • Anatomy of a DS Project
        • Parts of a DS Project
        • Some DS Project Examples
        • Exercise: Evaluating a DS Project
      • Pedagogy
      • Data and Data Visualization
        • Introduction to Data
        • Introduction to Data Visualization
        • Introduction to Tableau
          • Download and Install Tableau
        • Introduction to Network Visualization
      • Digital Exhibits
        • Exercise 1: Exploring Exhibits
        • Exercise 2: Exhibit.so
      • DS Intro & Methodologies
      • User Experience
        • Usability Exercise
      • Mapping and GIS
        • An Introduction to Mapping, GIS and Vector Data
          • Workshop: Exploring and Creating Vector Data
          • Quick Review: Spatial Data
        • An Introduction to Raster Data and Georeferencing Historical Maps
          • Workshop: Finding and Georeferencing an Historical Map
          • Tutorial: Georectifying Historical Maps using MapWarper
        • Presentation + Workshop: Putting it together in ArcGIS Online
        • Workshop: A Brief Introduction to QGIS
          • Adding Base-maps and Raster Data
          • Adding and Creating Basic Vector Data
          • Styling your data and preparing it for exporting
      • Story Maps
        • Story Map Exercise
      • Text Analysis
        • Exercise 1: Voyant
        • Exercise 2: Python
Powered by GitBook
On this page
  • How it Works
  • Getting Started
  • Using the Spreadsheet
  • Visualizing the Timeline
  • Adding Media
  • Creating Links in Fields

Was this helpful?

Export as PDF
  1. Tutorials
  2. ¶ Digital Storytelling

TimelineJS

PreviousIntroduction to KnightLab StoryMap JSNext¶ 3D Modeling & Immersive Technology

Last updated 2 years ago

Was this helpful?

is an easy-to-use timeline visualization tool that uses Google Spreadsheets. (See .)

How it Works

Timelines created in TimelineJS are data visualization. The data is input in the spreadsheet and the TimelineJS platform translates that data into a visual representation.

Getting Started

The tool's site provides instructions. Simply click "Make a Timeline."

From there you will be walked through four major steps:

  1. Making a copy of a Google spreadsheet. (You can use your BC or personal Google account.)

  2. Publishing the spreadsheet, which is necessary for it to be visualized

  3. Cutting and pasting the spreadsheet link to visualize the timeline

  4. Getting the timeline link and embed code for sharing the timeline or embedding it into a site

Using the Spreadsheet

The spreadsheet contains a template that will guide you through the information entry process. Do not make edits to the spreadsheet's headers as they are formatted specifically for the TimelineJS platform.

The headers represent the kind of information that should go in each column. The spaces where you put the information are fields. Two of these fields, Year and Headline, have to have an entry in order for the timeline to work. The rest are optional.

Field explinations:

  • Year, Month, Day, Time (Year is required) - Sets the date/time to varying degrees of granularity

  • End Year, End Month, End Day, End Time (optional) - Sets end date/time to varying degrees of granularity

  • Display Date (optional) - How you want the date to appear on the timeline

Text fields:

  • Headline (required) - The title or name of the event

  • Text (optional) - The or narrative information

Media fields:

  • Media (optional) - Media URL (web address)

  • Media Credit (optional) - Text that gives credit to media creator and/or distributor; here you can create a link that takes users back to where the media originated (see "Creating Links in Fields" below)

  • Media Caption (optional) - Text that describes the media

  • Media Thumbnail (optional) - Link to a thumbnail image

Additional fields:

  • Type (optional) - Indicates which slide is the title slide.

  • Group (optional) - A way to show slides are related

The spreadsheet is where the majority of the digital aspects of the labor occur, be it intellectual or technical, as it takes time to fill in and to do so with accuracy. The other labor-intensive aspects are selecting the events that will be addressed, the research component, writing the text, and finding or creating the media.

Visualizing the Timeline

Errors

When the timeline does not work after having attempted to visualize it, it is most likely an error in the spreadsheet. Common errors include a row that sits between filled in rows is left blank or a year or headline is not included for at least one of the entries. After fixing these errors by deleting the blank row or adding the missing year(s) or headline(s), try visualizing it again.

Adding Media

Media must be hosted online as it cannot be uploaded to TimelineJS. Adding media requires that you use the specific media URL that links directly to the image or video.

To get a video found on YouTube or a similar platform, select “Share,” which is right below the video, copy the URL, and paste it in the Media field.

How to get an image URL:

  • On a Mac hold down the control key and click on the image then select: “Copy Image Address” or “Copy Image URL" depending on which browser you are using.

  • On a PC right-click on the image then select: “Copy Image Address” or “Copy Image URL" depending on which browser you are using.

It will look something like the following:

It's easy to make mistakes with images and get the page URL or a thumbnail version instead. If you get the page URL an error will appear where the image should be in the timeline. If the image appears too small, you have clicked on a smaller version of the image and copied the URL. In this case, go back and make sure you click on the larger version to get the address.

Creating Links in Fields

You can create hyperlinked text in the Headline, Text, and Media Caption fields using the basic HTML tags:

<a href="Source URL">Hyperlinked text</a>

For example, if you want to add a media caption like, Mary Wollstonecraft by John Heath, c. 1797 (Wikicommons), and you want to have Wikicommons be a hyperlink to where the image can be found on the site you would write:

Mary Wollstonecraft by John Heath, circa 1797 <a href="https://commons.wikimedia.org/wiki/File:Mary_Wollstonecraft_by_John_Opie_(c._1797).jpg">(Wikicommons)</a>

In the timeline caption location, the above will appear as:

Background (optional) - Change the background to a color (use ) or an image (use an image URL)

It's a good idea to go ahead and visualize the timeline while working on it so you can keep an eye on how it is looking and to make sure there aren't any errors. To visualize the timeline you follow step 3 "Generate your timeline" and 4 "Share your timeline" Keep a copy of the timeline URL generated during this process as this is how you will access and share the timeline. This is also how you get the embed code for embedding the timeline in things like websites.

Mary Wollstonecraft by John Heath, c. 1797 ()

hexadecimal color code
as directed on the TimelineJS site.
Wikicommons
TimelineJS
examples