How to create your first choropleth map in Mapbox
Few things grab a reader’s attention quite like a map. While bar and line charts have their place in data visualization, a choropleth map is a great option if you’re looking to do something a little more sophisticated.
For static maps, free tools like QGIS work well, but if you want to add interactivity and dynamic features, Mapbox is the way to go. I’ll walk you through how I used Mapbox to create the base of the map for my story on rent bidding in Greater Boston.
To get started, you will need:
- A Mapbox account (sign up here)
- Some geospatial data (I’ll show you where to get this)
- A relaxing breathing technique for when you inevitably run into issues
The setup
Once you sign up for an account, navigate to the dashboard. Once you’re there, click on the “Create a map in Studio” button:
Click the dropdown arrow on the button called “New style” and select “Classic template” (I find the map features are easier to customize in the classic template). Then, you should see a popup that looks like this:
For my project, I chose the monochrome style in the dark variation, but you can choose whichever style makes sense for the story you’re telling. Once you’re inside of your project, you should see this panel containing all the feature layers in the map. Here, you can upload the GeoJSON file containing the data you want to visualize. Simply click: “+” → “Custom layer” → “Upload data.”
Note: the free tier of Mapbox only allows for 20 data uploads per a month. I never found this to be an issue, but it does mean you should try to ensure your data is cleaned and shaped properly before uploading to Mapbox. If you do run up against the limit, Mapbox allows you to continue adding more dataset layers through their API, but this is a more technically involved process.
My rent bidding project uses rental data from the MLS (Multiple listing services), a database of properties sold and rented. The MLS, however, is restricted for use by real estate professionals. The trickiest part of most any data project is obtaining the data and that was especially true in this case. Thankfully, an editor at The Boston Globe was able to help me obtain the data I needed from the MLS through the organization’s access.
For this tutorial, the U.S. Census has lots of great data available in a GeoJSON format, meaning that it has both the geographic shapes and the stats of interest. If you’re following along and need some data to work with, you can find a GeoJSON file of Boston-area poverty rates on a ZIP Code level here.
Making your map pretty
Once your GeoJSON file is uploaded, click on the box under “Source” and find your dataset. After you select it, you should see the shapes of the ZIP Codes highlighted like this:
A good start! But not quite what we want.
In order to make a choropleth map from the new layer, you need to switch from the “Select data” tab to the “Style” tab. Next, click “Color” → “Style across data range.” You’ll see a popup containing the names of every column in your dataset. Pick the column that contains the data you want to show in the map. For me, that’s “PERCENT_POSITIVE_PRICE_DIFFERENCE” (I like to make my variable names big, clear, and maybe a little ugly ¯\_(ツ)_/¯.)
Now, you can style the color of each ZIP Code based on the value of the column you chose. To start, let’s make the lowest value grey and the highest value blue. Here’s what that looks like:
Now it’s starting to look more like the choropleth map we want. If you’re happy, you can leave it like this. Another option is to set the “Rate of change” from “linear” to “stepped.” This lets you not only set specific “steps” in the data, say every five percentage points, it also lets you select the colors for each of those steps. Here’s what that looks like:
If you decide to put the data into “bins” like this, you’ll want to use a tool like colordesigner.io’s gradient generator. This lets you select the start and end colors, tell it how many steps you have, and it will provide you HEX color codes you can paste into Mapbox to create an even gradient across your steps.
Side note: If you want map features like place names or roadways to display above the choropleth layer, just drag your data layer beneath those features in the layers panel.
Play around with the fill and stroke colors and opacity and once you’re satisfied with the look of the map just click the publish button.
From Studio to Story
Your map is looking great in Mapbox’s Studio editor, but how do you get it into your story? There’s a couple of options, but the simplest one is an iframe.
If you’ve ever used no-code data viz tools like Datawrapper or Flourish you’re likely familiar with iframes. Besides their simplicity, they’re compatible with virtually every CMS, meaning they’re easy to integrate into a story. To get an iframe for your map, just click the “Share” button next to “Publish” and copy the iframe code in the “Website embed” box. Then, you just add that iframe into the part of the story where you want the map to appear.
But wait!
Before we add the iframe to our story and call it a day, there’s still one thing left to do. We need to create a restricted access token for our map. An access token is a string of numbers and letters that functions like a special key to give access to your map. This token is included in the iframe you copied. Along with providing your iframe access to the map, the token also gives permission for API calls to be made with your Mapbox account.
By default, Mapbox uses an unrestricted “public token” for any map you make. The issue is that anyone could see that token and start using it for their own projects. Since Mapbox’s free tier only allows for a certain number of API calls in a given period, we don’t want anyone else to use our token.
In most cases, people have to use more coding-intensive means to hide their token, so it can’t be stolen. Thankfully, Mapbox offers a simpler alternative. Back on the account dashboard page, we can create a new token and restrict its access so it only works on the URLs we want — namely the URL of our story.
To do so, just click “Create a token,” give it a descriptive name, and add the URL of the webpage you want the map to display on. Finally, replace the default token in the iframe with your new restricted token.
And voilà!
The bells and whistles
We have an interactive choropleth map in our story, great! It lets you pan around, zoom in, and …. well that’s pretty much it. It’s a good start, but you’re probably already saying “This would be better if it had a legend to explain the colors, and maybe some popups for each of the ZIP Codes, oh and a search bar so I can see what the data is like where live.” I’d say you’re right! And not just because I already had all those thoughts myself.
In the next tutorial, we’ll look at how to create an interactive dashboard in Mapbox.
- How to create an interactive dashboard in Mapbox - November 7, 2024
- How to create your first choropleth map in Mapbox - October 22, 2024
- How I scraped and visualized over 1,500 NPR Tiny Desk concerts - September 17, 2024
