Data Viz Challenge, 2016-14

I've recently been working on fixing my lack of data visualization skills, after starting to read the excellent Data-Driven Security book by Bob Rudis and Jay Jacobs. Also recently, Bob has started posting weekly data visualization challenges for people to work on. Essentially, he is throwing up a dataset, giving a sample viz, and saying "go do something neat with the data". In this week's challenge, he asked us to take a look at the data that HUD publishes annually on the number of homeless people in America.

After downloading the dataset and taking a brief look at the data, I saw that starting in 2011 HUD began capturing the number of sheltered and undeltered homeless veterans. As a vet myself, I thought that this was a good place to start looking. I decided to normalize the data for population (per 100k), and compare the rates of total, sheltered, and unsheltered veteran homelessness across the states. I've seen Mike Bostock's excellent county-level choropleths, and a cool looking choropleth using svg filters to give a layered effect, and wanted to use a similar style at the state level. But first things first, I needed to get the data into a useable format.

I've been programming in JavaScript for a long time, and I'm always trying to see if I can do a task in JS that others use Python or R or whatever for, so I decided to go full JS for this challenge. You can see the Node script that I used to process both the HUD data and the US population data that Bob supplied over at my GitHub fork. What I am doing is reading in the HUD file, combining all the county-level data into state-level for wach year, and putting that into a Javascript object. I then add in the US population data for each year and state to that object, calculate the normalized rates, and then write the resulting object to a JSON file. I also have written another JSON file with the max rate for each year and dataset, which I can put into the charting script later.

From there, I jumped into D3, and started mashing away until I was able to get the chart to look how I wanted it. This part honestly took me the longest, because I'm still learning to use D3 in an efficient way. I still need to add a scale to the chart, because without scales, charts are sort of meaningless. When I get that added, I'll update the GH repo and this post. With that, have a look at the chart below, and let me know what you think.

Note: Please excuse the wonky styles on the select boxes below. I'm working on migrating the styles on this blog, and have run into a few issues like this. Hopefully they'll be resolved soon.

2016-04-11 2pm Edit: I've added a quick and dirty legend using the great d3-legends module by Susie Lu. It still needs work, since the legend covers the viz on small screens. I'm sure there's room for improvement on my data viz game. Let me know in the comments below!

2016-05-01 Edit: I've finally gotten set up on GitLab now for a static page generator. Click here to go over to the interactive choropleth

2015 Homeless Veterans, per capita


comments powered by Disqus