> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/llms.txt) # Create a map data visualization with Studio This tutorial shows you how to create six different map data visualizations using the Data visualization component in the [Mapbox Studio style editor](https://docs.mapbox.com/studio-manual/reference/styles/#style-editor): - *Choropleth* - *Data-driven circles* - *Data-driven lines* - *3D extrusions* - *Heatmap* - *Symbols* 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. ![An illustration of the six different visualization types available to choose from.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--data-viz-all.a3a3f3f.480.jpg) In this tutorial you will: - Create a new style and customize the basemap - Select a visualization type - Use built-in component controls to adjust the appearance of your visualization - Publish your style ## Prerequisites You will need the following to get started: - **Mapbox account**. Sign up for a free account on [Mapbox](https://account.mapbox.com/auth/signup/). ## Create a new style You will start by creating a new style to showcase your data visualizations using the style editor: 1. Go to your [Styles page](https://console.mapbox.com/studio/). 2. Click the dropdown next to the **New style** button. 3. Select the `Start from scratch` option. 4. Click `Customize`. Now that you have a style, you can start adding layers to render the globe. ![Create a new custom style with Mapbox Studio.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--create-a-custom-style--create-new-style.a32aa38.480.png) ## Customize the basemap Once your style is created, you'll see a blank map. You will need to add components and adjust settings to get the map to render: 1. Add the land and water component to your basemap: - Click **Layers** > **Components** > **Land & water**. - Click any of the landuse layers and set the **Base** color to `#ffffff`. 2. (Optional) Add the **Roads Network** component to add roads to your basemap. - Click **Layers** > **Components** > **Road Network**. 3. (Optional) Add the **Place Labels** component to add labels to your basemap. - Click **Layers** > **Components** > **Place Labels**. 4. Switch the map projection to use Mercator projection: - Open the **Global** tab - Click **Projection** - Under the **Projection Name** dropdown, select **Mercator**. 5. Turn on atmosphere - In the **Global** tab, select **Atmosphere** - Toggle **Enable Atmosphere** to true. You should now see a white map with a mercator projection. Rendering the map as mercator will help set you up for further steps in this tutorial which all use mercator as a base. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--customize-basemap-cd90524c5017acc7eb2e332494dfe83b.mp4). > **Note: Learn about styles** > > For more information about map styles, read the [Styles](https://docs.mapbox.com/studio-manual/reference/styles/) section of the Mapbox Studio manual, or try your [Create a custom style](https://docs.mapbox.com/help/tutorials/create-a-custom-style/) tutorial. Now that you have customized your basemap, you can select which visualization type you will add in the next step. ## Choose your visualization type To create a data visualization with the *Data visualization component* in Mapbox Studio, you need geospatial data in a vector [tileset](https://docs.mapbox.com/studio-manual/reference/tilesets/#what-is-a-tileset). For this tutorial, you can use existing data from freely available tilesets provided by Mapbox, which will be listed in each of the upcoming steps. Select a visualization type below to continue this tutorial: [ ![](https://docs.mapbox.com/help/assets/ideal-img/tutorials--data-viz-choropleth-finished.194e716.480.png) Choropleth A thematic map in which polygons are colored based on a variable in your data. ](https://docs.mapbox.com/help/help/tutorials/create-a-map-with-data-visualization-component/?step=5) [ ![](https://docs.mapbox.com/help/assets/ideal-img/tutorials--data-viz-circles-finished.81e9ba4.480.png) Data-driven circles A thematic map where the size and/or color of point features represents a variable in your data. ](https://docs.mapbox.com/help/help/tutorials/create-a-map-with-data-visualization-component/?step=6) [ ![](https://docs.mapbox.com/help/assets/ideal-img/tutorials--data-viz-lines-finished.1021a88.480.png) Data-driven lines A thematic map where the width and/or color of line features represents a variable in your data. ](https://docs.mapbox.com/help/help/tutorials/create-a-map-with-data-visualization-component/?step=7) [ ![](https://docs.mapbox.com/help/assets/ideal-img/tutorials--data-viz-extrusions-finished.57b022b.480.png) 3D extrusions A thematic map where the height and color of extruded polygon features represents one or more variables in your data. ](https://docs.mapbox.com/help/help/tutorials/create-a-map-with-data-visualization-component/?step=8) [ ![](https://docs.mapbox.com/help/assets/ideal-img/tutorials--data-viz-heatmap-finished.d13f9f3.480.png) Heatmap A thematic map that smart-styles your data based on feature density. ](https://docs.mapbox.com/help/help/tutorials/create-a-map-with-data-visualization-component/?step=9) [ ![](https://docs.mapbox.com/help/assets/ideal-img/tutorials--data-viz-symbols-finished.87bb03d.480.png) Symbols A thematic map where icons represent one or more variables in your data. ](https://docs.mapbox.com/help/help/tutorials/create-a-map-with-data-visualization-component/?step=10) ## Option 1: Choropleth If you have [created a new style](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=2) and [customized the basemap](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=3), 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](https://github.com/washingtonpost/data-2C-beyond-the-limit-usa) to color the map based on temperature. ### Step 1: Add the Data visualization Component To add the *Data visualization component* to your style, follow these steps: 1. In the **Components** panel, click the plus icon **+** and select **Data visualization**. 2. Click the **Source** drop, and click the **Add source by ID** tab. 3. Copy the tileset ID below, paste it into the search box, and click **Find**. ```js mapbox.brt3djy1 ``` 5. Click **Select data visualization type** to continue. 6. Click **Select Choropleth** to add the component to your style. Now you can view your changes by clicking the **Style**. This 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. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--choropleth-step1-983ddf993eee8f36d6572553126b9a91.mp4). Now you will change the colors of the map to better show the temperatures. ### Step 2: Refine your visualization Next, you will refine the appearance of your visualization by adjusting the stops for your data and changing the color palette. The field `tempchg` is the change in the average annual temperature per region in the USA. You will want to track the temperature change above or below 0, to properly reflect the divergence of the temperature and show if the temperatures have dropped or raised over time as well as change the color palette to better showcase these changes. 1. Click the second stop value for *Color* from its default value of `1.774` to `0`. 2. Click the palette dropdown and select **Temperate** from the options provided. 3. Next, flip the colors from the palette. - For this data, higher values indicate warmer temperatures and lower values indicate colder temperatures, so to reflect the temperature visually, you will need to flip the colors. - Click the down arrow button, named **Reverse Palette Order**. - The button name will appear when you hover over the button. 4. 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*. To begin developing with your new map style, continue to [Publish your style](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-componentt/?step=10). Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--choropleth-step2-6f2ec74568a2570c57cde8d07af51f8f.mp4). ### Final product 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](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=11). To learn more about creating a Choropleth map, view the following tutorial: > **Related content (tutorial): [Choropleth map](https://docs.mapbox.com/help/help/tutorials/choropleth-studio-gl-pt-1/)** > > See how to create a choropleth map with Mapbox studio, creating your own custom zoom levels and values. ## Option 2: Data-driven circles If you have [created a new style](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=2) and [customized the basemap](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=3), you can follow the steps in this section to create a data-driven circles visualization using data from the [USGS' Earthquake Hazards Program](https://earthquake.usgs.gov/fdsnws/event/1/). 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. ### Step 1: Add the Data visualization Component To add the *Data visualization component* to your style, follow these steps: 1. In the **Components** panel, click the plus icon **+** and select **Data visualization**. 2. Click the **Source** drop, and click the **Add source by ID** tab. 3. Copy the tileset ID below, paste it into the search box, and click **Find**. ```js mapbox.5sq1s796 ``` 5. Click **Select data visualization type** to continue. 6. 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 select the field `dmin` to style circle size and a single color from the palette `Polar` for all circles. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--data-circles-step1-56cdb731b199bfb23076c7e6c4fb7556.mp4). ### Step 2: Style another data-driven property 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. 1. Next to **Size** click where it says `dmin`. - Select `mag` from the list. - `mag` is the value for the magnitude of an earthquake as the data field. 2. Change the stop values on **Size** - For each of the stops under **Size**, change them according to the following order: - `0.1`, `3`, and `7`. 3. Click the button next to *Color* and select for `mag` from the list that appears. 4. Click the palette drop-down menu and select *Temperate*. - This will change the appearance of your visualization, selecting a new color palette for the range of data points. 5. Adjust the stop values for *Color*, to help highlight the range of earthquake sizes: - Set the three stops as follows: `0.1`, `3`, and `7`. 6. To apply transparency to your circles, drag the slider for *Opacity* and set it to `0.2`. 7. Next, turn off the outlines on your circles, toggle the control for *Stroke*. 8. Increase the size of the circles. - The **Adjust sizing** slider allows you to add a size multiplier to all the circles on screen. - Set this to 1.3 to increase the size of each circle by 30%. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--data-circles-step2-8fe09bf26c0ba7a4510f55cbb4beb5e1.mp4). ### Final product 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](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=11). ## Option 3: Data-driven lines If you have [created a new style](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=2) and [customized the basemap](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=3), you can follow the steps in this section to create a data-driven lines visualization using data from the [Hawaii Statewide GIS Program](https://geoportal.hawaii.gov/datasets/bb945e7852eb4ab0a35ac6fbe4b0827b_35). ### Step 1: Add the Data visualization Component To add the *Data visualization component* to your style, follow these steps: 1. In the **Components** panel, click the plus icon **+** and select **Data visualization**. 2. Click the **Source** drop, and click the **Add source by ID** tab. 3. Copy the tileset ID below, paste it into the search box, and click **Find**. ```js mapbox.6w7f94rz ``` 5. Click **Select data visualization type** to continue. 6. 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. 6. Navigate to Hawaii, USA, using the search bar or by turning the globe, to get a better sense of the data on your map. - NOTE: You must be at zoom level 8 or higher, or the data will not appear. It is recommended to view the map while [pitched](https://docs.mapbox.com/help/glossary/camera/) 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. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--data-lines-step1-b51faa64641dcba87da1cb28e04fecb7.mp4). ### Step 2: Refine your visualization This example uses `speed_mps` as the data field for *Size*, showcasing the speeds of the winds across the map. You can adjust the size and color of this data to create a more readable visualization. 1. Click the button next to Color to assign a data field and select `speed_mps`. - This will change the color of the lines depending on the speeds of the wind. 2. Add 4 more stops to *Color* by clicking **+ Add stop**, to create 7 stops in total. You can leave the stops at their default values. 3. Next, apply transparency to your lines by dragging the slider for *Opacity* to `0.7`. - This will make overlapping lines more visible. 4. Adjust the size of all lines together by dragging the slider for *Adjust sizing* to `0.8`. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--data-lines-step2-5744f5e767dabc86b55e202a89a76ede.mp4). ### Final product 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](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=11). ## Option 4: 3D extrusions If you have [created a new style](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=2) and [customized the basemap](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=3), 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. ### Step 1: Add the Data visualization Component 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, follow these steps: 1. In the **Components** panel, click the plus icon **+** and select **Data visualization**. 2. Click the **Source** drop, and click the **Add source by ID** tab. 3. Copy the tileset ID below, paste it into the search box, and click **Find**. ```js mapbox.hist-pres-election-county ``` 5. Click **Select data visualization type** to continue. 6. Click **Select 3D extrusions** to add the component to your style. 6. Zoom out to see the United States to preview the resulting appearance of your visualization. NOTE: This visualization type should be viewed when the map is [pitched](https://docs.mapbox.com/help/glossary/camera/) for a better view of the data. - The component will automatically select and style data from a field in your selected data source for *Height*. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--3d-extrusions-step1-aff56059e07422f5c8f32b8740701eb8.mp4). > **Note: Learn about this data** > > To learn more about the data in the `mapbox.hist-pres-election-county` tileset, refer to our [presidential elections tilesets](https://demos.mapbox.com/elections-demo/) demo. ### Step 2: Refine your visualization These steps describe how to style color and height of the data to create a more consumable and informative visualization. 1. Change the *Height* data field to use the `2008_mov_pct` data field. - 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. - Switch to the 2008 dataset, by clicking `2012_oth_pct` and selecting `2008_mov_pct` from the list that appears. 2. Change the stops in the data to `0`,`50` and `100`. - 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. 3. To adjust the polygon height for this scale, drag the slider for *Adjust height* all the way to the right. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--3d-extrusions-step1-aff56059e07422f5c8f32b8740701eb8.mp4). ### Step 3: Make color a data-driven property To distinguish the data, you will adjust the *Color* settings in the component controls, showcasing what areas voted for which political parties. 1. Click the button next to *Color* field, and select `2008_dem_pct` or `2008_rep_pct`. - This will let you 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. 2. Next, you will adjust the colors in your visualization by changing the palette selection. - In the *Colors* tab of the *Component panel*, click the drop-down menu to change the color palette selection. - Select `Divergent` and then `Adverse`, to see how the palette changes the appearance of your visualization. 3. Refine the color palette settings, by adjusting 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**. 4. To make the colors more vivid, slide *Opacity* slider all the way to the right. 5. 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. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--3d-extrusions-step2-60bdb11353b2a077b3d44f6c7cac57c6.mp4). ### Final product 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](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=11). ## Option 5: Heatmap If you have [created a new style](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=2) and [customized the basemap](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=3), you can follow the steps in this section to create a heatmap visualizing the density of trees in the city of Pittsburgh, Pennsylvania. ### Step 1: Add the Data visualization Component 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, follow these steps: 1. In the **Components** panel, click the plus icon **+** and select **Data visualization**. 2. Click the **Source** drop, and click the **Add source by ID** tab. 3. Copy the tileset ID below, paste it into the search box, and click **Find**. ```js mapbox.9jkhs7qz ``` 5. Click **Select data visualization type** to continue. 6. Click **Select Heatmap** to add the component to your style. 6. Use the search bar or rotate the globe to `Pittsburgh Pennsylvania` to view the data. The component smart-styles your data into three initial buckets based on feature density. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--heatmap-step1-d87861cab6cdbc492837fcbbeb7cbec8.mp4). ### Step 2: Refine your visualization 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. 1. Click the `Style` tab in your **Heatmap** component panel. 2. Click on the **Palette** dropdown and select the `Continental` option. 3. Reverse the colors on the palette, by clicking the arrow. - When you hover over the arrow it should say **Reverse Palette Order**. 4. You will change the granularity of your heatmap, by adding more stops to your color palette. - Click **Add stop** two times, to add two new stops. This example will need 5 stops in total. - If you add too many stops, you can hover your cursor over an existing stop and click the trashcan icon ( ) to delete a stop. For more fine-tuned control over your heatmap visualization, you can [style it as a layer](https://docs.mapbox.com/studio-manual/reference/styles/#style-a-layer) using the *Override* action. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--heatmap-step2-3f6763408123bca826e879712f7d46ef.mp4). ### Final product 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](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=11). ## Option 6: Symbols If you have [created a new style](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=2) and [customized the basemap](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=3), 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. ### Step 1: Add the Data visualization Component 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, follow these steps: 1. In the **Components** panel, click the plus icon **+** and select **Data visualization**. 2. Click the **Source** drop, and click the **Add source by ID** tab. 3. Copy the tileset ID below, paste it into the search box, and click **Find**. ```js mapbox.0xjxguyu ``` 5. Click **Select data visualization type** to continue. 6. Click **Select Symbols** to add the component to your style. 6. Switch to the **Style** tab to view your changes. 7. Search for `Rocky Mountain National Park` in the top right corner of Studio to navigate to the location in Colorado, where the data will be presented. 8. Zoom in to zoom level `10` to preview your visualization. - To change your current zoom level, either scroll in and out of the map or change the URL. - To change the URL, check the last three values in your browser URL (`/#{zoom}/{lng}/{lat}`) and change the first value to set your zoom level. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--symbols-step2-cf744df53df8025615c84fcec68bc955.mp4). ### Step 2: Customize your data-driven values Now you will choose which field from your data set will control the style of your symbols and use a unique symbol for each county. 1. In the *Symbols* panel, under the **Component properties** section, next to *Icons*, click where it says `PRIM_LONG_` and select `COUNTY_NAM` from the list that appears. This will set the data field to this new value. - The component's smart styling algorithm selects a data field and creates a scale with up to seven different geometric Maki icons from your custom data, assigning them as follows: - Summits in `Grand` county will use a `circle-15` icon. - Summits in `Boulder` county will use a `square-15` icon. - Summits in `Larimer` county will use a `star-15` icon. - Summits in `Jackson` county will use a `triangle-15` icon. 2. Next, click the data field next to *Labels* and change it to `FEATURE_NA`. Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/help/assets/medias/tutorials--data-visualization--symbols-step2-cf744df53df8025615c84fcec68bc955.mp4). ### Step 3 (Optional): Refine your visualization To customize the colors your symbols, the symbols themselves, or other component properties, you can use the component properties panel. These steps are optional. 1. Changing the color of the layer. - To change the color of the icons and text, you will need to change the color of the layer. - Next to *Symbols*, click on the color swatch and select a new color. - For this tutorial, set the color to `#f54d4d`. - NOTE: If the color doesn't update immediately, refresh the page or zoom in and out of the map. 2. Changing the icons. - If you want to change the icon for a value type, click on the existing icon and select a different option from the popup. 3. Uploading custom icons. - To upload a custom icon, drag and drop your icon SVG directly into Studio. 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](https://docs.mapbox.com/studio-manual/reference/styles/#style-a-layer) using the *Override* action. ### Final product 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](https://docs.mapbox.com/help/tutorials/create-a-map-with-data-visualization-component/?step=11). ## 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. ## Next steps **Congratulations!** You've learned how to use Mapbox Studio data visualization component to create custom data visualizations. ### What we covered - Creating a new style - Choosing custom data to visualize - Selecting a visualization type - Using built-in component controls to adjust the appearance of your visualization - Publishing your style 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](https://docs.mapbox.com/studio-manual/overview/publish-your-style/) of the Mapbox Studio Manual to see all the ways you can use your style! ### Related learning - [Make a choropleth map - Part 1: Create a style](https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-1) - [Make a choropleth map - Part 2: Add Interactivity](https://docs.mapbox.com/help/tutorials/choropleth-studio-gl-pt-2)