Charts

Charts

Data-driven displays are core to revenue.doi.gov, and most are in the form of compact bar charts. Like all data visualizations on the site, these charts present information without embellishment. This lets the data speak for itself. Since the volume of data is so great, numbers are generally shown for only one year at a time. This way the user isn’t overwhelmed. These figures are summarized in sentence form beneath the compact charts found on Explore pages. We think this format aids in comprehension.

Details for the most current year are always shown by default.

How to use

This component is made up of several components, the chart title, the chart itself, and the caption.

Charts usually appear together and should be contained in a .chart-list element.

Responsive behavior

On small screens, the chart title shows the chart inline in the heading and is expandable to show the full chart.

<section id="federal-production" is="year-switcher-section" class="federal production">
    <div class="chart-list">
        <section id="national-federal-production-oil-bbl" class="product chart-item">
            <h3 class="chart-title">
                <button is="aria-toggle" aria-expanded="false" aria-controls="expandable-content" class="chart-title-button" type="button">
          <span class="hide-expanded chart-title-small">
            <span>
              oil
            </span>
            <eiti-bar-chart data="{&quot;2007&quot;:593672237,&quot;2008&quot;:550549223,&quot;2009&quot;:697422354,&quot;2010&quot;:697767298,&quot;2011&quot;:618520506,&quot;2012&quot;:613396465,&quot;2013&quot;:622678698,&quot;2014&quot;:698275506,&quot;2015&quot;:755859023,&quot;2016&quot;:762254430}" x-range="[2007,2016]" x-value="2016" data-units="barrels" is-icon="true" class="bar-chart-icon"></eiti-bar-chart>
          </span>
          <span class="show-expanded chart-title-small">
            <span>
              oil
            </span>
            <img class="chart-title-icon" alt="icon with a minus sign" src="../../img/icons/icon-circled-minus.svg">
          </span>
        </button>
                <span class="chart-title-large">oil</span>
            </h3>
            <figure class="chart" id="expandable-content" aria-hidden="true">
                <eiti-bar-chart aria-controls="expandable-content" data="{&quot;2007&quot;:593672237,&quot;2008&quot;:550549223,&quot;2009&quot;:697422354,&quot;2010&quot;:697767298,&quot;2011&quot;:618520506,&quot;2012&quot;:613396465,&quot;2013&quot;:622678698,&quot;2014&quot;:698275506,&quot;2015&quot;:755859023,&quot;2016&quot;:762254430}"
                    x-range="[2007,2016]" x-value="2016" data-units="barrels"></eiti-bar-chart>
                <figcaption id="national-federal-production-figures-oil-bbl">
                    <span class="caption-data" aria-hidden="false">
            <span class="eiti-bar-chart-y-value" data-format=","></span>
                    <span class="term " data-term="barrel" title="Click to define" tabindex="0">barrels<icon class="icon-book"></icon></span> of oil were produced on federal land in
                    <span class="eiti-bar-chart-x-value"></span>.
                    </span>
                    <span class="caption-no-data" aria-hidden="true">
            There is no data about production of oil on federal land in
            <span class="eiti-bar-chart-x-value">2016</span>.
                    </span>
                    <span class="caption-withheld" aria-hidden="true">
            Data about oil production on federal land in
            <span class="eiti-bar-chart-x-value">2016</span> is withheld.
                    </span>
                </figcaption>
            </figure>
        </section>
    </div>
</section>
<section id="federal-production" is="year-switcher-section" class="federal production">
  <div class="chart-list">
    <section id="national-federal-production-oil-bbl" class="product chart-item">
      <h3 class="chart-title">
        <button is="aria-toggle" aria-expanded="false" aria-controls="expandable-content" class="chart-title-button" type="button">
          <span class="hide-expanded chart-title-small">
            <span>
              {{ label }}
            </span>
            <eiti-bar-chart data="{{jsonify data}}" x-range="{{jsonify x-range}}" x-value="{{ x-value }}" data-units="{{ data-units }}" is-icon="true" class="bar-chart-icon"></eiti-bar-chart>
          </span>
          <span class="show-expanded chart-title-small">
            <span>
              {{ label }}
            </span>
            <img class="chart-title-icon" alt="icon with a minus sign" src="{{ path '/img/icons/icon-circled-minus.svg' }}">
          </span>
        </button>
        <span class="chart-title-large">{{ label }}</span>
      </h3>
      <figure class="chart" id="expandable-content" aria-hidden="true">
        <eiti-bar-chart aria-controls="expandable-content" data="{{jsonify data}}" x-range="{{jsonify x-range}}" x-value="{{ x-value }}" data-units="{{ data-units }}"></eiti-bar-chart>
        <figcaption id="national-federal-production-figures-oil-bbl">
          <span class="caption-data" aria-hidden="false">
            <span class="eiti-bar-chart-y-value" data-format=","></span>
              <span class="term " data-term="barrel" title="Click to define" tabindex="0">{{ data-units }}<icon class="icon-book"></icon></span> of {{ label }} were
              produced on federal land in
              <span class="eiti-bar-chart-x-value"></span>.
          </span>
          <span class="caption-no-data" aria-hidden="true">
            There is no data about production of oil on federal land in
            <span class="eiti-bar-chart-x-value">2016</span>.
          </span>
          <span class="caption-withheld" aria-hidden="true">
            Data about oil production on federal land in
            <span class="eiti-bar-chart-x-value">2016</span>
            is withheld.
          </span>
        </figcaption>
      </figure>
    </section>
  </div>
</section>
{
  "label": "oil",
  "x-range": [
    2007,
    2016
  ],
  "x-value": 2016,
  "data-units": "barrels",
  "data": {
    "2007": 593672237,
    "2008": 550549223,
    "2009": 697422354,
    "2010": 697767298,
    "2011": 618520506,
    "2012": 613396465,
    "2013": 622678698,
    "2014": 698275506,
    "2015": 755859023,
    "2016": 762254430
  }
}