TimelineJS

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

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

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

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

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" as directed on the TimelineJS site. 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.

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:

Mary Wollstonecraft by John Heath, c. 1797 (Wikicommons)