Visualizing Student Loan Data

I've been wanting to play around with D3's geographic visualization tools for a while now, so for my latest visualization I decided to see what I could find on on the internet. This lead me to data.gov, which is a fantastic resource. I can't imagine I will ever have trouble finding data to fuel my personal projects ever again.

Unfortunately, processing the data and building an API around it took longer than expected. With the additional tax of stomach flu, I didn't get nearly as far as I would have wanted with this visualization. Still, here's what I have:

loans

source: https://github.com/nhunzaker/student-loan-visualization

Finding the data

I was able to find student loan information on the Title IV website. There is a wealth of information here. For this project, I strictly focused on subsidized loans (I'd like to visualize more in the future).

The only hiccup with this data is that the location information is given through zip codes. To patch in this information, I drew from a few documents the Census Bureau provides. Unfortunately, the tables they provide are not as complete as I required, but I was able to patch up most of it by progressively importing over several years time.

Displaying the data

In order to show the data, I had to come up with some way to serve it. I could have served a flat json file, however I've been wanting to work with grape for a while now. Grape is a remarkable ruby library for quickly building APIs:

module Loans
  class API < Grape::API
    version 'v1', using: :header, vendor: 'nhunzaker'
    format :json

    resource :zipcodes do
      desc "Return a list of all zipcodes."
      get '' do
        Zipcode.all
      end
    end

    # and so on...
  end
end

Then came time to present the information using D3. D3 actually makes it fairly easy to plot geographic information. One just has to set the scaling to the correct parameters, find a source of GeoJSON, and do some basic setup.

d3.json("us-states.json", function(json) {
    var svg = d3.select('body').append('svg').attr({
        height : height,
        width  : width
    });

    svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr({
            class : 'state',
            d     : path
        });
});

Final thoughts

This is very cool stuff. I definitely plan to use data.gov more in the future. Their data sets on energy utilization and other utilities is fascinating. I look forward to the next installment!