Thursday, August 19, 2010

Data Animations with Google Maps

Timemap is a Javascript library to help create Google Maps with the SIMILE timeline. The Timemap page on Project Hosting on Google Code has a number of really good examples of how to implement the SIMILE Timeline with Google Maps. A couple of the examples, in particular, are very impressive. One creates a Temporal Heatmap from a Google Spreadsheet and the other has some great Polygon Tweening.

Temporal Heatmap from a Google Spreadsheet

In this example the map markers increase in size to show the cumulative deaths from asbestosis and silicosis in Texas over time. As you move the timeline forward the circular map markers grow to reflect the cumulative number of deaths.

This is a great way to show any cumulative increase in data on a map. I'd really like to see an example that shows the growth in population by country over a number of centuries.

Polygon Tweening

This example uses a custom filter to smoothly tween a polygon between a beginning set of vertices and an ending set. The example doesn't seem to be a demonstration of any particular dataset but I can think of some great ways that this could be used.

This could be used to great effect to show the growth of an urban area over time. I'd love to see this used to illustrate the urban sprawl of London as it has crept out over the centuries to swallow up the surrounding countryside.



dublinstreams said...

used it a bit, alot of data would make it to heavy and sow no?

Keir Clarke said...

The polygon tweening map actually comes with a warning that it could be slow.

The example worked fine for me. But yes I guess it would struggle with a lot of data.