Webpage Timeline SOP

Owned by Luis Ayora
Last updated: Mar 21, 2018 by OpenHeart Project


Background

Developing quality websites can be time consuming if done from the ground up. Using web applets and open-source tools reduce development time with high quality results. This page goes through the procedure of generating an interactive timeline applet using the Knight Lab website.


Contents



About the Knight Lab Timeline Website

Knight Lab is a group of collaborators from the Northwestern University that develop software and experiments for journalism, specially on the web.

Their timeline (http://timeline.knightlab.com/) website is a tool to simplify the development of timelines to embed in websites. The tool has been used previously by OpenHeart to create a timeline of the history of heart transplantation and the Ventricular Assist Devices (VADs).


Developing Templates and Generating the Timeline

To develop a template; generating the timeline applet and embedding it into a website, you should go through the following steps:

  1. Go to the Knight Lab timeline website (http://timeline.knightlab.com/)
  2. In the "Make a Timeline" section (Step 1 - "Create your spreadsheet"), click on the "Get the Spreadheet Template" button. This will open a new window with the timeline template
  3. Fill the template with your data, as specified by the column headers on the template. Some tips:
    • In the "Media" column, you can insert many types of media formats using hyperlinks, such as Youtube videos, Images, Soundcloud, etc. (see the website for accepted websites)
    • You can select either a fixed date or an era in the "Type" column. If you select the era option, you must provide both a start and an end date, otherwise the timeline generator will crash.
    • The "Background" column allows you to either use a background image, providing a hyperlink to it; or you can set the background colour using RGB values in hexadecimal notation (e.g. #45FFC6)
    • To have a look of a complete template, see: https://docs.google.com/spreadsheets/d/1zS3PWgTWNAMIvTnWFJL6iLagc1_2Em7dxCA1nHIJwJQ/edit?usp=sharing
  4. Once your template is filled, Step 2, "Publish to the web," shows how to publish the spreadsheet. Notice that correctly generate the timeline, you no longer need to used the publishing link, but only the address of the spreadsheet. For an example of a complete timeline spreadsheet, click here.
  5. Copy the spreadsheet's address and paste it in the dialogue box in Step 3 - Generate your timeline. See the optional settings section for additional visual features of the timeline.
  6. You can generate a preview of your timeline in Step 4 - "Share your timeline" to make sure that you're satisfied with the generated applet.
  7. Once you're content with the timeline, Step 4 also gives the embed link to add it to your website.

See Also



References