Data Commons bar chart Web Component

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

Usage

<datacommons-bar
  header="Populations of USA, India, and China"
  places="country/USA country/IND country/CHN"
  variables="Count_Person"
  maxPlaces="15"
></datacommons-bar>
<datacommons-bar
  header="Most populous states in the US"
  parentPlace="country/USA"
  childPlaceType="State"
  variables="Count_Person"
  maxPlaces="15"
></datacommons-bar>

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.
Optional if places is specified.
header string Chart title.
parentPlace string Parent place DCID to plot. Example: country/USA.
Optional if places is specified.
places list Places DCIDs to plot, as a space separated list of strings. Example: "geoId/12 geoId/13".
Optional if childPlaceType and parentPlace are specified.
variables list Variable DCID(s) to plot, as a space separated list of strings. Example: "Count_Person Count_Farm".

Optional

Name Type Description
barHeight number Bar height (in px) for horizontal charts.
colors list Specify custom color for each variable. Pass in colors in the same order as variables.

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).
disableEntityLink boolean Include to disable entity (place) links in the x-axis. Default: false (links are enabled)
horizontal boolean Include to draw bars horizontally instead of vertically.
lollipop boolean Include to draw lollipops instead of bars.
maxPlaces number Maximum number of child places to plot. Default: 7.
maxVariables number Maximum number of varibales to plot. Default: show all variables.
sort string Bar chart sort order.

Options:
- ascending (ascending by the variable’s value)
- descending (descending by variable’s value)
- ascendingPopulation (ascending by the place’s population)
-descendingPopulation (descending by the place’s population)

Default: descendingPopulation
stacked boolean Include to draw as stacked bar chart instead of grouped chart.
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.
defaultVariableName string To be used with variableNameRegex. If specified and no variable name is extracted out with the regex, use this as the variable name. e.g., if the variableNameRegex is “(.*?)(?=:)”, and the defaultVariableName is “Total”, for a variable named “variable 1”, it will become “Total”.
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.
variableNameRegex string Optionally specify regex to use to extract out variable name. e.g., if the variableNameRegex is “(.*?)(?=:)”, only the part before a “:” will be used for variable names. So “variable 1: test” will become “variable 1”.
yAxisMargin number Set size (in px) of y-axis’ margin to fit the axis label text. Default: 60px.

Examples

Example 1: A bar chart of population for states in the US

Code:

<datacommons-bar
  header="Population of US States"
  parentPlace="country/USA"
  childPlaceType="State"
  variables="Count_Person"
></datacommons-bar>

Example 2: A bar chart of population for specific US states

Code:

<datacommons-bar
  header="Population of US States"
  variables="Count_Person"
  places="geoId/01 geoId/02"
></datacommons-bar>

Example 3: A stacked bar chart of population by gender for specific US states

Code:

<datacommons-bar
  header="Population of US States"
  variables="Count_Person"
  places="geoId/01 geoId/02"
  stacked
></datacommons-bar>

Example 4: A horizontal, stacked bar chart of median income for specific US states

Code:

<datacommons-bar
  header="Median income by gender"
  variables="Median_Income_Person_15OrMoreYears_Male_WithIncome Median_Income_Person_15OrMoreYears_Female_WithIncome"
  places="geoId/01 geoId/02 geoId/04 geoId/20 geoId/21 geoId/22 geoId/23 geoId/24 geoId/25"
  stacked
  horizontal
  sort="descending"
></datacommons-bar>

Example 5: A lollipop chart of population for states in the US

Code:

<datacommons-bar
  header="Population of US States"
  parentPlace="country/USA"
  childPlaceType="State"
  variables="Count_Person"
  lollipop
></datacommons-bar>

Page last updated: November 27, 2024 • Send feedback about this page