Data Commons Slider Web Component

Data Commons Web Component for controlling the date in datacommons-map or datacommons-bar.

Usage

<!-- Map being controlled -->
<datacommons-map
  [...other map attributes here]
  subscribe="event-name-here"
></datacommons-map>

<!-- Slider  -->
<datacommons-slider
  publish="event-name-here"
  variable="variable_dcid"
  parentPlace="place_dcid"
  childPlaceType="child_place_type_dcid"
></datacommons-slider>

<!-- Bar chart listening for date change events on the "dc-bar" channel -->
<datacommons-bar
  header="Population below the poverty line in the US, Russia, and Mexico (${date})"
  variables="sdg/SI_POV_DAY1"
  places="country/USA country/RUS country/MEX"
  subscribe="dc-bar"
  date="HIGHEST_COVERAGE"
>
  <!-- Place slider in the component's footer and publish events on the "dc-bar" channel -->
  <datacommons-slider
    variables="sdg/SI_POV_DAY1"
    places="country/USA country/RUS country/MEX"
    publish="dc-bar"
    slot="footer"
    >
  </datacommons-slider>
</datacommons-bar>

Attributes

Required

Name Type Description
childPlaceType string Child place types of date range. Example: State. For a list of available place types, see the place types page.

optional if dates is specified.
dates list Set date option range. Example: "2001 2002 2003"

optional if variable, parentPlace, and childPlaceType are specified.
parentPlace string Parent place DCID of date range. Example: country/USA.

optional if dates is specified.
publish string Event name to publish on slider change.
variable string Variable DCID of date range. Example: Count_Person.

optional if dates is specified.

Optional

Name Type Description
header string Override default header text.
value number Initial slider value.

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.

Examples

Example 1: Use slider to change dates on a datacommons-map web component

Code:

<!-- Listen for date changes on the "dc-map" channel -->
<datacommons-map
  header="Population"
  parentPlace="country/USA"
  childPlaceType="State"
  subscribe="dc-map"
  variable="Count_Person"
></datacommons-map>

<!-- Publish date changes on the "dc-map" channel  -->
<datacommons-slider
  publish="dc-map"
  variable="Count_Person"
  parentPlace="country/USA"
  childPlaceType="State"
></datacommons-slider>

Example 2: Use slider to change dates on a datacommons-bar web component

Code:

<!-- Bar chart listening for date change events on the "dc-bar" channel -->
<datacommons-bar
  header="Population below the poverty line in the US, Russia, and Mexico (${date})"
  variables="sdg/SI_POV_DAY1"
  places="country/USA country/RUS country/MEX"
  subscribe="dc-bar"
  date="HIGHEST_COVERAGE"
>
  <!-- Place slider in the component's footer and publish events on the "dc-bar" channel -->
  <datacommons-slider
    variables="sdg/SI_POV_DAY1"
    places="country/USA country/RUS country/MEX"
    publish="dc-bar"
    slot="footer"
    >
  </datacommons-slider>
</datacommons-bar>