Chris Mueller – Visualmotive

Thoughts on maps and visualization

Introducing Cartographer.js

Cartographer.js screenshots: chloropleth, area-scaled circles, and pie charts

Cartographer.js screenshots: choropleth, area-scaled circles, and pie charts

Thematic maps describe statistical data about places. They come in many flavors: color-coded regions, area-scaled circles, pie charts, flow charts, heatmaps, and so on. By aligning statistical data to a geographic anchor, the underlying data can be made easier to understand.

The problem

It is difficult to build thematic maps for the web using standard HTML and Javascript. In the few maps that do exist, developers are re-creating basic thematic elements or using sub-standard visualization techniques. In particular, “red dot fever”—the ubiquitous red pushpins on Google Maps.

Our solution

Cartographer.js, a simple library for Google Maps that simplifies the development process and provides instant access to proven visualization techniques. Developers are freed from worrying about how to tweak the Google Maps API to build the thematic elements they need, and can focus on more important problems like data collection and normalization. Cartographer.js supports custom styling so it can integrate seamlessly into existing web applications.

Why HTML + Javascript?

Cartographer.js is built to leverage cutting-edge web technologies. Other formats, like Flash or Processing (Java Applet), are not supported on many mobile devices, and many developers are already familiar with HTML + JS. Also, many recent advances in the power and speed of Javascript (cf. V8) make it more desirable to build rich web applications in pure HTML + JS. We feel there is a very strong future for this set of technologies.

How do I use it?

Cartographer.js is a simple one-line include. It relies on the excellent Raphael.js vector-graphics library. Cartographer.js is currently in an early-stage Alpha release.

You can find out more by visiting the Cartographer.js website, where you can download the script, see examples, and read through the documentation.

Your feedback is greatly appreciated!

Oct 21, 2009

Category: Maps

Tagged:

4 Comments

  1. Steve Bush says:

    Hi Chris! Good stuff. I went to look up “chloropleth”, found it is rightly spelled “choropleth”, although seems to be some sites spelling it with the l. Wikipedia article puts greek origin as Xora, no L. Anyway, I learned a lot about ’em! Interestingly, check out one of my fav dicts, http://www.websters-online-dictionary.org/, it doesn’t even have choropleth, but it does HAVE a choropleth map right there on it’s front page! Cheers, Steve.

  2. Steve, good point, thanks!

  3. Peregrinator says:

    Is there a non-minified version of the javascript available?

  4. Peregrinator: yes, you can find the raw non-minified version here: http://cartographerjs.googlecode.com/svn/trunk/cartographer.js also accessible through the SVN browser on Google Code: http://code.google.com/p/cartographerjs/source/browse/#svn/trunk