ClearMaps: A Mapping Framework for Data Visualization


Despite the recent explosion of web based cartography tools, making effective maps for data visualization remains a challenge. While tools like Google Maps are great for helping navigate the world they are often poorly suited for thematic mapping, as many features like roads and cities only get in the way of telling compelling stories with data. In fact, even the distance between places can be a distraction – who cares how far away Alaska is when the goal is to make a simple comparison between US states?

To help overcome some of the limitations with existing mapping tools Sunlight Lab is releasing ClearMaps, an ActionScript framework for interactive cartographic visualization. In addition to giving designers and developers more control over presentation the project aims to address some of the common technical challenges faced when building interactive, data driven maps for the web. ClearMaps is designed as a lightweight, flexible set of tools for building complex data visualizations. It is a framework not a plug-and-play component (though it could be a starting point for those wishing to make reusable tools).

In addition to offering flexibility, ClearMaps attempts to address two of the biggest technical problems encountered when building maps for the web: rendering of vector data in-browser and reducing vector data size for timely loading. Unfortunately there aren’t many browser-native approaches to rendering that can scale to the full range of visualization tasks. For example, rendering the boundaries of all 3,100+ US counties isn’t performant when using JavaScript and the canvas object. Things only get worse when compromises are made to support non-canvas compliant browsers such as Internet Explore. Data transmission time is equally problematic for complex geometries. At full scale, US Census Shapefiles for county boundaries total 14MB. Even with detail reduced for web display the raw vector data are nearly 2MB in size.

Given these challenges ActionScript becomes an attractive solution. The Flash plug-in’s rendering engine is faster and more widely available than in-browser vector rendering. Plus, Flash offers tools for efficiently encoding and compressing binary data streams, significantly speeding up transmission time. Fortunately, with the release of Adobe’s open source ActionScript 3 SDK and open source IDEs like FlashDevelop, the proprietary nature of the Flash platform has become less of a concern.

ClearMaps provides an Adobe AIR based encoding tool for translating data from Shapefiles into a compressed binary form and a set of ActionScript classes for decoding and rendering vector data. These tools provide the core functionality required to get from raw cartographic data to a web map with a minimum of glue code (the above demo map requires less than a hundred lines of ActionScript).

However, the library is far from complete. Features like keys and legends are currently missing and much work remains in building an extensible framework for integrating external data sources. If you find these tools useful drop us a line and let us know how you’re using the framework. If you have ideas or code for solving common visualization tasks we would love to incorporate them into the library.