MIT’s SIMILE timeline widget

For a good time, I took a stab at learning how to implement a MIT SIMILE timeline widget. This posting describes what I learned.


The MIT SIMILE Widgets are a set of cool Javascript tools. There are tools for implementing “exhibits”, time plots, “cover flow” displays a la iTunes, a couple of other things, and interactive timelines. I have always had a fondness for timelines since college when I created one to help me study for my comprehensive examinations. Combine this interest with the rise of digital humanities and my belief that library data is too textual in nature, I decided to learn how to use the timeline widget. Maybe this tool can be used in Library Land?

Screen shot of local timeline implementation


The family of SIMILE Widgets Web pages includes a number of sample timelines. By playing with the examples you can see the potencial of the tool. Going through the Getting Started guide was completely necessary since the Widget documentation has been written, re-written, and moved to other platforms numerous times. Needless to say, I found the instructions difficult to use. In a nutshell, using the Timeline Widget requires the developer to:

  1. load the libraries
  2. create and modify a timeline object
  3. create a data file
  4. load the data file
  5. render the timeline

Taking hints from “timelines in the wild“, I decided to plot my writings — dating from 1989 to the present. Luckily, just about all of them are available via RSS (Really Simple Syndication), and they include:

Consequently, after writing my implementation’s framework, the bulk of the work was spent converting RSS files into an XML file the widget could understand. In the end I:

  • created an HTML file complete with the widget framework
  • downloaded the totality of RSS entries from all my my RSS feeds
  • wrote a slightly different XSL file for each RSS feed
  • wrote a rudimentary shell script to loop through each XSL/RSS combination and create a data file
  • put the whole thing on the Web

You can see the fruits of these labors on a page called Eric Lease Morgan’s Writings Timeline, and you can download the source code — timeline-2010-12-20.tar.gz. From there a person can scroll backwards and forwards in time, click on events, read an abstract of the writing, and hyperlink to the full text. The items from the Water Collection work in the same way but also include a thumbnail image of the water. Fun!?


I have a number of take-aways. First, my implementation is far from perfect. For example, the dates from the Water Collection are not correctly formatted in the data file. Consequently, different Javascript interpreters render the dates differently. Specifically, the Water Collection links to not show up in Safari, but they do show up in Firefox. Second, the timeline is quite cluttered in some places. There has got to be a way to address this. Third, timelines are a great way to visualize events. From the implementation you can readily see what how often I was writing and on what topics. The presentation makes so much more sense compared to a simple list sorted by date, title, or subject terms.

Library “discovery systems” could benefit from the implementation of timelines. Do a search. Get back a list of results. Plot them on a timeline. Allow the learner, teacher, or scholar to visualize — literally see — how the results of their query compare to one another. The ability to visualize information hinges on the ability to quantify information characteristics. In this case, the quantification is a set of dates. Alas, dates in our information systems are poorly recorded. It seems as if we — the library profession — have made it difficult for ourselves to participate in the current information environment.

Published by

Eric Lease Morgan

Artist- and Librarian-At-Large

2 thoughts on “MIT’s SIMILE timeline widget”

  1. I considered the best feasible way to visualize dates in our result sets. When you can have a thousands (or tens or hundreds of thousands) of documents in your result set, putting each one of them on a timeline seemed infeasible, both in terms of performance and in terms of usable interface. What I was able to come up with instead was a sort of histogram/bar-graph timeline that grouped the results into a sort of fixed resolution.

    Check it out: Click on ‘Publication Year’ on any result set after doing a search [or click on the graph on the main page, but I think it’s more useful after a search], and see a timeline; you can also ‘drill down’ into the timeline, and you’ll then see a sort of ‘zoomed in’ timeline of the range you selected.

    The resolution of the bars is currently set at around 10, but I believe the underlying Solr search engine powering this could handle higher — 20, certainly — 100, maybe but not sure. Haven’t played with it, since this seemed good enough for now and I had other things to work on. It’s actually just a parameter in the code though, could be set to any number. And of course the graph could be displayed larger, as on the first page, but didn’t seem useful in this interface to do so.

    I think it turned out pretty slick.

    That’s an under development demo of the blacklight/solr powered opac replacement we’re working on, it’s not in production and is a bit wonky occasionally. And yes, it’s got a non-trusted SSL cert sorry, need to fix it soon.

Comments are closed.