Visualization candy: the making of a realtime geo-dashboard

Thumbtack service directory map

“The most efficient graphic constructions are those in which any question, whatever its type and level, can be answered in a single instant of perception, that is, in a single image.”
- Jacques Bertin, 1983, Semiology of Graphics

Since Thumbtack’s inception, we have aimed to service every city, town, and neighborhood across the country. Unlike other startups that begin in one city and build out to other cities, our goal has been to grow quickly by being available in every town and city from the start. We want to be the most comprehensive and local services directory, whether you’re in Los Angeles, California or Monowi, Nebraska*.

Scanning our access logs and database tables gave us a strong inkling that we were reaching people all around the country. But creating maps gave us definitive visual proof that we were achieving our goals on the national level. The map above shows the geographic breadth of service professionals who have listed their businesses on Thumbtack. We’re proud to say it looks much like a map of cities at night, and it also shows us where we can focus more of our attention.

More than a cumulative snapshot of where Thumbtack has been up to a given point in time, we wanted to see a more dynamic portrait of Thumbtack and its geography. To help us out, we built a realtime mapping toolkit called Rotary Maps.

Realtime visualization


Our implementation shows us how users are interacting with Thumbtack: page views, email clicks, form submissions, etc. Because all these actions are tracked as event documents in MongoDB, they can be easily queried ad-hoc.

MaxMind’s excellent GeoIP database helps us determine where events are happening, so latitude and longitude coordinates are embedded into each event document. Querying Mongo for the geographic coordinates of specific event types is therefore trivial. We then render visualizations with Rotary Maps. The Rotary Maps library merges RaphaelJS vector drawing with Google Maps. This makes it possible to use custom vector icons to show different event types while using AJAX calls to refresh our maps with the latest data.

Open source treats

If you want to implement your own Rotary Map, we’ve released the Javascript source under an MIT license. Check out Rotary Maps on GitHub. This is an early release, but we hope it will be useful.

The following example shows the latest USGS earthquake data.

Looking at your data through a geographic lens is always interesting, and often insightful. We hope you’ll find Rotary Maps useful for your own visualizations, and happy geo-hacking!


* We do, in fact, have services available to Elsie Eiler, the sole inhabitant of the nation’s smallest city.

  • http://www.facebook.com/mattcrampton Matt Crampton

    This is very cool.  Is there documentation anywhere for rotarymaps?

    • http://twitter.com/cmueller Chris Mueller

      There is currently no documentation, but the examples linked to should provide a decent guide for how to get started. 

  • http://www.embroiderydigitizing.net/ Custom Digitizing

     Cool
    shared post.Simple yet very descriptive post.Well man thanks for sharing such a nice dresses.Keep sharing and updating
    your blog as like this always.