Tutorial: Timeline JS

For my final group project, I am using Timeline JS to present some of the most interesting appearances of the Schiller bust. Timeline JS is an open-source tool that allows anyone (no coding experience needed!) to build visually appealing and interactive timelines. This DH tool is most effective when your topic of interest has a strong chronological narrative with each event contributing to a larger story. 

Timeline JS is pretty easy to use: 

First, build a new Google Spreadsheet using THIS template. Timeline JS can pull in media from a bunch of different sources (Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, etc.) so make sure to play around with that and insert the link of your chosen source under the “Media” column. If you can’t find any good images/videos, you can just leave the “Media” column empty. To make your timeline EVEN more attractive, add a background color using Hex color codes. 

When you’re done, your spreadsheet should look something like this:

After checking that all your information is correct deleting any empty rows, click on Google Spreadsheet’s “File” menu and select “Publish to the Web.” 

In the next window, change the menu that reads “entire document” to “od1.” Then, click the green “publish” button. When asked, “Are you sure…?” click OK. Ignore the URL that appears in the center of this window. Close the window and copy the URL in your browser’s address bar

Paste the URL in Timeline JS’ webpage. You can mess around with the language, font, and other slide show logistics if you want to. 

Finally, scroll down to Step 4 of Timeline JS’ webpage and press the blue “preview” button. If you’re satisfied with this, you can share the link to your timeline or embed it on your webpage! 

To learn more about Timeline JS, check out these resources below: 

Introductory video

Sample projects

Jadie

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.