Project Profile: Animating Census Bureau Data


These past few months we’ve seen an incredible number of creative projects from students in our Front-End Development course. We asked current student Shawn Mathew to walk us through his latest Census Bureau Hack that was just featured on our July Honor Roll. Who knew that the messy world of Census Bureau data could be this fun to tinker with?

What was your inspiration for this project?

The Census Bureau API has an enormous amount of data so I wanted to take a crack at displaying some of that data in a way that would be easy to understand. D3.js provided the perfect tool to use my new front-end development skills to display the data in the DOM. Since I was using state level data, I decided on using a bar chart to be able to visually compare each state against one another. Also, it’s natural to want to know which state is highest or lowest for each data point so I incorporated being able to sort the data by ascending or descending order. 

What difficulties did you encounter?

The Census Bureau API is definitely not user friendly. The majority of my time on this project was spent trying to figure out how to get the specific data I needed out of the JSON. The Census Bureau uses codes for each type of data and their site doesn’t do a good job of explaining it well, so I used “console.log” a lot in order to see what data I was getting, as well as looking at the raw XML file of the data to find out which code goes with which data.

Why did you use the D3 library? 

D3 offered a really convenient way for doing everything I wanted once I became accustomed to the D3 workflow. That workflow entails creating the elements to be displayed (the actual bars in the bar chart), binding a data point to an element, and then having that element change (or do whatever you want in the DOM) based on the data value. That is why every bar in the bar chart is a different height; each corresponds to a different value. 

In this case, each bar corresponds to a state and also a specific data point based on which topic you choose in the drop-down menu.  D3 has a lot of built-in functions, a couple of which enable sorting by ascending or descending order.  The built-in functions are very similar to jQuery so it can be learned pretty quickly. D3 also works well with jQuery; for instance, you’re able to use jQuery selectors.

Keep an eye out for more Project Profiles from our wonderful Thinkful students!