> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Style circles with a data-driven property
This example adds circles to a map to represent individual responses to the 2010 U.S. Census, and then sets the color of each circle according to the `ethnicity` property for each point.
The point features in [the vector tileset source](https://console.mapbox.com/studio/tilesets/examples.8fgz4egr/#12/37.75334/-122.47559) each have an `ethnicity` property, as shown in this sample feature:
```json
{
"type": "Feature",
"properties": {
"ethnicity": "Asian"
},
"geometry": {
"type": "Point",
"coordinates": [-122.447303, 37.753574]
}
}
```
The example uses a [`match`](https://docs.mapbox.com/style-spec/reference/expressions/#match) data expression to set the [`circle-color`](https://docs.mapbox.com/style-spec/reference/layers/#paint-circle-circle-color) paint property for each point, using `#fbb03b` for `White`, `#223b53` for `Black`, `#e55e5e` for `Hispanic`, `#3bb2d0` for `Asian`, and `#ccc` for any other value.
> **Note: Use a custom tileset**
>
> This example uses 2010 U.S. Census data uploaded to Mapbox as a vector tileset. This data is not updated or maintained and **should not be used in production applications.** If you're interested in creating an application that uses U.S. Census data, you can download a Shapefile from [census.gov's data portal](https://www.census.gov/geographies/mapping-files.html) and upload it from your Mapbox Studio [Tilesets page](https://console.mapbox.com/studio/tilesets/).
> Example code:
**JavaScript**
```html
Style circles with a data-driven property
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
zoom: 12,
center: [-122.4473, 37.7535]
});
mapRef.current.on('load', () => {
mapRef.current.addSource('ethnicity', {
type: 'vector',
url: 'mapbox://examples.8fgz4egr'
});
mapRef.current.addLayer({
id: 'population',
type: 'circle',
slot: 'middle',
source: 'ethnicity',
'source-layer': 'sf2010',
paint: {
'circle-radius': [
'interpolate',
['exponential', 1.75],
['zoom'],
12,
2,
22,
180
],
'circle-color': [
'match',
['get', 'ethnicity'],
'White',
'#fbb03b',
'Black',
'#223b53',
'Hispanic',
'#e55e5e',
'Asian',
'#3bb2d0',
'#ccc'
]
}
});
});
}, []);
return ;
};
export default MapboxExample;
```