Before this whole Corona virus extravaganza started, we were introduced to TimelineJS in class and each person had to separately test this tool and create a sample timeline on a topic of our choice. First, it was a bit challenging for us to understand what was the purpose of the excel sheet but once we plugged the excel link in the TimelineJS website, everything made much more sense and we understood what each column’s purpose was by experimenting with it. According to Knight Lab, TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet.
In order to create a timeline, there are several steps to follow:
1. Log in to your Google account.
2. Go to https://timeline.knightlab.com and press on “Get the Spreadsheet Template”.
3. A new link will open and you should press on “Make a copy” in order to get the excel sheet .
4. Once the excel sheet is opened, you’ll have a sample of what you should be including in your columns and rows. You should start by putting the title of your timeline and then start filling the rows according to the events you want to include. Each event date should be on a separate row with an associated headline, text, media and background.
NB: Don’t change the column headers, don’t remove any columns, and don’t leave any blank rows in your spreadsheet! Just edit the content.
Here are the specifics of each column:
Columns A to D: the dates of your timeline entry. Enter the year and/or month and/or day and/or the time of a particular event.
Columns E to H: the end dates of each event (this is optional).
Column I: the “display date” over any slide of your timeline. It can be helpful so that TimelineJS knows how to display the date (this is optional).
Columns J: the headline of each event.
Column K: the text of each event.
Column L: the link to the media you want to display. TimelineJS supports several sources like Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, and videos from major video sites like YouTube or Vimeo.
Column M: the media’s original source.
Column N: the media’s caption.
Column R: the background of the event. It can be a specific colour, a picture or even a GIF.
5. Once you finish adding all the information required, click on “File” at the top left corner and then press on “Publish to the web” in order to be able to plug the excel sheet link in the TimelineJS website.
6. You should then paste the excel sheet link in section 3 of the TimelineJS website.
7. After finishing all of the steps above, press on “Preview” in section 4 in order to view your timeline.
TimelineJS proved to be a very user-friendly tool for many reasons:
- Extremely good at what it’s supposed to do, which is timelines.
- It is a free program that any person can access very easily by only using a Gmail account.
- Very user-friendly especially once you understand exactly what each column is meant to do. And the TimelineJS website offers you step by step guidelines in order to create your timeline.
- Relies only on inputting data on a Google Spreadsheet which is a very reliable tool and very convenient since pretty much everyone is familiar with it.
- Supports rich media such as, Youtube videos, SoundClouds, hyperlinks, Twitter, Google My Maps… (mentioned above). This helps us share every single detail of each event we are presenting by simply pasting the URL link of the media needed and helps us keep our timeline alive and use these different media formats in order to entertain the viewer.
- Allows us to tell a story while keeping it’s events clearly narrated through a chronological order.
However, there were still some aspects that weren’t that pleasant about it like:
- Cannot compete with Microsoft PowerPoint in terms of presentation tool since we are restricted to building strictly a timeline and not another form of presentation.
- Lack of customization can be frustrating: Images cannot be placed where desired. There are no design templates available as well. Besides, the only background customization available is to choose a color which we as a group feel was not enough, and with adding so many slides, the background photos and GIFs that we found while browsing the web started to get repetitive.
- The fact that there is no in-app customization, and you have to use google spreadsheet, which means that a simple modification in the spreadsheet may result in error messages and sometimes you don’t know where you went wrong and what you have to fix in the spreadsheet.
- Every time you change a slight detail in the spreadsheet you have to copy and paste the link and load the timeline again which can be frustrating.
- We had trouble inserting images as a jpeg file.
- We need access to the internet in order to complete our timeline unlike other presentation tools such as PowerPoint and keynote.
- Certain links will not load for GIFs and photos. And would be replaced by plain backgrounds.
Before using TimelineJS, our project aim was to be able to dig as much information on Robert Louis Stevenson’s life achievements and link them with two main topics:
- The duality of Human Nature: Good and Evil
- The underwhelming role of women during the Victorian Era
TimelineJS allowed us to explore and study our project from a different perspective. It is an exceptional tool that excels at what it does, which is already mentioned in its title. This means that it helped us keep track of our research and all of the information we gathered concerning our topic in a neat and organized way, with a few design tweaks.
While researching Robert Louis Stevenson’s life achievements and building our own timeline, we found a lot of information due to the full life he lived. TimelineJS allowed us to keep track of every major event that occured during his short but eventful life with style, in a neat and organized way and in a chronological order. It also allowed us to add important information via Soundcloud, tweets, hyperlinks, and even Youtube videos. Creating a crowded timeline can be tiring, and it was for us, and that made us realize in a different way that Robert Louis Stevenson achieved a lot before his untimely death.
TimelineJS definitely allowed us to expand our scope since we were able to enrich our timeline by illustrating it with multiple medias:
1. Alongside images, we included two tweets in order to explain more about Voyant-Tools and to show that Robert Louis Stevenson’s novels are still up for acting such as Treasure Island.
2. After mapping his life achievements and creating the maps of his famous novels using Google My Maps, we decided to include them in our timeline.
3. In order to twist our serious work into a bit of fun we decided to add a SoundCloud track of “I’m the map” to accompany Google My Maps’ definition.
4. We also inserted numerous Youtube videos in order to help the audience interact more with the project.
In a nutshell, we would say that our experience with TimelineJS was aesthetically pleasing. We are proud to say that our final project is very agreeable to scroll through. However, if we could add any feature to it, we would add one option that would deem the app “complete” in our opinion. Giving the user the ability to customize slides while previewing the timeline and the changes, it would even increase its user-friendliness which is already impressive as it is. It is frustrating to keep on going back to the spreadsheet for minor changes, and we feel that it would be very beneficial for the timeline tool since it would be used more for presentation purposes as well. It would help us even more if there was more flexibility in order to choose the appropriate font or to place the writings in better places.
Hope you enjoyed our blog about TimelineJS!
TARA, ANNA AND MARC
Marc Jabbour's Blog 