All docsHelpTutorialsCreate a map data visualization with Studio

Create a map data visualization with Studio

This tutorial will show you how to create a map data visualization by using the Data visualization component in the Mapbox Studio style editor.

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.

We will begin by creating a style, then we will add the Data visualization component to the style. Then we will add custom data for our visualization, select a visualization type, and adjust the appearance of the visualization.

Getting started

You will need a few resources to get started:

  • Mapbox account. Sign up for a free account on Mapbox.
  • Style components. If you are new to style components or to Mapbox Studio, it may help to take a look at the Studio Manual for some tips on working with components.

Create a new style

Log into your Mapbox account and navigate to your Styles page, where all your map styles are listed.

Learn about styles

For more information about map styles, read the Styles section of the Mapbox Studio manual, or try our Create a custom style tutorial.

In this tutorial, we will begin with a template style that is subtle, so that our data visualization will be the focus of our map. We will use the Monochrome template style and select the Light variation.

To create a new style from your Styles page:

  1. Click the New style button.
  2. Choose Monochrome.
  3. Select the Light variation.
  4. Click the Customize button.

The Studio style editor will open, and you can start designing your custom style.

Now, we will simplify our map style so that our data visualization can be the focus of our map. We will also change the base color of the map to a darker color. These changes are optional.

To make these style changes:

  1. Remove unnecessary components by selecting each in the Components panel and clicking the trashcan icon (). Remove Buildings, Place labels, Points of interest, Road network, and Transit.
  2. In the Colors tab, click Base and enter the hex code #2a3465.

Prepare your data

To create a data visualization with the Data visualization component in Studio, we need some geospatial data in a Mapbox-hosted vector tileset.

In this tutorial, we will use existing vector tilesets to create four different visualizations:

  • For the Choropleth visualization type, we'll use data on annual temperature changes for U.S. counties, which contains polygon features.
  • For the Data-driven circles visualization type, we'll use global earthquake data for 2021, which contains point features.
  • For the Data-driven lines visualization type, we'll use wind speed data from the Hawaiian islands, which contains line features.
  • For the 3D extrusions visualization type, we'll use county population data and results for recent U.S. presidental elections, which contains polygon features.

Because these tilesets are freely available for anyone to use, we can move to the next step.

Upload your own data

To learn how to upload your own data to a Mapbox tileset, see our Upload data guide.

Choose a visualization type

Now, we will add the Data visualization component to our style. When we add this component, we will choose our visualization type. This tutorial contains instructions for each of the available visualization types.

Choose a visualization type below to continue this tutorial:

  1. Choose a visualization type to continue this tutorial:

Option 1: Choropleth

In this option, we will create a choropleth visualization using data from the The Washington Post's "2ºC: Beyond the Limit" series about rising temperatures, which analyzes warming temperatures in the United States. Our choropleth map will visualize change in average annual temperature from 1895 to 2019.

To add the Data visualization component to your style:

  1. In the Components panel, click the plus icon (+) and select Data visualization.
  2. Select your data source by clicking the Source field, then click the Add source by ID tab.
  3. Paste the tileset ID mapbox.brt3djy1 into the search box, and click Find.
  4. Click Select data visualization type to continue.
  5. Click Select Choropleth to add the component to your style.

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 8 to 12 in this video:

Change 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. Click the second stop value for Color from its default value of 1.774 to 0.

To adjust the colors in your visualization, we will change the palette selection.

  1. In the Colors tab of the Component panel, click Choropleth to view the three colors in its current palette. Click the drop-down menu to change the color palette selection. Try 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.

  1. To make your map reflect the temperature visually, click the Reverse palette button next to the drop-down.

See steps 13 to 15 in this video:

Here is the choropleth visualization we created following the steps in this tutorial:

  1. If you want to experiment with additional styling options for your choropleth map, adjust the following settings in the component controls:
  • To add more stops to your color palette, click + Add stop and enter a value.
  • To show or hide outlines on your polygons, toggle the control for Stroke.
  • To show or hide labels on your map, toggle the control for Labels.
  • To apply transparency to your polygons, drag the slider for Opacity.

Option 2: Data-driven circles

In this option, we will create a data-driven circles visualization using data from the USGS' Earthquake Hazards Program. Our data-driven circles map will visualize all reported earthquakes in 2021 by magnitude.

To add the Data visualization component to your style:

  1. In the Components panel, click the plus icon (+) and select Data visualization.
  2. Select your data source by clicking the Source field, then click the Add source by ID tab.
  3. Paste the tileset ID mapbox.5sq1s796 into the search box, and click Find.
  4. Click Select data visualization type to continue.
  5. Click Select Data-driven circles to add the component to your style.

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 selecy the field dmin to style circle size and a single color from the palette Polar for all circles.

See steps 8 to 12 in this video:

