Skip to main content

Using TimelineJS and TimeMapper

1) Formatting Data

The first step is to add your data into a Google Spreadsheet using the appropriate template. You can use your Swarthmore Google Drive account or a personal Google account to create a spreadsheet for use with Timeline JS and TimeMapper.

TimelineJS: http://timeline.knightlab.com/#make

  • Requires a title "row" of data that appears in blue. Switching the "type" field from "title" to "era" will invalidate the row.
  • Makes use of a complete timestamp for the date format (mm/dd/yyyy hh:mm:ss). To avoid inconsistencies, fill at least the entire date, month and year.

TimeMapper: http://timemapper.okfnlabs.org/create

  • Comes with a first row full of useful tips for filling different data fields. This row of tips should be deleted before publishing the data.
  • It uses dates more flexibly -- allowing users to enter entire timestamps, years or anything in between. Again, to avoid inconsistency enter at least a month, date and year.
  • Note that, when initializing the visualization in step 3, you can choose to use the US-style (mm/dd/yyyy) or non-US (dd/mm/yyyy) for the dates.

2) Publishing Data

In order to link your timeline with your data, first publish the data.

  • Click the blue Share button (top right corner). Under "who has access" change "Private" to "Public on the web".
  • Go to File > Publish to the Web
  • In the next window, check “Automatically republish when changes are made.” Uncheck all other boxes. Click “start publishing.”
  • Once you've shared it, copy the URL to the clipboard.

3) Using Your Timeline

Paste the Google Spreadsheet URL copied to your clipboard into the appropriate URL generator. In order to incorporate your timeline widget into another website, you'll need to cut and paste the embed code. You can either link to this view directly or embed it into a web page of your own by cutting-and-pasting the entire embed code into your own page.

TimelineJS: http://timeline.knightlab.com/#make

  • The embed code should appear directly below the URL generator.

TimeMapper: http://timemapper.okfnlabs.org/create/#connect

  • Click "</> Embed" as it appears in the top right of your timeline.