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.

<!-- Charts -->
<div class=""></div>

<section id="federal-production" is="year-switcher-section" class="federal production">
    <div class="chart-selector-wrapper"></div>
    <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="federal-production-figures-chart-oil-bbl" 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">
              <svg viewBox="0 0 300 160"><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g></svg></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="federal-production-figures-chart-oil-bbl" aria-hidden="true">
                <eiti-bar-chart aria-controls="national-federal-production-figures-oil-bbl national-federal-production-withheld" 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">
                    <svg viewBox="0 0 300 186.4"><g class="axis x-axis" transform="translate(0,146)"><g class="tick" transform="translate(16.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’07</text></g><g class="tick" transform="translate(46.400000000000006,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’08</text></g><g class="tick" transform="translate(76,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’09</text></g><g class="tick" transform="translate(105.60000000000001,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’10</text></g><g class="tick" transform="translate(135.20000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’11</text></g><g class="tick" transform="translate(164.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’12</text></g><g class="tick" transform="translate(194.40000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’13</text></g><g class="tick" transform="translate(224.00000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’14</text></g><g class="tick" transform="translate(253.60000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’15</text></g><g class="tick tick-selected" transform="translate(283.20000000000005,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’16</text></g><path class="domain" d="M2,0V0H298V0" fill="none"></path></g><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="x-axis-baseline"><line x1="0" x2="300" transform="translate(0,146)"></line></g><g class="extent-line"><text transform="translate(0,13)">800m barrels</text><line x1="0" x2="300" transform="translate(0,18)"></line></g></svg></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=",">762,254,430 </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">2016</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>
</section>
</section>

<!-- Charts -->
<div class="h3.cart-title">Bar charts</div>

<section id="federal-production" is="year-switcher-section" class="federal production">
    <div class="chart-selector-wrapper"></div>
    <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="federal-production-figures-chart-oil-bbl" 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">
              <svg viewBox="0 0 300 160"><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g></svg></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="federal-production-figures-chart-oil-bbl" aria-hidden="true">
                <eiti-bar-chart aria-controls="national-federal-production-figures-oil-bbl national-federal-production-withheld" 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">
                    <svg viewBox="0 0 300 186.4"><g class="axis x-axis" transform="translate(0,146)"><g class="tick" transform="translate(16.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’07</text></g><g class="tick" transform="translate(46.400000000000006,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’08</text></g><g class="tick" transform="translate(76,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’09</text></g><g class="tick" transform="translate(105.60000000000001,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’10</text></g><g class="tick" transform="translate(135.20000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’11</text></g><g class="tick" transform="translate(164.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’12</text></g><g class="tick" transform="translate(194.40000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’13</text></g><g class="tick" transform="translate(224.00000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’14</text></g><g class="tick" transform="translate(253.60000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’15</text></g><g class="tick tick-selected" transform="translate(283.20000000000005,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’16</text></g><path class="domain" d="M2,0V0H298V0" fill="none"></path></g><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="x-axis-baseline"><line x1="0" x2="300" transform="translate(0,146)"></line></g><g class="extent-line"><text transform="translate(0,13)">800m barrels</text><line x1="0" x2="300" transform="translate(0,18)"></line></g></svg></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=",">762,254,430 </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">2016</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>
</section>
</section>

<!-- Mobile Sparkbars -->
<div class="hide-expanded.chart-title-small">Mobile sparkbar accordions!</div>

<section id="federal-production" is="year-switcher-section" class="federal production">
    <div class="chart-selector-wrapper"></div>
    <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="federal-production-figures-chart-oil-bbl" 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">
              <svg viewBox="0 0 300 160"><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g></svg></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="federal-production-figures-chart-oil-bbl" aria-hidden="true">
                <eiti-bar-chart aria-controls="national-federal-production-figures-oil-bbl national-federal-production-withheld" 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">
                    <svg viewBox="0 0 300 186.4"><g class="axis x-axis" transform="translate(0,146)"><g class="tick" transform="translate(16.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’07</text></g><g class="tick" transform="translate(46.400000000000006,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’08</text></g><g class="tick" transform="translate(76,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’09</text></g><g class="tick" transform="translate(105.60000000000001,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’10</text></g><g class="tick" transform="translate(135.20000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’11</text></g><g class="tick" transform="translate(164.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’12</text></g><g class="tick" transform="translate(194.40000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’13</text></g><g class="tick" transform="translate(224.00000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’14</text></g><g class="tick" transform="translate(253.60000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’15</text></g><g class="tick tick-selected" transform="translate(283.20000000000005,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’16</text></g><path class="domain" d="M2,0V0H298V0" fill="none"></path></g><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="x-axis-baseline"><line x1="0" x2="300" transform="translate(0,146)"></line></g><g class="extent-line"><text transform="translate(0,13)">800m barrels</text><line x1="0" x2="300" transform="translate(0,18)"></line></g></svg></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=",">762,254,430 </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">2016</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>
</section>
</section>

<div class="{{ className }}">{{ text }}</div>

<section id="federal-production" is="year-switcher-section" class="federal production">
  <div class="chart-selector-wrapper"></div>
    <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="federal-production-figures-chart-oil-bbl" 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">
              <svg viewBox="0 0 300 160"><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g></svg></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="federal-production-figures-chart-oil-bbl" aria-hidden="true">
                <eiti-bar-chart aria-controls="national-federal-production-figures-oil-bbl national-federal-production-withheld" 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">
                <svg viewBox="0 0 300 186.4"><g class="axis x-axis" transform="translate(0,146)"><g class="tick" transform="translate(16.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’07</text></g><g class="tick" transform="translate(46.400000000000006,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’08</text></g><g class="tick" transform="translate(76,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’09</text></g><g class="tick" transform="translate(105.60000000000001,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’10</text></g><g class="tick" transform="translate(135.20000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’11</text></g><g class="tick" transform="translate(164.8,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’12</text></g><g class="tick" transform="translate(194.40000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’13</text></g><g class="tick" transform="translate(224.00000000000003,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’14</text></g><g class="tick" transform="translate(253.60000000000002,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’15</text></g><g class="tick tick-selected" transform="translate(283.20000000000005,0)" style="opacity: 1;"><line y2="0" x2="0" fill="none"></line><text dy=".71em" y="10" x="0" style="text-anchor: middle;">’16</text></g><path class="domain" d="M2,0V0H298V0" fill="none"></path></g><g class="bar" transform="translate(2,24.4)"><rect class="bar-value" height="94.70662442617748" y="26.89337557382251" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(31.6,24.4)"><rect class="bar-value" height="87.82734856234289" y="33.7726514376571" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(61.2,24.4)"><rect class="bar-value" height="111.25754722921059" y="10.342452770789407" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(90.80000000000001,24.4)"><rect class="bar-value" height="111.3125750371828" y="10.287424962817198" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(120.4,24.4)"><rect class="bar-value" height="98.67058893918136" y="22.929411060818637" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(150,24.4)"><rect class="bar-value" height="97.85316714262979" y="23.746832857370208" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(179.60000000000002,24.4)"><rect class="bar-value" height="99.33393194815541" y="22.266068051844584" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(209.20000000000002,24.4)"><rect class="bar-value" height="111.39364782648754" y="10.206352173512457" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar" transform="translate(238.8,24.4)"><rect class="bar-value" height="120.57976127052486" y="1.020238729475139" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="bar bar-selected" transform="translate(268.40000000000003,24.4)"><rect class="bar-value" height="121.6" y="0" width="29.6"></rect><rect class="bar-mask" height="145.6" width="29.6"></rect></g><g class="x-axis-baseline"><line x1="0" x2="300" transform="translate(0,146)"></line></g><g class="extent-line"><text transform="translate(0,13)">800m barrels</text><line x1="0" x2="300" transform="translate(0,18)"></line></g></svg></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=",">762,254,430 </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">2016</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>
</section>
</section>
/* Charts: No context defined */

/* Charts */
{
  "className": "h3.cart-title",
  "text": "Bar charts"
}

/* Mobile Sparkbars */
{
  "className": "hide-expanded.chart-title-small",
  "text": "Mobile sparkbar accordions!"
}