> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt)

# Make a choropleth map, part 1: create a style

One way to show data distribution on a map is with a [**choropleth**](https://en.wikipedia.org/wiki/Choropleth_map), a thematic map in which areas are shaded based on a particular value. In this guide, you will use [Mapbox Studio](https://docs.mapbox.com/studio-manual/guides/) and [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) to make a map of US states showing population density. (If you are familiar with [Leaflet](https://leafletjs.com/), this map [may look familiar](http://leafletjs.com/examples/choropleth/)!)

> **Note: Tutorial series: Make a choropleth map**
> 
> This tutorial is part of a series. In this part, **Part 1: Create a style**, you will walk through creating a map with a choropleth style.
> 
> The next section, [**Part 2: Add Interactivity**](https://docs.mapbox.com/help/ja/tutorials/choropleth-studio-gl-pt-2/), you will walk through adding interactivity to your map, such as hovering on regions to view their data.

## Prerequisites

To follow along with this guide you'll need:

-   **Mapbox account**: [Sign up](https://account.mapbox.com/auth/signup/) for free or [log in](https://console.mapbox.com/) if you already have an account.

> **Note: Part 2 Dependencies**
> 
> The following dependencies are not needed for this part of the tutorial, but will be necessary for [**Part 2: Add Interactivity**](https://docs.mapbox.com/help/ja/tutorials/choropleth-studio-gl-pt-2/).
> 
> -   **Familiarity with front-end development**: Beginner experience with HTML, CSS and JavaScript.
> -   **A Code editor**: A program like [Visual Studio Code](https://code.visualstudio.com/).

## Upload your data

To add the population density data to a style in Mapbox Studio, you need to upload it to your account. Follow these steps to upload the data:

1.  Download the provided `GeoJSON`, which includes spatial data on population density across US states by clicking the download button below.

[Download GeoJSON](https://docs.mapbox.com/help/ja/help/demos/choropleth-studio-gl-pt-2/stateData.geojson)

2.  Go to your [**Tilesets** page](https://console.mapbox.com/studio/tilesets/) in Mapbox Studio.
3.  On your Tilesets page, click the **New tileset** button and select the file `stateData.geojson` you downloaded.
4.  Once the upload is complete, click on the arrow next to the filename to open the tileset in the **Tileset explorer**.

Now you will be able to inspect the data as seen in the next step.

![upload dialog leading to the Tileset explorer](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--data-upload-success.6855368.480.png)

## Inspect data in the Tileset explorer

When you upload vector data to your Mapbox account, our servers convert it to a [vector tileset](https://docs.mapbox.com/help/ja/glossary/tileset/) so it can be rendered quickly and efficiently in the Mapbox Studio style editor and with Mapbox GL JS. The [Tileset explorer](https://docs.mapbox.com/studio-manual/reference/tilesets/#tileset-explorer) shows some useful information about the tileset that was created from your uploaded data:

1.  Under ** Vector layers**, you can see the properties from the original `GeoJSON` file: **density** and **name**. The uploaded tileset maintains the properties from the original data file, which you can use when adding style rules for the tileset.
2.  The **bounding box viewport** provides a visual overview of the geographic extent of your dataset, as well as the bounds of the current map view.
3.  Click the **Share & use** menu to find the tileset ID. You can also toggle the tileset's visibility from *Private* to *Public*.

Now that you've inspected your dataset, you can move onto creating a style in the next step.

![Tileset Explorer, highlighting notable functionality.](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--inspecting-the-data.554f56a.480.png)

## Create a new style

To put your data on a map, you'll first need to create a style that will reference the data. To create a style, follow these steps:

1.  Go to your [Styles page](https://console.mapbox.com/studio/).
2.  Click the dropdown next to the **New style** button.
3.  Leave the default settings and select **Customize**.
4.  Mapbox Studio will create a new style based on **Mapbox Standard** and open it in editor.
    -   Once opened, rename the style by clicking into the title field in the upper left side of the screen to change the title.

Excellent! Welcome to the Mapbox Studio style editor. This is where you will make changes to your new map style.

![Mapbox Studio style editor showing default Basic style](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--no-data.78e1f6d.480.png)

> **Note: Learn more about Mapbox Studio**
> 
> If you would like to learn more about the style editor, read the [Mapbox Studio Manual](https://docs.mapbox.com/studio-manual/reference/styles/).

## Add a new layer

Now you will add and style the population density data, by adding a new layer to the map:

1.  Make sure you have the **Layers** tab selected.
2.  Click the **+** button and select ** Custom layer...**
3.  Add the data from your tileset.
    -   The editor is now showing your map in x-ray mode. X-ray mode shows all the data in the sources added to the style, regardless of whether there is a layer to style it.
    -   In the *New layer* panel, click the dropdown under **Source** and select the `statedata` source you created.
4.  Once the layer is created, double click on the layer name in the **Style** tab and rename the layer to `statedata`.

Your new layer will now be highlighted on the x-ray map.

![Mapbox Studio set data dialog showing x-ray mode](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--state-data-xray.81ced3d.480.png)

## Style the layer

Click the **Style** tab and the map will switch back to style mode displaying your new layer. You will see the state data on the map with a default style (black with 100% opacity).

![Mapbox Studio state data with default fill-color style](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--state-data-black.4020d5f.480.png)

In the Mapbox Studio style editor, you can assign a color to each state based on its population density. This is also seen on the original Leaflet map, where the data is styled based on the population density of each state:

![original Leaflet choropleth map](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--leaflet-choropleth.87fde5b.480.png)

To mimic this style, follow these steps:

1.  Click on the `statedata` layer and make sure you're on the **Style** tab.
2.  Next, click **Style across data range** towards the bottom of the tab.
3.  In the popup, select `density`.
    -   This will allow you to style each state according to its population density.
4.  In the new menu that appears, set rate of change is to *linear*

Now you can start breaking down the population density into ranges in the next step.

![Mapbox Studio style editor interpolate from data](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--interpolate-from-data.49eadf3.480.png)

## Adding stops and colors to group data

Now you can add stops and colors to break states up into groups with similar population densities. By default this will start with two stops (the max and min values of the data), but you can add more stops between them.

1.  Color the starting value.
    -   The first stop is fixed at *1.264*, based on the information in the data set you uploaded so you don't need to change the value.
    -   Click on the black box and select the `HSL` dropdown and select `HEX`.
    -   Copy and paste `#FFEDA0` into the color value.
2.  Add 7 stops.
    -   Click the **+ Add another stop** button 7 times, to create 7 more stops.
    -   These stops will allow you to pick a range of data and assign it a color.
3.  Add colors and values to each of the stops.
    -   Starting with stop 2, changes the values for each stop as follows:
        -   `10` : `#FFEDA0`
        -   `20`: `#FED976`
        -   `50`: `#FEB24C`
        -   `100`: `#FD8D3C`
        -   `200`: `#FC4E2A`
        -   `500`: `#E31A1C`
        -   `1000`: `#BD0026`
    -   As you add stops, you will see the map reflect the changes, as different states change colors. In this case, all states with a population density between `0-10` will be assigned the color `#FFEDA0`, all states with population density from `10-20` will be assigned the color `#FED976`, and so on.
4.  Add an outline to each of the states and reduce their opacity to help your readers distinguish between neighboring states.
    -   Click on *Opacity* and change the value to `0.6`.
    -   Next, click `1px stroke` and change the style property to `#FFFFFF`to make the outline white.

Now that your data is colored, you can add labels to your data in the next step.

![Adding color stops to Mapbox Studio](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--add-color-stops.40dcc37.480.png)

## Put labels on top of data

After you've created and styled your layer, your map should look something like this:

![Mapbox Studio style editor move statedata layer](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--wip-style.bef650b.480.png)

Everything looks good, except for one thing - the labels are under the data layer. The Mapbox Studio style editor allows you to reorder layers on the map and put country labels, city labels , state labels, etc., on top of your data by following these steps:

1.  Click the drop down next to **basemap**.
2.  Drag the `stateData` layer into the **Top** slot.

![Mapbox Studio style editor move statedata layer](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--move-layer.f8cf16f.480.png)

## Change view from Globe to Mercator

You can change the projection of your map to several options, including [Mercator](https://docs.mapbox.com/mapbox-gl-js/guides/projections/#mercator), which will show a flat map as opposed to a globe.

To change the map's projection, follow these steps:

1.  Click the **Global** tab.
2.  Click on **Projection**
3.  Open the dropdown under **Projection name**, scroll down and select Mercator.

Your map will now appear as a flat, 2D map in the Mercator style.

![Switching the map's projection type to Mercator](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--switching-to-mercator.c042b4c.480.png)

## Publish the style

Now that you have your map looking good, it's time to publish! Click the **Publish** button in the top right of the screen, then click **Publish** again on the next prompt.

Your style is now accessible and can be used in your applications or websites! If you go back to your [Styles](https://console.mapbox.com/studio/) page, you will see your new style at the top of the list.

![Publishing the style](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--publish-the-style.a65c70c.480.png)

## Next steps

**Congratulation!** You've finished Part 1 of this tutorial series.

![Finished version of the map in Mapbox Studio](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--choropleth-studio-gl-pt-1--finished-map-style.f4c65aa.480.png)

### What we covered

-   Uploading data to Mapbox
-   Inspecting data in the Tileset explorer
-   Creating a new style
-   Adding & styling layers in Mapbox Studio
-   Publishing a style

Head to [part 2](https://docs.mapbox.com/help/ja/tutorials/choropleth-studio-gl-pt-2/) to learn how add interactive elements to your map and publish it to the web with Mapbox GL JS.