Data Commons Map Web Component

Data Commons Web Component for visualizing a single statistical variables around one or more places on a map.


  header="Chart title"



Name Type Description
childPlaceType string Child place types to plot. Example: State.
Optional if places is specified.
header string Chart title.
parentPlace string Parent place DCID to plot. Example: country/USA.
Optional if places is specified.
variable string Variable DCID to plot.


Name Type Description
allowZoom boolean Include to allow zooming and panning using the mouse and show zoom-in and zoom-out buttons.
colors list List up to three colors to define a custom color scale.

Values should follow CSS specification (keywords, rgb, rgba, hsl, #hex). Separate multiple values with spaces, e.g., "#ff0000 #00ff00 #0000ff". Make sure individual colors have no spaces. For example, use rgba(255,0,0,0.3) instead of rgba(255, 0, 0, 0.3).

- If one color is given: a luminance based color scale will be used
- If two colors are given: a divergent color scale will be used, with the first color corresponding to the min value, and the second color corresponding to the max value.
- If three colors are given: a color scale with the first three colors corresponding to [min, mean, max] values will be used.
date string Specific date to show data for. ISO 8601 format (e.g. “YYYY”, “YYYY-MM”, “YYYY-MM-DD”).

Note: Ensure your variable has data available at the specified date using the Stat Var Explorer

Default: Most recent data available.
subscribe string Listen for data changes on this event channel. Channel name should match the publish name on a control component. Example: datacommons-slider

Advanced Configuration

Name Type Description
apiRoot string Domain to make data fetch API calls from. Used primarily for fetching data from custom DCs.

geoJsonProp string Optionally specify the property to use to get geojsons.
placeNameProp string Optionally specify the property to use to get the place names.
showExploreMore boolean Include to show “Explore more” link in the footer, which takes the user to’s visualization tools.


Example 1: Show a population map for the year 2020

A map of population below poverty level in US States in the year 2020.


  header="Population Below Poverty Level Status in Past Year in States of United States (2020)"