Data Commons map chart Web Component
Data Commons Web Component for visualizing a single statistical variables around one or more places on a map.
Usage
<datacommons-map
header="Chart title"
parentPlace="place_dcid"
childPlaceType="place_type_dcid"
variable="variable_dcid"
></datacommons-map>
Attributes
Required
Name | Type | Description |
---|---|---|
childPlaceType | string | Child place types to plot. Example: State . For a list of available place types, see the place types page.places is specified. |
header | string | Chart title. |
parentPlace | string | Parent place DCID to plot. Example: country/USA . places is specified. |
variable | string | Variable DCID to plot. |
Optional
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. Default: https://datacommons.org . |
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 Datacommons.org’s visualization tools. |
Examples
Example 1: Show a population map for the year 2020
A map of population below poverty level in US States in the year 2020.
Code:
<datacommons-map
header="Population Below Poverty Level Status in Past Year in States of United States (2020)"
parentPlace="country/USA"
childPlaceType="State"
variable="Count_Person_BelowPovertyLevelInThePast12Months"
date="2020"
></datacommons-map>
Page last updated: November 27, 2024 • Send feedback about this page