In this installment of How We Did It Chris Keller of Madison.com discusses how he's using Google Fusion Tables and other tools to create interactive data maps. Be sure to check out another article by Keller which appears as a link at the end of this post.

July 12 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.

Wisconsin state senate recall map

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.

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.

Via Smartplanet:

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. These links 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. Resources:

Related Article: More Data Mapping with Chris Keller

(0) comments

Welcome to the discussion.

Keep it Clean. Please avoid obscene, vulgar, lewd, racist or sexually-oriented language.
PLEASE TURN OFF YOUR CAPS LOCK.
Don't Threaten. Threats of harming another person will not be tolerated.
Be Truthful. Don't knowingly lie about anyone or anything.
Be Nice. No racism, sexism or any sort of -ism that is degrading to another person.
Be Proactive. Use the 'Report' link on each comment to let us know of abusive posts.
Share with Us. We'd love to hear eyewitness accounts, the history behind an article.