Timemap.js
a marriage of my two favorite ways to visualize information
A number of months back, I first encountered the Simile Timeline widget. It was exactly the sort of tool that I'd been dreaming of for quite some time, as a means of navigating through time-based information. I'd seen a number of timeline implementations in the past. Many of which appealed to me. However, the apparent ease with which the Simile Timeline widget could be integrated into an existing web application was the real kicker.
Since much of what I do in the web-based world involves using ZOPE and Plone, my focus turned to integrating Simile with an existing Plone site. The initial work kept it fairly simple. And what I'd learned then, I've documented in the how-to document titled Add a Timeline. Since then, I've incorporated the widget into couple of client projects, including one where a timeline view (implemented as a Zope 3 browser view class) was used in a custom Archetypes-based product for Plone.
The other thing that I'm very keen on is the use of maps, for visualizing place-based information. And for this, I'm in love with tools like Google Maps and Yahoo Maps.
A few years back, I became very interested in the idea of storing information within my digital photos about where they were taken. A process, I soon learned, which is called geocoding, or geotagging. This is when I became aware of a project called the World-Wide Media eXchange. The site - which formerly resided at wwmx.org - had a couple of very interesting ways of visualizing the geotagged photos stored within. The primary visualization involved the use of a map (the same technique now used by the Flickr map view) to plot where each photo was taken, however what was equally intriguing was a slider control which allowed one to view photos taken within a certain time-span. This added a very interesting extra dimension to the navigation, creating a unique geo-temporal navigation system for viewing photographs.
This idea planted itself firmly into my memory.
Last week, the idea began to wiggle around in my brain. And I wrote a note to myself to think more about two things in particular:
- events which have a single location (point)
- events which have multiple locations (path, track, trajectory)
To use the WWMX or Flickr map idea, the first item would appear as a point on the map. The second item, however could be much more interesting. And perhaps an effective way to imagine how this might be applied, is to use a a video rather than a photograph as the item to be displayed on the map. In this case, if each frame of video was geocoded, then a path on the map could be used to represent the location of the camera at any given time throughout the length of the video.
This brings me to what I ended up finding this evening, and the topic of this particular post; which is Timemap.js.
Timemap.js is a Javascript library to facilitate using Google Maps with a SIMILE timeline. The library allows you to load one or more datasets in JSON or KML onto both a map and a timeline simultaneously. By default, only items in the visible range of the timeline are displayed on the map. (excerpt from: http://code.google.com/p/timemap/)
I just love it when there's something which I'd like to be able to do, and some bright soul has already created a working solution. The knowledge of which is a mere Google search away. (Incidentally, it was this blog post which pointed me in the right direction.)
The examples that are provided on the timemap site are interesting too:
- Simple Three-Item Dataset (using inline JSON data)
- Post-Election Violence in Kenya (using KML data)
- Artists & Authors of the Renaissance (using JSON data from a freebase.com query)
Now that I'm aware of the existence of Timemap.js, it's time to come up with a practical application of it which would be useful to me. That shouldn't be too hard.
- Category(s):
- Plone
- visualization