メインコンテンツまでスキップ

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: 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.

You will begin by creating a new style. Then you will choose some custom data to visualize, select a visualization type, and use built-in component controls to adjust the appearance of your visualization. Lastly, you will publish your style so you can share it with others or use your visualization in a webpage or mobile application.

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​

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.

Learn about styles

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:

  1. Click the New style button.
  2. Choose Monochrome.
  3. Select the Light variation.
  4. Click the Customize button.
circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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:

  1. Remove unnecessary components by selecting each in the Components panel and clicking the trashcan icon ( trash ). Remove Buildings, Place labels, Points of interest, Road network, and Transit.
  2. To change the map's base color, go to 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, 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.

Upload your own data

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

Optional: Preview your data​

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:

Choose a visualization type​

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:

Option 1: Choropleth​

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:

  • Yellow polygons #EDF51C will represent counties with warmer temperatures.
  • Purple polygons #67009E will represent counties with cooler temperatures.

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. Copy the tileset ID below, paste it into the search box, and click Find.
mapbox.brt3djy1
  1. Click Select data visualization type to continue.
  2. 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 7 to 11 in this video:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

Refine your visualization​

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

To adjust the colors in your visualization, you 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 12 to 14 in this video:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu
  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.

To begin developing with your new map style, continue to Publish your style.

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.

Option 2: Data-driven circles​

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:

  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. Copy the tileset ID below, paste it into the search box, and click Find.
mapbox.5sq1s796
  1. Click Select data visualization type to continue.
  2. 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.

See steps 7 to 11 in this video:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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. Add 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.

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

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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.

Option 3: Data-driven lines​

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:

  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. Copy the tileset ID below, paste it into the search box, and click Find.
mapbox.6w7f94rz
  1. Click Select data visualization type to continue.
  2. 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 7 to 12 in this video:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

Refine your visualization​

These optional steps describe ways you can style additional properties with data-driven values, or refine the appearance of 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 13 to 16 in this video:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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.

Option 4: 3D extrusions​

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:

  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. Copy the tileset ID below, paste it into the search box, and click Find.
  mapbox.hist-pres-election-county
  1. Click Select data visualization type to continue.
  2. Click Select 3D extrusions to add the component to your style.

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.

  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 you 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 7 to 14 in this video:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu
Learn about this data

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

Make color a data-driven property​

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.

  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, 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.

  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, you 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, 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:

circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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.

Option 5: Heatmap​

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:

  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. Copy the tileset ID below, paste it into the search box, and click Find.
mapbox.9jkhs7qz
  1. Click Select data visualization type to continue.
  2. Click Select Heatmap to add the component to your style.
  3. Copy the location name below and paste it into the geocoder in the top right corner of Studio to navigate to Pittsburgh, Pennsylvania to preview your visualization:
Pittsburgh, Pennsylvania

The component smart-styles your data into three initial buckets based on feature density.

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 on your Heatmap component in the Components panel.
  2. Click on the Colors palette or any color thumbnail to open the Colors tab. Here you can select a built-in colorblind-friendly palette or adjust individual values. This example uses the color palette Continental with the colors reversed.
  3. Click and drag the Opacity and Size sliders to adjust the opacity of your heatmap visualization, or the radius for its feature clusters.

To change the granularity of your heatmap, you can add or remove stops to your color palette.

  1. Click on your Heatmap component in the Components panel.
  2. Click Add stop to add a stop. This example has 5 stops.
  3. Hover your cursor over an existing stop and click the trashcan icon ( trash ) to delete a stop.

For more fine-tuned control over your heatmap visualization, you can style it as a layer using the Override action.

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.

Option 6: Symbols​

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:

  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. Copy the tileset ID below, paste it into the search box, and click Find.
mapbox.0xjxguyu
  1. Click Select data visualization type to continue.
  2. Click Select Symbols to add the component to your style.
  3. Copy the location name below and paste it into the geocoder in the top right corner of Studio to navigate to Rocky Mountain National Park in Colorado.
Rocky Mountain National Park
  1. Zoom out to 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.

Customize your data-driven values​

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:

  • 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.
  1. In the Symbols component properties panel, set the data field for Icons to 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.

  1. In the Symbols component properties panel, change the data field for Labels to FEATURE_NA by clicking on the data field and selecting the new field.
circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu

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. To change the color of the default geometric icons, select the Symbols color from the Colors tab of the Component panel and select a new color.
  2. To select a different icon for a value, click on the existing icon and select a different option from the popup.
  3. To upload a custom icon, drag and drop your icon SVG directly into Studio. Repeat step 17 to add it to the Symbols component.

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.

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.

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​

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!

追加の開発者リソース
このpageは役に立ちましたか？