Timeline JS

Timeline JS is an open source timeline tool that was built by designers, developers, scholars and professors at Northwestern University. The initiative is known as Knightlab, a space dedicated to the creation and development of open source software.

It’s slogan is “Beautifully crafted timelines that are easy, and intuitive to use”. TimelineJS basically allows you to upload event data and embed it on your webpage through the use of their software, albeit with a few options for display which are provided by them. The content is also embedded fully responsively. This means that you will have a decent display of the timeline you create on any device or browser window.

The content for Timeline JS is fed through to it by Google Sheets, basically Excel online. The types of data it accepts are text, images, audio, maps and audio-visual material among others (see list of media types here: https://timeline.knightlab.com/docs/media-types.html). Below is an example of a fully integrated timeline.

Fully integrated Timeline JS Map

Fully integrated Timeline JS Map

The gallery style display makes each individual event a show piece of its own. As you click through the timeline, it shows the next or previous event in relation to its position on the timeline below each item.

The timeline is also zoomable. On the left hand side of the image above, you can see the magnifying glasses for zooming into an item or zooming out. This is very helpful if for instance you have a large amount of data spanning the timeline.

To test out the software, follow these steps:

  1. Visit the website at https://timeline.knightlab.com
  2. Click on “Get the Spreadsheet Template“.
  3. Once the template is open, click on “Use This Template“.
  4. Select most of the data which has already been entered and delete it from your new template. This will allow you to take control of data and see where your own entries are placed.
  5. Add your own event information into the template – make sure you fill in Dates, Headline and Text. Adding start and end dates will allow your events to run for a specific amount of time rather than one specific event. For more on adding content, visit this link: https://timeline.knightlab.com/docs/using-spreadsheets.html
  6. The media section allows you to add links from media files online.
  7. Once you have a few events added, you need to make the file public. Go to File > Publish to Web. Then click on “Start publishing” then copy the url for the spreadsheet itself from the address bar. Once you have copied this url, click on “Close“.
  8. Return to the page https://timeline.knightlab.com/ and go to Step 3, paste the new url into the box labelled “Google Spreadsheet URL“. Change some of the options such as size, font or the default starting slide and once you are happy with those options, scroll down to the button “Preview“. Use this button to check out your new timeline.
  9. If all looks good, you can embed this new timeline in your website.

So as you can see in this test example, TimelineJS allows us to create visual representations of our work over time in a really quick fashion. Have a look at other Timeline tools out there and see what advantages they have over TimelineJS and what is possible.





Have your say