Data Commons Ranking Chart Web Component

Data Commons Web Component for listing statistical variables around a single place in descending or ascending order.

Usage

<datacommons-ranking
  header="US States with the Highest Population"
  parentPlace="country/USA"
  childPlaceType="State"
  variable="Count_Person"
></datacommons-ranking>

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.
header string Chart title.
parentPlace string Parent place DCID to plot. Example: country/USA.
variable string Variable DCID to plot.
variables list A list of variable DCIDs to plot. Entries in the list should be separated by spaces. Example: "dcid1 dcid2".

optional if variable is provided.

Optional

Name Type Description
highestTitle string Chart title to show if header is not provided. Will only show if a highest-to-lowest ranking is shown.
lowestTitle string Chart title to show if header is not provided. Will only show if a lowest-to-highest ranking is shown.
perCapita list A list of variable DCIDs to rank by per capita value. Entries in the list should be separated by spaces. Example: "dcid1 dcid2".
rankingCount integer How many places to show, e.g. the “N” in “Top-N”.

Default: 5.
showHighestLowest boolean Include to show both the top and bottom places, ordered highest-to-lowest, in one chart.

Default: false.
showLowest boolean Include to sort values in ascending order. Ignored if showHighestLowest is true.
showMultiColumn boolean Include to show variables across multiple columns in one table, with a header for each variable. The last variable provided is used for ranking.

Default: false. If multiple variables are provided, a separate ranking table is generated for each variable.

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.
hideFooter boolean Include to hide footer with download link.

Default: false.
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 ranking of US states by population, highest to lowest

Code:

<datacommons-ranking
  header="US States with the Highest Population"
  parentPlace="country/USA"
  childPlaceType="State"
  variable="Count_Person"
></datacommons-ranking>

Example 2: Show a ranking of US states by population, lowest to highest

Code:

<datacommons-ranking
  header="US States with the Lowest Population"
  parentPlace="country/USA"
  childPlaceType="State"
  variable="Count_Person"
  showLowest
></datacommons-ranking>

Example 3: Show both highest and lowest US states by population

Code:

<datacommons-ranking
  header="US States Ranking by Population"
  parentPlace="country/USA"
  childPlaceType="State"
  variable="Count_Person"
  showHighestLowest
></datacommons-ranking>