Data Commons Web Components

Embed Data Commons statistical variable observation visualizations in your web application.

Usage

Include datacommons.js in your html’s <head>...</head> tag. Then use Data Commons web component tags (e.g. datacommons-line) to add embedded data visualizations.

For example, to embed a line chart:

<html>
  <head>
    <script src="https://datacommons.org/datacommons.js"></script>
  </head>
  <body>
    <datacommons-line
      header="US Population Over Time"
      place="country/USA"
      variables="Count_Person"
    ></datacommons-line>
  </body>
</html>

See a live version of this example you can play around with in Playground (source).

Components

Code Playground Examples

Variables and places

Data Commons web components visualize statistical variables about one or more places. Variables and places are identified by Data Commons Identifiers, or DCIDs.

To look up a DCID for an entity or variable, see the different methods described in this page.

To find places available for a statistical variable, see this page.

Styling

Custom styles are supported through CSS shadow parts.

CSS ::part Description Components
container Chart container element All
legend Chart legend bar, line, map,pie
place-path Geo boundary map
place-path-<dcid> Geo boundary for a particular place. Example: place-path-geoId\/12 * map
series Series data (line, bar, lollipop, etc) bar, line. pie
series-place-<dcid> Series data for a particular place. Example: series-place-geoId\/12 * bar, line. pie
series-place-<dcid>-variable-<dcid> Series data for a particular place and variable. Example: series-place-geoId\/12-variable-Count_Person * bar, line
series-variable-<dcid> Series data for a variable. Example: series-place-variable-Count_Person bar, line. pie
header Chart title All
subheader Chart subtitle (if provided in slot="subheader") All
footer Chart footer (if provided in slot="footer") All
x-axis X-axis line bar, line
x-axis-text X-axis label text bar, line
x-axis-tick X-axis tick mark bar, line
y-axis-text Y-Axis label text bar, line
y-axis-tick Y-Axis tick mark bar, line

Additionally, the following css variables are supported:

CSS variable Description Default
--dc-headings-font-family Font family for web component headings (h1 through h6) Google Sans
--dc-font-family Font family for web component body text Google Sans Text

Styling Example

See a live version of this example you can play around with in Playground (source).

<html>
  <head>
    <style>
      #styled-map {
        --dc-headings-font-family: monospace;
      }
      #styled-map::part(container) {
        border-radius: 10px;
        border: 1px solid #f5f5f5;
        box-shadow: 1px 2px 6px rgba(3, 7, 18, 0.04),
          5px 8px 25px rgba(3, 7, 18, 0.08);
      }
      #styled-map::part(legend) {
        border: 1px solid #e1e1e1;
        padding: 5px 8px;
        border-radius: 10px;
      }
      #styled-map::part(title) {
        font-weight: 200;
        font-size: 16px;
        margin-bottom: 16px;
        color: #111a1b;
      }
      #styled-map::part(place-path) {
        fill: #e9e9e9;
      }
      #styled-map::part(place-path-geoId\/12),
      #styled-map::part(place-path-geoId\/13),
      #styled-map::part(place-path-geoId\/06) {
        fill-opacity: 1;
        fill: #e76f51;
        stroke: #b72a53;
        stroke-width: 2px;
      }
    </style>
  </head>
  <body>
    <datacommons-map
      id="styled-map"
      header="Three most populous US states"
      parentPlace="country/USA"
      childPlaceType="State"
      variable="Count_Person"
    ></datacommons-map>
  </body>
</head>

License

Apache 2.0

Support

For general questions or issues, please open an issue on our issues page. For all other questions, please send an email to support@datacommons.org.

Page last updated: December 17, 2024 • Send feedback about this page