Mapping data: Wisconsin state senate recall map

Published 2011-07-11

View the updated map

Tuesday is the day when six Democratic challengers to Republican incumbents will compete in a recall primary against six "protest" candidates fielded by the GOP.

The general election between the winners of the Democratic primaries and the six incumbent Republicans is Aug. 9.

In an attempt to visualize the recall contests, I came up with this map built with the Google Maps API and Google's Fusion Tables. There's plenty I would like to improve on -- and I know I will improve the next map around -- but I'm fairly pleased with the results.


I'm long overdue for a walk-through to share what I've learned from others who shared what they had learned. But rather than reinvent the walkthrough, I'll use the power of linking to highlight those who helped me get to the recall map, and show a bit more of the coding that I used.

Can you suggest a simple walkthrough?

Via Matt Stiles at StateImpact:

Google Fusion Tables allows journalists to publish, visualize and analyze large data sets in the browser without expensive software. Learn how this free tool can help you create custom online maps, graphs and timelines, mash-up different data sets and collaborate on data.

What is Fusion Tables and how can I use it?

Via Poynter:

If the data has been normalized and saved as an Excel file, .ods, .csv or .kml, Google Fusion Tables can help. Fusion Tables manages large collections of data so you can query, map, timegraph, chart, and add interaction — including user comments — to them.

I've heard about Shapefiles, do those work?

Via John Keefe

Fortunately, the U.S. Census and many municipalities provide those shapes in the form of “shapefiles.” These typically have the extension .shp, and use a format originally designed for cartographers wielding sophisticated (and pricy) software, like Esri’s ArcView.


But thanks to a nifty, online tool called ShpEscape, you can use them, too. For free. And once you have shapes to play with, there’s a lot you can build.

That makes sense. Is there a practical news example

Via Christopher Groskopf & the Tribune's News Apps Blog re: the Chicago Homicide Tracker

This might be the trickiest part. Our system “knows” that the addresses in this spreadsheet are in Chicago, but other systems wouldn’t because the addresses do not include city, state, or zip. To remedy this problem we need to add that information. Rather than doing it by hand, we will use a spreadsheet formula.

I've used FT to show states and population. What's next

Via John Keefe re: the WNYC Census Map

We built the map with free tools and timely help from some smart, kind people. The short story is that we mashed together population numbers and geographic shapes using Google Fusion Tables, and then used JavaScript and Fusion Tables' mapping features to make things pretty and interactive. The long story is meandering and full of wrong turns. But here are the highlights, should anyone need a little navigation.

I'd like to do more with FT than paste an embed code onto an index page

For that, I recommend getting familiar with the Google Maps javascript API. If it sounds daunting, do not worry. If a former sports writer can figure out how to make this work, I'm confident you can.

As you go through the tutorial you can follow the code for a map I made to show the 2011 Madison Mayoral vote. You can find the code for it on github, and the data from Fusion Tables.

And when that begins to make sense, consider that the only real change between that map and Wisconsin State Senate Recall map is the script:

If the pastebin code isn't appearing, you can find it here.

I prefer to watch my tutorials

Thanks to Hacks/Hackers Austin and Ryan Murphy from the Texas Tribune we have this walkthrough of Fusion Tables.

These links and resources should get you started, but if you have any questions feel free to reach out to me or anyone linked to above. John and Christopher and everyone else have been so helpful and everything a noob could ask for.