Journo-Hacker Sharing in Action

If you need more proof that it's valuable for journalist-programmers to show their work, here's some: WNYC's Live New Jersey Election Map.

Exactly one week after Albert Sun of the Wall Street Journal New York Times shared some of his work, we made this:

(Map isn't embeddable for licensing reasons; the live version is here.)

Here's what happened.

Last month I went to a Hacks/Hackers NYC meetup about mapping. There, Albert showed his WSJ Census Map Maker project and a map I had admired that has dynamic mouse-overs without using Flash. At one point, he showed his project's code repository and welcomed us to use and build on it.

The next day, I downloaded the code and tried to make a rough version of Albert's map, but using the shapes of New Jersey legislative disricts (downladed from the US Census, stored in this Fusion Table, which generates this KML file). After a little tinkering -- which includes a fix I've described in the comments below -- I managed to build one that works. I sent that to stellar coder Jonathan Soma, of Balance Media, who works with me to build interactives for WNYC.

I also reached out to Al Shaw, of ProPublica, who I knew (from another Hacks/Hackers Meetup) had wrestled with live Associated Press election data for Talking Points Memo. He had some great tips, which I passed along to Soma, too.

Also on the case were Balance's Kate Reyes and Adda Birnir, who crafted the map's design and user experience -- a particularly tricky task because each district elects one person for state senate and two people for state assembly.

A week later, as the results rolled in, WNYC's map was live and rockin' -- listing real-time returns for each district, and changing colors when races were called.

In the process, Soma built on Albert's work, and those modifications are now a part of the code base (see Github commits here and here).

And if you need proof that such work is valuable, the map was WNYC's No. 6 traffic-getter for the month -- despite the fact it was truly useful for about 4 hours late on the evening of an off-year election.

4 responses
Quick question: How are you making the KML files to work with Gmap? None of the KML files I export using Google Fusion Tables ("Export to KML") are working with the code. It shows the map but not the polygons.

Here's my sample data set in Fusion Tables:

I've also tried converting the raw shapefile (in the zip file downloaded from the Census site) using QGIS and ogr2ogr and neither of them worked on the map...

Any help would be great. Thanks!

Thanks for the tip! I actually used <multigeometry><polygon> instead of <multipolygon><polygon> and </polygon></multigeometry> instead of </polygon></multipolygon> to get the KML file working. But that's the only tweak I needed to make... It looks great!
Yes! That's what I meant to write: multigeometry not multipolygon. So glad you were able to get it to work anyway.

I can't edit my previous comment, so in the interest of making sure only good info is out there, I've deleted my original response and reposted it here with the correct instructions:

Chris ...

You probably hit a bump I did, but didn't explain. Here's what happend:

In looking at Albert's sample KML file, I noticed that each shape was bounded by <multigeometry> and </multigeometry> ... whereas the KML generated by Fusion Tables had only <polygon> and </polygon>.

In playing with KML files earlier in the year, I learned that polygons are a subset of multigeometry ... so simply wrapped each polygon in the <multigeometry> tags.

Quick way to do that:
1. Open the KML file in a text editor.
2. Search for <polygon> and replace with <multigeometry><polygon>
3. Search for </polygon> and replace with </polygon></multigeometry>

That worked for me!

I stumbled across another quirk that might be useful, each polygon should only have one <multigeometry> wrapper.

For shapes that do contain multiple polygons, Fusion Tables exports the KML wrapping them in an MG tag. I've found that when I do find/change I have to remove the duplicates "<multigeometry><multigeometry>" and "</multigeometry></multigeometry>" as well as delete instances of </multigeometry><multigeometry> that will show up in the middle of your block of coordinates.

The (simplified) structure looks something like:

as opposed to:

The NY State senate district on the tip of Long Island was one instance where the shape wasn't displaying because those non-contiguous islands were each being wrapped in MG tags.