To get started, you will need:<\/p>\n\n\n\n
- \n
- A Mapbox account (sign up here<\/a>)<\/li>\n\n\n\n
- Some geospatial data (I’ll show you where to get this)<\/li>\n\n\n\n
- A relaxing breathing technique for when you inevitably run into issues<\/li>\n<\/ul>\n\n\n\n
The setup<\/h2>\n\n\n\n
Once you sign up for an account, navigate to the dashboard. Once you\u2019re there, click on the \u201cCreate a map in Studio\u201d button:<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.storybench.org\/wp-content\/uploads\/2024\/10\/SS-1-1200x566.png\")
<\/figure>\n\n\n\nClick the dropdown arrow on the button called \u201cNew style\u201d and select \u201cClassic template\u201d (I find the map features are easier to customize in the classic template). Then, you should see a popup that looks like this:
<\/p>\n\n\n\n![\"\"](\"https:\/\/www.storybench.org\/wp-content\/uploads\/2024\/10\/SS-2-1200x695.png\")
<\/figure>\n\n\n\nFor my project, I chose the monochrome style in the dark variation, but you can choose whichever style makes sense for the story you\u2019re telling. Once you\u2019re 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: \u201c+\u201d \u2192 \u201cCustom layer\u201d \u2192 \u201cUpload data.\u201d
<\/p>\n\n\n\n![\"\"](\"https:\/\/www.storybench.org\/wp-content\/uploads\/2024\/10\/SS-3.png\")
<\/figure>\n\n\n\nNote: 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.<\/p>\n\n\n\n
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\u2019s access. <\/p>\n\n\n\n
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\u2019re 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<\/a>.<\/p>\n\n\n\n
Making your map pretty<\/h2>\n\n\n\n
Once your GeoJSON file is uploaded, click on the box under \u201cSource\u201d and find your dataset. After you select it, you should see the shapes of the ZIP Codes highlighted like this:<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.storybench.org\/wp-content\/uploads\/2024\/10\/SS-4-1200x1032.png\")
<\/figure>\n\n\n\nA good start! But not quite what we want.<\/p>\n\n\n\n
In order to make a choropleth map from the new layer, you need to switch from the \u201cSelect data\u201d tab to the \u201cStyle\u201d tab. Next, click \u201cColor\u201d \u2192 \u201cStyle across data range.\u201d You\u2019ll 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\u2019s \u201cPERCENT_POSITIVE_PRICE_DIFFERENCE\u201d (I like to make my variable names big, clear, and maybe a little ugly \u00af\\_(\u30c4)_\/\u00af.)<\/p>\n\n\n\n
Now, you can style the color of each ZIP Code based on the value of the column you chose. To start, let\u2019s make the lowest value grey and the highest value blue. Here\u2019s what that looks like:<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.storybench.org\/wp-content\/uploads\/2024\/10\/SS-5-1200x761.png\")
<\/figure>\n\n\n\nNow it\u2019s starting to look more like the choropleth map we want. If you\u2019re happy, you can leave it like this. Another option is to set the \u201cRate of change\u201d from \u201clinear\u201d to \u201cstepped.\u201d This lets you not only set specific \u201csteps\u201d in the data, say every five percentage points, it also lets you select the colors for each of those steps. Here\u2019s what that looks like:<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.storybench.org\/wp-content\/uploads\/2024\/10\/SS-6-1200x763.png\")
<\/figure>\n\n\n\n