Visualize the USA's economic recovery with client-side data joins

Sam Kronick
Fri, 20 Jan 2017 06:00:00 -0500

The GIF above visualizes the unemployment rate for each county in the United States in the years surrounding the Great Recession. At a glance, you can see the unemployment rate reach its peak in late 2009, and slowly return to its 2008 levels by 2015. Places such as Imperial County, CA or the Cheyenne River Indian Reservation in Dewey County, SD stand out with consistently high unemployment rates throughout the entire range. General trends, such as high unemployment in the Appalachians and the South and low unemployment throughout the Great Plains, also pop out as the whole country faced tough economic times.

That’s a lot of data to take in at a glance. Fortunately, this kind of beautiful visualization makes this kind of data easier to digest. So how did I make this map?

Joining data

As is often the case, the statistical data I wanted to visualize was not distributed along with the county-level polygon geometry needed to turn it into a choropleth. In this case, I got the unemployment data in a convenient spreadsheet format from the USDA Economic Research Service and polygons from the US Census Bureau. Mapbox Studio allows direct uploading of the .shp files with the polygon data to create vector tiles, but I still needed a way to join my statistical data with these geographic polygons. To solve this problem, I worked with my colleage Ryan Baumann to develop a technique to join and style map data using our data-driven styling features. Ryan wrote an example that shows the core of the technique.

Before we developed this technique, I would have needed to use a separate GIS package to combine my statistical data with the polygon data. I would then have to take the output from the GIS software and upload it to Mapbox Studio to create a vector tileset for visualization. I would need to repeat this process for each year of data I wanted to visualize. With this new technique, I can combine static geometry with dynamic or reconfigurable statistics on the fly, without having to wait for a tileset to upload or a map to render.

Client-side

The technique I used for joining data means that all processing for this visualization happens on the client side in my web browser. It’s plenty fast for this amount of data (and works great even down to datasets with statistics for individual census tracts across the country). Because I didn’t have to pre-process the data and create a new tileset for every change, I could experiment with different interpretations of the dataset quickly, switching between aggregation by state or county for example. The above GIF shows interactions with the tool I built in realtime; the map is re-styled and rendered with almost no delay.

Vector tiles and interactivity

Because the polygon data underlying this visualization is stored as vector tiles, it is delivered quickly and efficiently to the browser, allowing users to zoom in on a region and get a higher resolution view of the data.

Using vector tiles also enabled me to easily implement a hover effect to view statistics for individual counties. There are many tools out there for advanced spatial analysis and visualization, but what I really like about Mapbox is its functionality for creating interactive, shareable visualizations based on your data.

As my colleague Matt Irwin put it:

Modern business intelligence (BI) is more than charts and graphs. Need to identify insurance policyholders in a storm’s path? Compare spending and pedestrian traffic to optimize store locations? Plan delivery routes to avoid traffic and minimize fuel consumption? Mapbox makes answering these questions visual and interactive.

Read more from him about how Mapbox powers business intelligence and spatial analysis apps.

Explore the data yourself

You can try out the interface I built for doing this client-side data join yourself. Check out how fast the map is rebuilt as you change options and try the technique to join data with vector tiles in your own map!