Data Commons Scatter Chart Web Component

Data Commons Web Component for visualizing the relationship between two variables.

Usage

<datacommons-TYPE
  parentPlace="parent_place_dcid"
  childPlaceType="type"
  variables="var_dcid_1 var_dcid_2"
  header="Chart title"
></datacommons-TYPE>

Attributes

Required

Name Type Description
childPlaceType string Child place types to plot. Example: State.
header string Chart title.
parentPlace string Parent place DCID to plot. Example: country/USA.
variables list Variable DCID(s) to plot, as a space separated list of strings. Example: "Count_Person Count_Farm". At least 2 variables must be provided, and only the first 2 variables will be plotted.

Optional

Name Type Description
highlightBottomLeft boolean Include to label outliers in the bottom left quadrant. Defaults to false.
highlightBottomRight boolean Include to label outliers in the bottom right quadrant. Defaults to false.
highlightTopLeft boolean Include to label outliers in the top left quadrant. Defaults to false.
highlightTopRight boolean Include to label outliers in the top right quadrant. Defaults to false.
showPlaceLabels boolean Include to label all points with the place they correspond to. Defaults to false.
showQuadrants boolean Include to show grid lines delimiting top right, top left, bottom right, and bottom left quadrants. Defaults to false.

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.
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: Plot population vs median household income for US states

Code:

<datacommons-scatter
  header="Population vs Median Household Income for US States"
  parentPlace="country/USA"
  childPlaceType="State"
  variables="Count_Person Median_Income_Household"
></datacommons-scatter>