Tool: Using Timeline JS for historical storytelling

How to tell a story with historical data

Timeline JS, a tool by the Northwestern University knight lab, allows you to create a visually appealing timeline connecting different sources, turning your historical data into an interacrtive storyline.

First steps

You do not need to install anything and can get started on the webpage itself. It is advisable to watch the short introductory video on the page as it offers a brief overview about the functions of Timeline JS. Besides, you can browse through the example-timeline “Women in computing”, so you get an idea of how the timeline can look in the end.
After these introductory steps you go ahead and start creating your own timeline. I decided to do a timeline about the history of the border security, implemented by the European Union.

And here comes the first flaw for those of you who boycott a well-known silicon valley giant: There is no way to get started without a Google-Account, because Timeline JS only works with Google spreadsheets. Once logged in to your (new) Google account you can begin by using the spreadsheet-template from the webpage. It already contains the format you need, an excel-document with all the cells and lines prepared for your timeline.
 

Ready, Steady, Go!

Start filling out the cells of the template according to your preferences. Make sure, you do not leave any free lines. The template uses the date of the event. If you do not know/have access to the complete date, it is sufficient to just enter the year of the event into the list.
In addition, if it is an event, which stretches over a definite period, you can also visualize this by defining the time frame, filling out start- and end-date. Subsequently, you can start filling out the headline and the text, which will appear below the timeline. Probably the most interesting part about the tool is that timeline.js enables you to include different types of media sources in your timeline ranging from pictures to Youtube/Vimeo/Dailymotion-videos to Soundcloud audio pieces, by just copying the URL. Moreover, you can attach a wikipedia-article with the according link. Just make sure, that the slide is not overloaded with information. For example: If you already have one wikipedia-article in your slide, it does not make sense to write a long text next to it. Though a short text as a description of your audio source might be very useful.

Also be aware that if you include pictures, you have to copy the complete URL into the cell, otherwise they will not be displayed. And be careful with the copyright of the images – as long as it is not your own, always check the regulation of the use and distribution.
 

Less is more

Once you included all the information you want to show in your timeline, you can decide wether you want to use a background color for the slides. Hint: If you do not know the HTML-codes of the colors you would like to use, you can finde them here. The good thing is: You do not need to adjust the color of the text accordingly, the Google spreadsheet does that automatically. However, be aware that a too dominating, strong color can also distract the viewer from the content. If you leave the background-column empty, your slides will be displayed with a blank background. When you create the timeline, try to consider (same as mentioned before with media sources) the KISS-rule: Keep It Short and Simple. I would suggest not to fill in more than 10 lines (ten slides) of your template, otherwise it will probably not reach the attention of the user.

If you are happy with the content of your Spreadsheet, just copy and paste the link into the box on the webpage of Timeline JS (Step 3). The website’s generator will then create an embedd code you can use on your own homepage or blog just like with any other embedded media source. Et voila – you can now see your timeline in a preview, to make some final changes or additions. Happy timelining!

Here’s the example we set up for the test (just click on the arrow on the right to get started):

What we like…	…and dislike
it’s easy to handle no coding skills are needed the template is already well structured	there is no separate login feature, you always need a Google account you always need a URL for the pictures, there is no drag and drop function

DataViz, DDJ, knightlab, storytelling, TimelineJS