Pádraig Mac Aodhgáin (Patrick Egan) | Digital Humanist and Ethnomusicologist in Cork, Ireland

Fully integrated Timeline JS Map

Timeline JS

Timeline tools have become very popular within the digital humanities. From the dhresources website, here are a few that are well known to DHers:

  • ChronoZoom timelines
  • Dipity (timeline infographics)
  • Histropedia (“Discover a new way to visualise Wikipedia. Choose from over 1.5 million events to create and share
    timelines in minutes”)
  • Simile Widgets (embeddable code for visualizing time-based data, including Timeline, Timeplot, Runway, and
  • Tiki-Toki (web-based platform for creating timelines with multimedia; capable of “3D” timelines)
  • Timeline Builder (online tool for building interactive Flash-based timelines from the Roy Rosenzweig Center for History
    and New Media)
  • Timemap (“Javascript library to help use online maps, including Google, OpenLayers, and Bing, with a SIMILE timeline. The library allows you to load one or more datasets in JSON, KML, or GeoRSS onto both a map and a timeline simultaneously”)
  • Timeline JS (the Knight Lab’s “open-source tool that enables anyone to build visually rich, interactive timelines.
    Beginners can create a timeline using nothing more than a Google spreadsheet…. Experts can use their JSON skills to
    create custom installations, while keeping TimelineJS’s core functionality”)


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. Make sure you are logged into your Google account first.
  2. Visit the website at https://timeline.knightlab.com
  3. Click on “Get the Spreadsheet Template“.
  4. Once the template is open, click on “Use This Template“.
  5. 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.
  6. 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
  7. The media section allows you to add links to media files online.
  8. Once you have a few events added, you need to make the file public. Go to File > Publish to Web. The window that appears will give you the message “Make your content visible to anyone by publishing it to the web. You can link to or embed your document”. For this tutorial you want to click Publish right away.
  9. Next, it will show you a message, “are you sure you want to publish this selection?”, you can click OK. You will then be given a URL that needs to be copied. Copy the link that is at the top of your browser window (in the address bar of the browser).
  10. 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. Check out the Irish language setting that I have added to the open source code for example!
  11. Once you are happy with those options, scroll down to the button “Preview“. Use this button to check out your new timeline.
  12. If all looks good, you can embed this new timeline in your website.
  13. Now, every time you update your Google Spreadsheet, you will see the timeline updated automatically, saving you time because you don’t have to republish the timeline after updating the data.

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 way. Have a look at other Timeline tools out there and see what advantages they have over TimelineJS and what is possible.





Leave a Reply

Your email address will not be published. Required fields are marked *