Take your visualization to the next level (optional)

By default, all features in data-driven circles are the same color. To make color a data-driven property, you will need to add a data field in the Color property.

  1. Add mag (the value for the magnitude of an earthquake) as the data field for Color.

To adjust the colors in our visualization, we will change the palette selection.

  1. In the Colors tab of the Component panel, click the drop-down menu to change the color palette selection. Try Temperate to see how the palette changes the appearance of your visualization.

To emphasize the magnitude of each earthquake on the map, adjust the following component properties to enhance your visualization:

  1. To change or add a data field for a data-driven property, select a new data field from the list. This example uses mag as the data field for Size.
  2. To adjust the stop values for Size and Color, select the existing values and enter custom values of your choice. This example uses three stops for each: 0.1, 3, and 7.
  3. To apply transparency to your circles, drag the slider for Opacity. This example shows opacity at 0.2.
  4. To turn off the outlines on your circles, toggle the control for Stroke.
  5. To adjust the size of all circles on the map together, drag the slider for Adjust sizing. This example shows the sizing slightly above the default setting.

See steps 13 to 19 in this video:

Here is the data-driven circles visualization we created following the steps in this tutorial:

Option 3: Data-driven lines

In this option, we will create a data-driven lines visualization using data from the Hawaii Statewide GIS Program. Our data-driven lines map will visualize wind speeds in the Hawaiian islands.

To add the Data visualization component to your style:

  1. In the Components panel, click the plus icon (+) and select Data visualization.
  2. Select your data source by clicking the Source field, then click the Add source by ID tab.
  3. Paste the tileset ID mapbox.6w7f94rz into the search box, and click Find.
  4. Click Select data visualization type to continue.
  5. Click Select Data-driven lines to add the component to your style.

The component will select and style a field from the hawaii-wind-speed-30m-bn2n9o tileset automatically when you add it to the map.

  1. Use the geocoder in the top right corner of Studio to navigate to the Big Island of Hawaii to get a better sense of the data on your map. Note that this data is best viewed when the map is pitched at a value around 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 8 to 13 in this video:

Refine your visualization

  1. To change or add a data field for a data-driven property, select a new data field from the list. This example uses speed_mps as the data field for Size.
  2. To add more stops to Size or Color, click + Add stop and hit enter or enter custom values of your choice. This example uses seven stops for Color, all recommended by the component when the stop was added.
  3. To apply transparency to your lines, drag the slider for Opacity. This example shows opacity at the default setting of 0.7.
  4. To adjust the size of all lines together, drag the slider for Adjust sizing. This example shows the sizing slightly below the default setting.

See steps 14 to 17 in this video:

Here is the data-driven lines visualization we created following the steps in this tutorial:

Option 4: 3D extrusions

In this option, we will create a 3D extrusions visualization using data from the freely available mapbox.hist-pres-election-county tileset. Our 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:

  1. In the Components panel, click the plus icon (+) and select Data visualization.
  2. Select your data source by clicking the Source field, then click the Add source by ID tab.
  3. Paste the tileset ID mapbox.hist-pres-election-county into the search box, and click Find.
  4. Click Select data visualization type to continue.
  5. Click Select 3D extrusions to add the component to your style.
  1. 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. We are interested in visualizing the margin of victory and need to select a different field from our tileset.

  1. To change or add a data field for a data-driven property, select a new data field from the list. This example uses 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 we can use 0, 50, and 100 as stop values to generate an appropriate distribution of height for this data.

  1. To adjust the polygon height for this scale, drag the slider for Adjust height all the way to the right.

See steps 8 to 15 in this video:

Learn about this data

To learn more about the data in the mapbox.hist-pres-election-county tileset, refer to our presidential elections tilesets blog post.

Make color a data-driven property

To change which data from our tileset is being visualized, we will adjust the Color settings in the component controls.

  1. 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 our visualization, we will change the palette selection.

  1. In the Colors tab of the Component panel, click the drop-down menu to change the color palette selection. Try Adverse to see how the palette changes the appearance of your visualization.

To refine the color palette settings, we 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 we can use 0, 50, and 100 as stop values to generate an appropriate distribution of the color gradient for this data.

  1. Counties where the vote percentage for Democratic candidates was lower are shaded red and counties where the percentage was higher are shaded blue.

  2. To see the vivid colors in this palette, we can adjust the Opacity setting by dragging the slider to the right.

  3. Finally, to see more of the spectrum of colors in the Adverse palette, we can add up to a total of seven stops to the Color property. The component will add them equally between our existing stops, preserving the distribution we set earlier. For this example, we will add two additional stops to the three stops already in our component.

See steps 16 to 20 in this video:

Here is the 3D extrusions visualization we created following the steps in this tutorial:

Publish your style

When you have finished editing your map style, publish your changes by clicking Publish 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.

Next steps

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!