Using Google Charts API and TileMill to put charts on the map
Since May TileMill – our open source map design studio – has supported putting interactive popups on maps. Having an interactive space like this creates endless possibilities for visualizing your data and communicating your message. Recently we’ve been working on a few projects where we’ve taken advantage of this space to display charts and graphs of attribute data made using Google’s Image Chart API.
The Chart API allows you to build charts of your data quickly and easily, and when combined with TileMill, put these charts on a map in the form of interactive popups. Little to no programming experience is needed to adjust an existing chart in Google’s gallery or build one from scratch in their interactive chart playground. Any way you build it, the code can be easily inserted into the interactivity space in TileMill to add a chart to your map like the one you see below showing data from Washington, DC on a map of national Census data.
Census map showing a chart of individual race/ethnicity change from 2000 to 2010
How it works
The Chart API generates an image based on the data that is sent via a URL request. Within the URL, parameters are set and data variables are defined. This request then returns a PNG image of a chart based on that data. This means that a basic chart consists of only a few components: a base URL, chart type, chart size, data values, and data labels.
Chart components in Google’s Image Chart API tool
The great thing is that you don’t have to go deep into code to create simple visualizations. The simplicity of the components and parameters provides a unique way to bring interactivity to your map.