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
end

data.each do |row|
  el = <<-HTML
    
      #{row["state"]}
      #{row["total"]}
      #{row["av-del-rate"]}%
      #row["consumer"]}
      $#{row["gen-budget"]}
      $#{row["tbd"]}
      #{row["fraud"]}
    
  HTML
end

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.

path.click(function(){
  var info = $("td."+it.key).attr("data-"+index);
  $(".details-box").html(info);
});