After the Newtown shooting in December, we had a meeting over the phone to discuss our coverage. We decided to have a two speed approach: a quick reader-driven story about why they do or don’t own guns (which we’ve written about a bit on this blog), and a deeper-dive look at the anticipated legislative issue that this and other recent shootings seemed to be bringing about, which we launched Monday as www.ThisIsYourRepOnGuns.com. The project idea grew out of the simple problem that not many people can name their representatives off the top of their head, let alone know their exact stance on gun control or how to get in touch to make their voice heard.
Eliza Shapiro, Abby Haglage and Caitlin Dickson did some awesome reporting for all 530+ representatives, digging through their voting records and previous public statements to distill their position to one of four categories: Opposes reform, Supports reform, Swing vote, or Unclear. We kept track of the sources, too, so that we could present representatives’ statements to the reader when the final thing was done.
Brian Abelson was also around to rig together @RepsGunTweets (since renamed @YourRepsOnGuns), which served as both a tool to monitor reps’ statements to see what category they fell into, as well as an open feed for anyone interested in the topic to follow on Twitter. Read about how that was built in this blog post.
The interactive currently stacks up the number of reps in each category and lets you do a combination filter by different criteria such as chamber, party and state. You can see things like how likely legislation is to pass each chamber and where different states stand. Importantly, too, you can put in your address read information on your House representative and two Senators. Using information compiled by the Sunlight Foundation, it gives you their phone, fax (for those that prefer the fax), address, twitter, website and Facebook page so you can get in touch with them. We also pulled in each representatives NRA grade and their rating from the Brady Campaign to Prevent Gun Violence to give more context to their legislative history.
My favorite part of it though, is that we’ll be updating it as the gun debate goes on. We’ve already received emails from readers who have contacted their reps with statements that we’ll add and one person sent us a local news story from their congressperson that will move him from the Oppose reform to a Swing vote. We’ll mark these updates on the landing page so people can follow along and readers can leave their email to be notified of updates.
We also did this as its own URL similar to how we did www.HavingTroubleVoting.com. As a resource and tool that was going to hopefully have a long life, we felt an easy to remember and dedicated page showed our readers that this was something they could keep coming back to.
Under the hood
The hardest part of this was getting all of the data from multiple different sources into one nice database. We had a few different people researching, different numbers coming in from different places, and multiple editors editing. We used Google Spreadsheets and good spreadsheet etiquette to make sure people were marking the categories the same way and joined them in R.
To make the stance information simple to update, the map copies that information from the main table on load instead of storing it separately with the map data.
The main page uses Isotope.js, which we’ve used a bunch before. But this was a little tricky because we needed to sort them into four columns. Fortunately, there’s some crazy extension for Isotope that lets you do just that. The harder part was figuring out how to get it to display top to bottom instead of bottom to top. But buried in the “Tests” documentation was a page on how to make your elements stack right-to-left for languages like Hebrew and Arabic. It includes the settings to rotate the positioning, which worked.
The only fancy mapping feature is if you click on a district, the map automatically pans and zooms to fit the founds of that district. This is done using the ST_Envelope() function in PostGIS through CartoDB. ST_Envelope() returns the bounding box of a given feature which you can sent to Leaflet.js’s fitBounds() method to pan and zoom to that box. The only problem to be aware of is ST_Envelope() will give you an array of x and y values but fitBounds() is expecting the format to be in y then x (lat, then long). As long as you reorder the elements in your coordinate array, Leaflet will be happy.
Getting the aesthetics of the map right was a little tricky. I wanted to make sure that a highlighted feature’s outline appears above the other features but below its own fill so you get a bright white border and then a subtler inner border. If you follow the symbol drawing order and compositing option rules in CartoCSS it becomes manageable.
From the failures folder
Here’s what the original mock-up looked like, which we weren’t too far off from. I reworked the top nav hierarchy into two main buttons, added more color and turned the rep detail elements into three columns instead of rows so it was more compact and graphic.