CREATING TIMELINES WITH

TIMELINE JS

Dr Alana Jayne Piper

Timeline JS

• Developed at NorthWestern University by their KnightLab team, which has developed a

range of successful open-source tools

• TimelineJS was developed for use by journalists and media outlets, making it very user-
friendly

• TimelineJS was also created to be narrative-driven, and focused on engaging public

audiences with its visualisations
Here’s some I prepared earlier

I used Timeline JS for my research project site to create a timeline of crime films produced
in Australia - [Link]
prisons/
Getting started with TimelineJS
• Go to Timeline JS - [Link] - an overview of tips, some further
examples and instructions are all available here

• If you have a question that is not covered in this tutorial, the site provides a range of
help documentation including an FAQ section, a 2-minute instructional video and chat
forums.

• Click ‘Make a Timeline’ to get started

Google Spreadsheet
• Clicking ‘Make a Timeline’ will take you to the four-stage process for TimelineJS

• Start with step 1 by clicking ‘Get the Spreadsheet Template’

• Clicking this will prompt you to log into your Google Account, or create one if you don’t
already have one. From here you will be able to download a copy of Timeline’s Google
Spreadsheet template into your Google Drive.
Google Spreadsheet
The top row of the spreadsheet has all the headings that are used to render the timeline. It
is important that you do not delete any of the columns because all the headings have to
be present for the timeline to render. (You also should not change any of the attributes in
the top row.) However, you do not need to input data for each column if that column is not
relevant for you – just leave the column blank and it will not affect your final timeline.
Google Spreadsheet
The Timeline spreadsheet has sample information in the rows below the top row to show
you the types of information that can go into each column. Once you have looked over this
example information you can delete or clear them to begin adding your own data. Each
row in your timeline will represent a separate event.
Date columns
The first four columns are for putting in the date or start date of your event. Depending on
how precisely your event is dated you can fill out just the year, or day, month and year, or
even add the time of day to the date.
Date columns
The next four columns offer you the option of adding an end date for your event, if it is the
type of even with a clear starting and end point, such as a war. If your event does not
have such an end point, you can simply leave blank. The column after these four is the
‘Display Date’ column – again you do not have to use this, but you can if you want to
change the default way the date is displayed on the timeline to another format, e.g.
dd/mmm/yyyy, mmm/dd/yyyy etc.
Annotation Columns
The next two columns will create the annotation that will appear about your event. The
headline column creates a large, bold headline for the event, so it is best to keep it
something short and simple. The text column then lets you create an annotation about the
event. If you like the annotation can be quite lengthy – in this case the timeline will just
auto-generate a scroll bar that will let the viewer scroll down the annotation to read it.
However, you may want to self-limit your annotations in order to ensure viewers are kept
engaged through a pacey narrative structure.
Media Columns
The next four columns relate to any media you wish to accompany your annotation.
TimelineJS does not allow you to upload your own files into the timeline – they must be
hosted somewhere online and the link the files copied into the Media column. Supported
media formats include twitter, flickr, youtube, vimeo, vine, dailymotion, Wikipedia,
soundcloud and more. Image URLs can be copied into this column provided the URL
ends in a .jpg, .png, .tiff, or other image format (image URLs can be found by right-clicking
on internet images). The next two columns can be used to credit and caption your media
file. The final column lets you insert a thumbnail version of the media that will link to the
original if you have a very large image that viewers will need to zoom into and expand
outside of the timeline environment.
Inserting Media
Supported media formats include twitter, flickr, youtube, vimeo, vine, dailymotion,
Wikipedia, soundcloud and more. For most of these formats you will simply be pasting the
URL for the webpage into the media column.

However, for images you will not be inserting a webpage URL, but a specific image URL.
Image URLs for internet images can be found by right-clicking on an image, then selecting
‘copy image address’. See screenshot below.

Image URLs should end in a .jpg, .png, .tiff, or other image format.
Type Column
For most rows or events you will probably leave the type column blank. The exception
would be if you want to include a title slide at the start of your timeline – you would then
click Title within the type column. This is so that Timeline JS knows that there does not
have to be a date for that slide. The other option in the Type column is to create an ‘Era’.
This will act as a sort of sub-title slide if you want to break up your timeline into different
set periods, e.g. ‘First World War’ era slide by clicking ‘Era’ here then nominating the war’s
start and end dates in the date column. This would let Timeline JS know that any events
added to the timeline that fall between these dates are part of this ‘Era’, and it will
automatically colour code events from the same era together. Note that the platform does
not allow for overlapping eras.
Group Column
The Group column can be used to show that different events are related to each other by
tagging them as part of the same Group. For instance, you may want to group all political
events in your timeline by tagging those events ‘Politics’, but create another group for
cultural developments by tagging those events ‘Culture’.
Background Column
This column lets you decide what the background behind your annotation and media will
be within the timeline. You can make the background into an image by adding an image
URL to this column. Or you can make it a particular colour by adding a 6-digit html colour
code. If you are not familiar with html colour codes, you can find all the colour values and
choose the one you want here - [Link]
Notes on spreadsheet
You should delete any blank rows that appear at the bottom of your spreadsheet – leaving
them in can create a bug that means your timeline cannot be generated.

Once you have a published your spreadsheet to the web and generated your timeline
URL, you can still make further edits to the spreadsheet. These edits will automatically
carry over to the ‘live’ version of the timeline.

I would strongly encourage you to generate a version of your timeline early on so that you
can see how it works and preview what it will look like while you make edits to it.
Generate Your Timeline
Once your timeline is ready you need to go to ‘File’ then ‘Publish to the Web’ then
‘Publish’.
Generate Your Timeline
Copy your spreadsheet URL directly from the URL bar at the top of your spreadsheet.
Don’t worry if you want to make changes later on – once the Google Spreadsheet is
published it will just automatically any time you save changes to it, and any versions of the
timeline that you have embedded to your website will automatically update too.
Generating Your Timeline
Now you have the URL from the top of your Google Spreadsheet, you are going to paste it
into the Step 3 box on Timeline JS. Under Step 3 you will also see an ‘Optional Settings’
button that you can click into to play with some of the display features of your timeline,
such as selecting different fonts
Generating Your Timeline
Now scroll down to Step 4 of TimelineJS and click ‘Preview’. Below you will see a Preview of
your Timeline that you can click through and check that everything appears as you want it too.
Once you are satisfied, you can either copy the embed code displayed above into your web
page, or obtain a URL for people to visit where they will just be able to see the timeline.
Thank
you