Chronological

Timeline.js, like the majority of the tools and platforms we will be looking at today, is driven by a Google Sheet that is filled with metadata about your items. This metadata contains certain fields which need to be understood programmatically, such as the date field in this case, and some fields that can be used to provide your editorial create context, such as the text field here.

Going to the Timeline.js site, you can begin by making a copy of their Google spreadsheet template and replacing these metadata examples with your items and text. While Timeline.js is most easily suited for linking media directly from sites like Wikipedia, Flickr, Soundcloud and YouTube, we can also link media directly from Google Drive like we are doing here.

multiple colored fields of a Google spreadsheet.
Timeline.js metadata template adjusted for our items.

To use the right link for media you are storing on Google Drive, select your item, select Share and change the status of General Access to Anyone with the Link can share and copy that link. When you are finished creating your metadata, share the entire document and select Publish to Web.

✺

Then copy the URL of your document and paste into the box at step three to generate the timeline. Here is a link to the adjusted metadata and the resulting output:

Some notes on Timeline.js:

  • Slides will default start at the earliest date provided, not the order of rows in the template
  • This format also works best for visualizing items with overlapping time spans, rather than specific times like we have here.
  • The group field in the template acts a little like tagging and is displayed on the left of the timeline below as you can see the audio, pdf, images and video.
  • Users have the option to select the media which will bring them to the link. This will kick them out to another site if that is linked, or to your personal cloud where the item is stored, which may be preferable for retaining users.