Five of the nation's largest banks were required to pay states a total of $2.5 billion as part of this year's mortgage settlement. The money was intended to alleviate the foreclosure crisis, but many states aren't exactly using the funds that way. We made a map of what each state is doing with the millions of dollars it received.
Two reporters, Paul Kiel and Cora Currier, called every state's attorney general over the course of a few weeks to ask how their state was planning to spend the money. What they found is that while some states were planning to use the money to help consumers (by funding housing counselors, legal aid organizations, or providing direct payments to struggling homeowners), other states were going to divert the money into their general fund to patch budget holes, or toward programs to attract new businesses.
A map would not normally be our preferred way to visualize this data. Even though this was state-specific information, we’re reluctant to make maps simply to display state data, and prefer to use them only when location matters. But we wanted the presentation to be more interesting than a dry table, so we started mapping the data to see if anything interesting showed up.
We first tried making a choropleth map showing just the amount of money each state got from the settlement. But after noticing that only Texas, California, Florida, Illinois and New York stood out, it was clear this wasn't anything more than a population map.
Next, we tried mapping the settlement money each state was funneling towards consumers – and ended up with a pretty sparse map. The same thing happened when we mapped consumer money divided by the number of delinquent loans in the state. A few states were giving 100% of their settlement money to consumers, but most states were giving nothing, which meant a map without much variation or geographic pattern. It didn't seem that a map added anything beyond the headline.
So at the end of the day (literally around 7 p.m.) we decided that this was a map that just shouldn't be a map. We scrapped the idea entirely, deciding to go with just a comprehensive sortable table. But two things changed overnight that caused us to reconsider.
First, the New York Times published a story on the same topic – emphasizing how many states were not directing their settlement money toward homeowners. Since our story and table weren’t going to break news, they definitely had to add something beyond that finding. That something was our comprehensive dataset, which included a dollar-by-dollar breakdown. Finding a way to give users an interface to comprehend our deep research in a fast, understandable way became our biggest priority.
Second, we began playing around with the Washington Post's just-published election map, which organized a lot of information about unemployment, race, income, etc., onto a map of electoral votes. The Post maps were a very useful, multilayered way to explore sparse data.
So we decided to map not simply the total money received, or aid to homeowners, or money to the general fund, but instead to map all of these categories. We thought being able to quickly switch from one view to another would let our readers tell the story for themselves. We also published a table underneath the map to give readers who wanted it a deep drill-down into the specifics of each state.
The Nerdy Stuff
We made an SVG map based on Natural Earth Data. Here’s the code for that map. We used Raphael.js, a library for easily drawing vector graphics on the web, to fill in the colors corresponding to the data, as well as add the hover and click functions to each state.
To make the table, we used the Ruby gem FasterCSV to parse a CSV file containing all the information for each state and generate an HTML table. This was really easy with a little bit of Ruby.
data = 
FasterCSV.foreach("public/homeowner.csv", :headers => true) do |row|
data << row
data.each do |row|
el = <<-HTML
The next hurdle was linking the data to the map. First we needed all the data accessible so that when you clicked on each state, it’s specific information appeared. Since our SVG map already had an ID for each state (the state abbreviation), we added a state-abrv class to each state in the table.
Now each state in the table and each state in the map shared a common element, which we could use to write our click function. But each time a state was clicked, we didn’t want all the data to appear at once – we needed to limit it to just one category (like Aid to Homeowners or General Fund). We did this by giving each state five data attributes that corresponded to each of the five categories in the sidebar.
I hadn’t realized how easy it was to link data in a CSV file to the DOM through data-attributes. But with those attributes in place, it was pretty simple to write a function that would bring up only the appropriate data when you clicked on a specific sidebar category and then an individual state.
var info = $("td."+it.key).attr("data-"+index);
path means each state in the map,
it.key corresponds to the state-abrv, and
index is just a number from 1-5 that matches both the data attribute and one of the five maps.
Making the table sortable was straightforward with Tablesorter.js, and with just a few more lines of code we made each link in the left sidebar trigger the table underneath to sort by the corresponding category. Linking the sidebar categories (total money, delinquency rate, etc.) to the table emphasized how each view of the map was tied to a particular column. We tried to further emphasize that map/table connection by having each column change color slightly when it was selected.
We also used our own open source StateFace font, which is made of tiny state shapes, to go along with each state name.
Latest Stories from ProPublica
Close this screen
Close this screen
Republish This Story for Free
Thank you for your interest in republishing this story. You are are free to republish it so long as you do the following:
- You have to credit ProPublica and any co-reporting partners. In the byline, we prefer “Author Name, Publication(s).” At the top of the text of your story, include a line that reads: “This story was originally published by ProPublica.” You must link the word “ProPublica” to the original URL of the story.
- If you’re republishing online, you must link to the URL of this story on propublica.org, include all of the links from our story, including our newsletter sign up language and link, and use our PixelPing tag.
- If you use canonical metadata, please use the ProPublica URL. For more information about canonical metadata, refer to this Google SEO link.
- You can’t edit our material, except to reflect relative changes in time, location and editorial style. (For example, “yesterday” can be changed to “last week,” and “Portland, Ore.” to “Portland” or “here.”)
- You cannot republish our photographs or illustrations without specific permission. Please contact [email protected].
- It’s okay to put our stories on pages with ads, but not ads specifically sold against our stories. You can’t state or imply that donations to your organization support ProPublica’s work.
- You can’t sell our material separately or syndicate it. This includes publishing or syndicating our work on platforms or apps such as Apple News, Google News, etc.
- You can’t republish our material wholesale, or automatically; you need to select stories to be republished individually. (To inquire about syndication or licensing opportunities, contact [email protected].)
- You can’t use our work to populate a website designed to improve rankings on search engines or solely to gain revenue from network-based advertisements.
- We do not generally permit translation of our stories into another language.
- Any website our stories appear on must include a prominent and effective way to contact you.
- If you share republished stories on social media, we’d appreciate being tagged in your posts. We have official accounts for ProPublica on Twitter, Facebook and Instagram.
Copy and paste the following into your page to republish: