Visualizing 2012 census estimates using CartoDB and Leaflet

I’ve been tinkering around with some new mapping tools lately, and figured I’d put them to good use by displaying the 2011-2012 population estimates released last week by the U.S. Census Bureau. The inherently geographical nature of the census makes it a data set just begging to be mapped.

Rather than the de facto Google Maps JavaScript API V3, I decided to go with CartoDB and Leaflet to see what I could produce.

As I mentioned in a recent post, CartoDB offers an excellent Fusions-esque interface, although it allows for far less front-end customization and requires more beneath the hood programming. Nonetheless, CartoDB can make pretty maps right out of the box, which you can then fully customize using the CartoDB API and basic SQL statements. There’s one caveat, however: The service only allows you to upload 5 tables for free. That could be a dealbreaker for cash-strapped news organizations and freelance data journalists.

Anyhow, I downloaded a .zip shapefile package of all 159 Georgia counties from the U.S. Census Bureau, then brought the package into CartoDB using the service’s default upload interface. Using Excel, I calculated the percent change from the most recent population estimates to last year’s estimates. I then added the resulting values as a column in my CartoDB table, which you can see here.

After playing a bit with the API, I was able to format a diverging chloropleth map from my table with the following style parameters, written using 0to255 to ensure an equidistant color scheme:

#statewidepop {
   line-color:#FFFFFF;
   line-width:1;
   line-opacity:0.52;
   polygon-opacity:1;
}
#statewidepop  {
   polygon-fill:#558740
}
#statewidepop  {
   polygon-fill:#609948
}
#statewidepop  {
   polygon-fill:#6AA84F
}
#statewidepop  {
   polygon-fill:#BECFA8
}
#statewidepop  {
   polygon-fill:#D0D8BB
}
#statewidepop  {
   polygon-fill:#B8CCA1
}
#statewidepop  {
   polygon-fill:#D9DCC4
}
#statewidepop  {
   polygon-fill:#D3BAAF
}
#statewidepop  {
   polygon-fill:#E7D1C5
}
#statewidepop  {
   polygon-fill:#D8A696
}
#statewidepop  {
   polygon-fill:#C36E59
}
#statewidepop  {
   polygon-fill:#BC5942
}
#statewidepop  {
   polygon-fill:#B34027
}
#tl_2009_13_county {
   polygon-fill:#AB2B10
}

Check out the resulting map:

The map above shows the percent change in population from July 2010 to July 2011 in all 159 Georgia counties, as estimated by the U.S. Census Bureau. The darker the green, the higher the positive percent change. The darker the red, the higher the negative percent change. Click on a county to see its percent change.
Continue reading

Overlaying a bubble chart onto a Google map

Others may hate, but I’m a big fan of using bubbles to display data. When implemented correctly (i.e. scaled in terms of area instead of diameter), bubbles can be an aesthetically appealing and concise way to represent the value of data points in an inherently visual format. Bubbles are even more useful when they include interactivity, with events like mouseover and zoom allowing users to drill down and compare similar-sized bubbles more easily than they can in static graphics. So, when I was recently working on a class project on autism diagnoses in New York City, I decided to use bubbles to represent the percentage of students with individualized education plans at all 1250 or so K-8 New York City schools. Continue reading