This tutorial shows you how to create six different map data visualizations using the Data visualization component in the Mapbox Studio style editor: Choropleth, Data-driven circles, Data-driven lines, 3D extrusions, Heatmap, and Symbols visualizations.
The Data visualization component is a style component that smart-styles a map layer based on the geospatial data in the layer's source. The component creates an initial data visualization, and you can then customize the appearance of the visualization by changing its component style properties.
In this tutorial you will:
You will need a few resources to get started:
In this tutorial, you will begin with a template style that is subtle, so that your data visualization will be the focus of your map. You will use the Monochrome template style and select the Light variation.
Log into your Mapbox account and navigate to your Styles page, where all your map styles are listed.
For more information about map styles, read the Styles section of the Mapbox Studio manual, or try your Create a custom style tutorial.
To create a new style from your Styles page:
The Studio style editor will open, and you can start designing your custom style.
Now you will simplify your map style so that your data visualization can be the focus of your map. You will also change the base color of the map to a darker color. These changes are optional.
To make these style changes:
#2a3465
.To create a data visualization with the Data visualization component in Studio, you need some geospatial data in a Mapbox-hosted vector tileset.
For this tutorial, you can use existing data in the freely available tilesets below. Continue to Choose a visualization type.
To learn how to upload your own data to a Mapbox tileset, see our Upload data getting started guide.
If you want to preview these tilesets in the Mapbox Studio Tileset explorer, log into your Mapbox account and click on each dataset to view more information:
Now you will add the Data visualization component to your style. When you add this component, you will choose your visualization type.
Click a visualization type below to continue this tutorial:
If you have completed the steps above to create a new style and prepare your data, you can follow the steps in this section to create a choropleth map to visualize the change in average annual temperatures in the United States.
You will use the county temperature change data from the The Washington Post's "2ºC: Beyond the Limit" series to set the colors of regional polygons:
#EDF51C
will represent counties with warmer temperatures.#67009E
will represent counties with cooler temperatures.To add the Data visualization component to your style:
mapbox.brt3djy1
The component will select and style a field from the wapo-county-temp-change-c168xj
tileset automatically when you add it to the map. Zoom to the contiguous United States to get a better sense of the data on your map.
By default, the component will select the field tempchg
to style Color from the palette Polar
.
See steps 7 to 11 in this video:
In these optional steps, you will refine the appearance of your visualization by changing the color palette. The field tempchg
has values above and below 0
. To make the visualization reflect divergence from 0
with color, the second stop should be 0
instead of the default value of 1.774
.
1.774
to 0
.To adjust the colors in your visualization, you will change the palette selection.
Temperate
to see how a different color palette changes the appearance of your visualization.For this data, higher values indicate warmer temperatures and lower values indicate colder temperatures.
See steps 12 to 14 in this video:
To begin developing with your new map style, continue to Publish your style.
Here is the choropleth visualization you created following the steps in this tutorial:
To begin developing with your new map style, continue to Publish your style.
If you have completed the steps above to create a new style and prepare your data, you can follow the steps in this section to create a data-driven circles visualization using data from the USGS' Earthquake Hazards Program. Your data-driven circles map will visualize all reported earthquakes in 2021, using different circle sizes and colors depending on the magnitude of each earthquake.
To add the Data visualization component to your style:
mapbox.5sq1s796
The component will select and style a field from the 2021-earthquakes-1vushc
tileset automatically when you add it to the map. Zoom out to see the entire Pacific Ocean to get a better sense of the data on your map.
By default, the component will select the field dmin
to style circle size and a single color from the palette Polar
for all circles.
See steps 7 to 11 in this video:
In this optional step, you will use the data in your tileset to control the style of an additional paint property in your style.
By default, all features in data-driven circles are the same color. You will change your visualization to color each circle according to the magnitude of the earthquake it represents.
To make color
a data-driven property, you will need to add a data field in the Color property.
mag
(the value for the magnitude of an earthquake) as the data field for Color.To adjust the colors in your visualization, you will change the palette selection.
To emphasize the magnitude of each earthquake on the map, adjust the following component properties to enhance your visualization:
mag
as the data field for Size.0.1
, 3
, and 7
.0.2
.See steps 12 to 18 in this video:
Here is the data-driven circles visualization you created following the steps in this tutorial:
To begin developing with your new map style, continue to Publish your style.
If you have completed the steps above to create a new style and prepare your data, you can follow the steps in this section to create a data-driven lines visualization using data from the Hawaii Statewide GIS Program.
Your data-driven lines map will visualize wind speeds in the Hawaiian islands.
To add the Data visualization component to your style:
mapbox.6w7f94rz
The component will select and style a field from the hawaii-wind-speed-30m-bn2n9o
tileset automatically when you add it to the map.
65
.By default, the component has selected the field speed_mps
to style line width and a single color from the palette Polar
for all lines.
See steps 7 to 12 in this video:
These optional steps describe ways you can style additional properties with data-driven values, or refine the appearance of your visualization.
speed_mps
as the data field for Size.0.7
.See steps 13 to 16 in this video:
Here is the data-driven lines visualization you created following the steps in this tutorial:
To begin developing with your new map style, continue to Publish your style.
If you have completed the steps above to create a new style and prepare your data, you can follow the steps in this section to create a 3D extrusions visualization using data from the freely available mapbox.hist-pres-election-county
tileset.
Your 3D extrusions map will visualize the margin of victory and percentage of voters who supported a presidential candidate of a specific political party in each American county in a past election.
To add the Data visualization component to your style:
mapbox.hist-pres-election-county
12. Zoom out to see the United States to preview the resulting appearance of your visualization. Note that this visualization type is best viewed when pitched.
The component will automatically select and style data from a field in your selected data source for Height.
By default, the component has selected the field 2012_oth_pct
to style height and a single color from the palette Polar
for all polygons. You are interested in visualizing the margin of victory and need to select a different field from your tileset.
2008_mov_pct
as the data field for Height.The data in the 2008_mov_pct
field of the mapbox.hist-pres-election-county
tileset contains percentage values, so you can use 0
, 50
, and 100
as stop values to generate an appropriate distribution of height for this data.
See steps 7 to 14 in this video:
To learn more about the data in the mapbox.hist-pres-election-county
tileset, refer to our presidential elections
tilesets demo.
To change which data from your tileset is being visualized, you will adjust the Color settings in the component controls.
15. In the Color field, try selecting 2008_dem_pct
or 2008_rep_pct
to visualize the percentage of voters who supported a Democratic or Republican candidate in the 2008 presidential election. See how your data selection changes the appearance of your map.
To adjust the colors in your visualization, you will change the palette selection.
Adverse
to see how the palette changes the appearance of your visualization.To refine the color palette settings, you will adjust the Color settings in the component controls.
The data in the 2008_dem_pct
field of the mapbox.hist-pres-election-county
tileset contains percentage values, so you can use 0
, 50
, and 100
as stop values to generate an appropriate distribution of the color gradient for this data.
Counties where the vote percentage for Democratic candidates was lower are shaded red and counties where the percentage was higher are shaded blue.
To see the vivid colors in this palette, you can adjust the Opacity setting by dragging the slider to the right.
Finally, to see more of the spectrum of colors in the Adverse
palette, you can add up to a total of seven stops to the Color property. The component will add them equally between your existing stops, preserving the distribution you set earlier. For this example, you will add two additional stops to the three stops already in your component.
See steps 15 to 19 in this video:
Here is the 3D extrusions visualization you created following the steps in this tutorial:
To begin developing with your new map style, continue to Publish your style.
If you have completed the steps above to create a new style and prepare your data, you can follow the steps in this section to create a heatmap visualizing the density of trees in the city of Pittsburgh, Pennsylvania.
You will use data from the freely available mapbox.9jkhs7qz
tileset that includes point data for individual trees in this area.
To add the Data visualization component to your style:
mapbox.9jkhs7qz
Pittsburgh, Pennsylvania
The component smart-styles your data into three initial buckets based on feature density.
To customize the colors or opacity of your heatmap visualization, or the radius for its feature clusters, you can use the component properties panel. These steps are optional.
Continental
with the colors reversed.To change the granularity of your heatmap, you can add or remove stops to your color palette.
For more fine-tuned control over your heatmap visualization, you can style it as a layer using the Override action.
Here is the heatmap visualization you created following the steps in this tutorial:
To begin developing with your new map style, continue to Publish your style.
If you have completed the steps above to create a new style and prepare your data, you can follow the steps in this section to create a Symbols visualization of mountain summits in Rocky Mountain National Park in Colorado, using unique symbols for each summit depending on which county it is in.
You will use data from the freely available mapbox.0xjxguyu
tileset, which contains point data for summits in this region.
To add the Data visualization component to your style:
mapbox.0xjxguyu
Rocky Mountain National Park
z10
to preview your visualization. To see your current zoom level, check the last three values in your browser URL (/#{zoom}/{lng/{lat}
) as you edit your style in Mapbox Studio.Now you will choose which field from your data set will control the style of your symbols.
In this tutorial, you will use a unique symbol for each county:
Grand
county will use a circle-15
icon.Boulder
county will use a square-15
icon.Larimer
county will use a star-15
icon.Jackson
county will use a triangle-15
icon.COUNTY_NAM
by clicking on the data field and selecting the new field.The component’s smart styling algorithm selects a data field and creates a scale with its values from your custom data with up to seven different geometric Maki icons.
FEATURE_NA
by clicking on the data field and selecting the new field.To customize the colors your symbols, the symbols themselves, or other component properties, you can use the component properties panel. These steps are optional.
You can also use the controls on the component properties panel to resize icons, change the label font, adjust the halo color around icons, or allow icons to overlap.
For more fine-tuned control over your symbols visualization, you can style it as a layer using the Override action.
Here is the symbol visualization you created following the steps in this tutorial:
To begin developing with your new map style, continue to Publish your style.
When you have finished editing your map style, publish your changes by clicking the Publish button in the upper right side of the screen. When you click the publish button, a window will display the difference between the previous and current version of this style. If you're happy with the changes, click Publish. Your style will now be available to share from a variety of tools and applications.
Congratulations! You've learned how to use Mapbox Studio data visualization component to create custom data visualizations.
Mapbox Studio provides a wide variety of ways to use your new map style. You can use this map directly on your website or in a web or mobile application. Take a look at the Publish style section of the Mapbox Studio Manual to see all the ways you can use your style!