Oxfam International extractive industries programs page

Interactives / Jan. 20, 2015

Oxfam wanted a way to both illustrate the scope of their international extractive industry programs and tell each individual county’s story. To that end, this single-page javascript application first gives the user a world map with the 36 program countries shaded as well as a list view with a short synopsis of that country’s efforts. Clicking either the map or the list item takes you to the county detail page with a narrative, photo and sidebar bullet-point details.

The final published project looks fairly simple, which I take as evidence of success. Major kudos to Oxfam’s Chris Hufstader and Scott Sellwood for narrowing the focus and editing down the content to just the essentials.

Map shapes came from ever-amazing Natural Earth rendered in the Robinson projection using D3 and TopoJSON. To reduce the size and complexity of the map, the custom TopoJSON includes one object with all the land shapes, and another with just the shapes of the 36 supported countries.

This project was also my first time using Aight to provide IE8 support. I didn’t both trying to come up with a map alternative for IE8 users, but the list view and the country detail pages work well.

Check the project out here.

oxfam-ei-home
oxfam-ei-country2

Minimum wage and poverty mapping for Oxfam

Interactives, Mapping / Dec. 15, 2014

Oxfam America commissioned a huge study of the impact a $10.10 federal minimum wage would have on the country both at the state and congressional district levels. They asked me to create maps for a small slice of that data. But even that small slice was a big project —there are 20 maps users can explore and 486 print-ready scorecards. Also there’s twitter handles for everyone is congress so users can tweet details about their district and @mention their representatives and senators.

This wasn’t my first congressional map rodeo, but this version added more detail for urban areas like New York, markers for larger/notable cities across the country, and a search to look up a congressional district by street address or ZIP code.

Check the project out here.

min wage 1
min wage 2
min wage 3
min wage 4

50 Richest Members of Congress

Interactives / Sep. 13, 2013

The annual 50 Richest Members of Congress project is big deal in CQ Roll Call land. This year 27 reporters, researchers, developers and fact-checkers worked on the project over the past 3 months. It’s generally a big hit and gets oodles of page views months and months after it goes up. This year we added lots more data, like breakdowns of asset types, with filtering, sorting and a graph view to help navigate through all the numbers.

50richest

Syria chemical weapons graphics

Interactives, Mapping / Sep. 13, 2013

Used Natural Earth’s raster files for the first time for the top map — their stuff is just gorgeous. And for you d3.js people: if the globe in the timeline look familiar, yes I repurposed Mike Bostock’s world tour. Page is here.

syria-maps

Race ratings interactive

Interactives, Mapping / Sep. 3, 2013

This interactive uses the newest version of my house districts map featuring faster load, render and zoom speeds.

race-ratings

Congressional districts choropleth

Code, Interactives, Mapping / Aug. 7, 2013

Hispanic Population by Congressional District

A d3.js map with constrained pan and zoom + bonus bars showing distribution + fun transitions limiting the view to Republican- or Democrat-controlled districts + hovers on the map give you the Rep’s name. A little overkill, perhaps, since there isn’t a strong editorial mission for this guy. The distribution bars were done for an immigration story in CQ Weekly to make the point that most Republicans in the House don’t have too much to fear from Hispanics in their home districts, and to name the few GOP outliers.

But 2014 election graphics are nigh, which means maps! So we attached this data to the beta version of our 113th House Congressional district map.

For this version, I trimmed the Census Bureau’s district shape file, which extends boundaries into lakes and oceans, to land boundaries using QGIS. Then I used TopoJSON to reduce the 110MB GeoJSON file down to around 300k, keeping only around 2.7% of the points. The result gives a acceptable detail scaled up to 5x. Sadly that isn’t enough resolution to make out Manhattan and some Los Angles districts, so I pushed the scale extent to 6 so that you can hover and find New York 10, even if simplification has made the island little more than a crooked rectangle. Another issue with the large scale factor is the state boundaries, which came from the National Atlas, don’t align perfectly to the district boundaries — the result of the simplification having different effects on the two GeoJSON files.

For the next version I’m going to try projected TopoJSON in hopes that it saves enough render time to put some more detail back in the map. Not sure what to do about the state boundaries other than edit the paths by hand in QGIS :-\

Senate votes for immigration reform — 2006 and today

Code, Interactives / Jun. 6, 2013

immigration-vote

Immigration Bill: Will Past Be Prologue? My first project using d3.js takes a look at how the Senate votes for a immigration overhaul in 2006, and how the Senate today might be able to reach 60 votes to pass such a measure again.