How The Pudding team uses MapboxVisual storytelling on population, music, and Wikipedia mapsMapboxBlockedUnblockFollowFollowingJun 7By: Matt Daniels, Journalist-Engineer and Business lead/CEO at The PuddingAs a member of the visual journalism team at The Pudding, I’ve spent the past year exploring how to integrate Mapbox into our editorial process.
The Pudding is a digital publication that explains ideas debated in culture with visual essays and maps are a crucial visual tool used to unravel some of the complexities of these debates.
Among all of the mapping tools available, I’ve found Mapbox extremely useful for creative exploration without code, using Mapbox Studio, and then moving to full code-driven customization with Mapbox GL JS.
After repeating this process many times, I’ve encountered a few important use cases for using Mapbox as a storytelling and visualization tool.
Here’s just a few:Data-driven visualization on “Human Terrain”“Human Terrain” helps readers understand and observe the scale of population change globally over the past 30 years.
This project involved hundreds of gigabytes of population data and creating 3D extrusions, which allowed readers to see details that could have been overlooked otherwise.
I initially explored the idea of using a tool such as deck.
gl or D3, but that required loading the population data into the browser.
Even if done for a single location, I’d expect at least 10–20MB of data would need to be downloaded.
Browsing a globe might require hundreds of megabytes of data.
By using Mapbox, I was able to render the data as tiles.
Essentially, depending on where the reader was viewing the map (and at what zoom level), only the necessary data was loaded in Mapbox’s nifty vector tile format.
An exploration of New York City’s population now only required a handful of image tiles, and Mapbox GL JS easily handled the 3D extrusions.
In short, using tiles allowed the project to load and perform faster than any other alternative I explored.
Responsive map rendering on “Population Mountains”As a complement to “Human Terrain”, “Population Mountains” takes a closer look at cities and the way we perceive their populations.
In this version of the population data project, I wanted to render simple full-bleed images of certain areas.
This meant that the size and zoom needed to fit the reader’s browser size.
Instead of downloading specific resolutions (and stretching the image), I used Mapbox’s Static API to render a map that was the exact width and height of the reader’s browser.
For each city, I also wanted to show its population at several zoom levels.
By using the Static API, I didn’t have to re-download the image after making a small change.
Mapbox loaded the latest version of the map as a PNG according to any parameters specified in the URL.
Complex choropleths on “The Cultural Borders of Music”Last year, I had a vision for a map that would show the most popular song with the most detailed geography I could find.
I ended up using YouTube music data, which allowed me to visualize the data by city.
In an ideal world, I’d be able to create a map that showed the exact geographic line where the most popular song changed.
In order to do that, I used Mapbox Boundaries.
I used each city’s latitude and longitude against the equivalent of US counties, postal boundaries, or administrative regions.
Using the Tilequery API, I could retrieve the data for each geographic boundary.
This allowed me to create an incredibly complex choropleth, where areas of the world are color-coded against its most popular song, allowing readers to discover musical regional trends.
Collision detection on “People Map”For our latest project, we created a dataset of famous residents from every US city (using Wikipedia).
The result was something akin to “every city’s most famous resident,” a riff on a common phrase you might find when entering new cities; for example, Great Barrington, MA, home of W.
E.
B.
Du Bois.
We also made a UK version of the map, available here.
But visualizing thousands of cities on a map is difficult.
20th-century mapmakers relied on careful spacing and font sizing to display a dense amount of information.
With interactivity at our fingertips, we used a method known as collision detection.
For example, here’s what the data looks like if we were to map each city’s most Wikipedia’d resident, without collision detection:Mapbox has out-of-the-box collision detection.
It knows when text is overlapping and we can feed it some logic to prioritize certain label’s visibility based on its importance.
In this case, we only show the most popular Wikipedia pages in the entire dataset.
From there, we create new layers at a lower priority, so if there’s enough space, they’ll appear on the map.
This is especially useful at different zoom-levels, where white space opens up as we zoom in on the US, allowing for names to be displayed.
To aid readers’ understanding of where labels are hidden, we added in green circles with a radius based on the number of Wikipedia views.
We also used data-driven styling to set the font size of the labels, resulting in a clean and clear label-filled map.
We’re very excited to continue to use Mapbox for visual, cartography-driven storytelling.
If you have any questions about these projects and the technical implementation, absolutely reach out to our team: sup@pudding.
cool.
Matt Daniels (@matthew_daniels) | TwitterThe latest Tweets from Matt Daniels (@matthew_daniels).
Visual Journalism on The Pudding @puddingviz Email…twitter.
com.