Digital timelines can be useful not only as teaching resources, but as part of a presentation, as a feature on a research-oriented website, or as part of a digital article aimed at the public. In order to introduce my students to the major events in the history of Japan’s interactions with the West I created one such timeline late last year for a course that I am currently teaching. In this post, I will explore how I made the timeline as well as the issues that I faced creating it.
The title page of my timeline.
There are numerous platforms designed to aid in the creation of digital timelines. The first I came across was a platform called Tiki-Toki which I read about in an article entitled “Plug-and-play digital timeline development,” by Kristin Colonna on Medium’s DH Tools for Beginners. Tiki-Toki allow users to create a single timeline with a free account, however, if one wants to create multiple timelines payment is necessary. Since I wanted the ability to create multiple timelines, preferably for free, I decided to search for a different service. Another feature that I desired from a platform was the ability to embed the timeline on my website. Finding a free platform which allowed its users to create multiple timelines and embed them on their own website was a somewhat difficult task, but in the end, I was able to find TimelineJS by Knight Lab.
TimelineJS.
TimelineJS is an open source software built in JavaScript. Users can create a timeline by using TimelineJS’s website and its downloadable Google Spreadsheet or code the timeline by themselves. I chose the former option, but for those interested in the latter a guide can be found here and TimelineJS’s GitHub page can be found here. Creating a timeline using TimelineJS’s website is very simple and can be completed in four simple steps. Firstly, the user needs to download and edit the Google Spreadsheet Template from TimelineJS’s website. Once editing is completed the user must click “Publish to the Web” under the file menu. Following this the user copies and pastes the URL into a box labelled “3 Generate Your Timeline” on TimelineJS’s website. Finally, a link to the user’s timeline will appear in an additional box labelled “4 Share Your Timeline.” This link can then be copied into your browser to view the timeline. An additional box contains the code needed to embed the timeline on one’s own website. This is a painless process, which is described in much greater detail and clarity on TimelineJS’s homepage.
The spreadsheet editing process.
When editing the spreadsheet, the user can insert dates, titles, text, and integrate various media including images, videos, audio, maps, and documents from a range of sources. This allows the user to create very beautiful and interactive timelines. Moreover, the timeline can be edited at any time simply by returning to the spreadsheet and editing it. The timeline updates automatically, so there is no need to repeat steps 2, 3 or 4 in the creation process. Despite this, I also found that using the website-spreadsheet method had several limitations. Firstly, the text that I decided to include in my timeline was notoriously difficult to format. Whilst I was able to use italics and insert Japanese text, I was unable to create new paragraphs. This encouraged me to keep the textual aspect of the timeline concise, but as someone who tends to write discursively I was disappointed that I could not write more without compromising the format. Secondly, all media must come from either a URL or supported sources. This meant that I was unable to use my own images without uploading them to another website first. Although, I suppose that this is only a minor inconvenience.
Part of the completed timeline.
I faced some further inconveniences following my completion of the timeline. Firstly, my timeline contains a blank slide between the title page and the first slide. I have not been able to discover the reason for this nor have I been able to correct the problem, and it sadly detracts from the overall attractiveness of the timeline that I created. The second problem was that I was unable to embed the timeline to my own website. This is because WordPress does not support the TimelineJS platform. Finally, it is impossible to include a large number of events on the timeline without it feeling cluttered. Despite all this, I have been very happy with the results.
The blank slide in my timeline.
I found TimelineJS extremely easy to use. Moreover, the timelines that the software generates are visually attractive, especially when viewed through the screen of a mobile phone. My students also enjoyed having a timeline to revise from and it was something new and exciting to show them in class instead of a standard PowerPoint presentation. Despite some problems, TimelineJS is very simple to use and creates beautiful timelines. I would highly recommend it as a resource for creating classroom materials and as a means to bring one’s research to new audiences.
The timeline I created for my class can be viewed here.
The Digital Orientalist 