County production map

The county production map is an interactive map showing production values for all counties within a single state. The map is paired with a data table so that clicking a county highlights that county’s production values within the table.

How to use

Specify the state_id variable as the two-letter state abbreviation e.g. AK for Alaska. Include the location/section-ownership.html template.

<div class="chart-list">
    <div class="map-container">
        <h4 class="chart-title">County production</h4>

        <figure is="eiti-data-map-table">
            <eiti-data-map color-scheme="Blues" steps="4" units="mcf">
                <div class="container">
                    <div is="eiti-tooltip-wrapper" tooltip-style="subtle" cursor-offset="10" class="svg-container county map-container " style="padding-bottom: 245.738px;" data-dimensions="0.7863247863247863">
                        <svg class="county map" viewBox="597 361 117 92">
              <g class="states features">
                <use xlink:href="../../maps/states/all.svg#states"></use>
              </g>
              <g class="states mesh">
                <use xlink:href="../../maps/states/all.svg#states-mesh"></use>
              </g>
              <g class="counties features">
                <use xlink:href="../../maps/states/AL.svg#counties"></use>
              </g>
              <g class="county feature" data-fips="01003" data-value="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}" fill="#e1f4fa">
                <title desc="Baldwin County" alt="Baldwin County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01003"></use>
              </g>
              <g class="county feature" data-fips="01053" data-value="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}" fill="#e1f4fa">
                <title desc="Escambia County" alt="Escambia County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01053"></use>
              </g>
              <g class="county feature" data-fips="01057" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}">
                <title desc="Fayette County" alt="Fayette County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01057"></use>
              </g>
              <g class="county feature selected" data-fips="01075" data-value="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}" fill="#e1f4fa">
                <title desc="Lamar County" alt="Lamar County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01075"></use>
              </g>
              <g class="county feature" data-fips="01097" data-value="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}" fill="#005078">
                <title desc="Mobile County" alt="Mobile County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01097"></use>
              </g>
              <g class="county feature" data-fips="01125" data-value="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}" fill="#e1f4fa">
                <title desc="Tuscaloosa County" alt="Tuscaloosa County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01125"></use>
              </g>
              <g class="counties mesh">
                <use xlink:href="../../maps/states/AL.svg#counties-mesh"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01003">
                <title desc="Baldwin County" alt="Baldwin County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01003"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01053">
               <title desc="Escambia County" alt="Escambia County"></title>
               <use xlink:href="../../maps/states/AL.svg#county-01053"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01057">
                <title desc="Fayette County" alt="Fayette County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01057"></use>
              </g>
              <g class="county feature only-stroke selected" data-fips="01075">
                <title desc="Lamar County" alt="Lamar County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01075"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01097">
                <title desc="Mobile County" alt="Mobile County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01097"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01125">
                <title desc="Tuscaloosa County" alt="Tuscaloosa County"></title>
                <use xlink:href="../../maps/states/AL.svg#county-01125"></use>
              </g>
              <g class="state feature overlay">
                <use xlink:href="../../maps/states/all.svg#state-AL"></use>
              </g>
            </svg>
                        <div class="eiti-tooltip subtle" aria-hidden="true" aria-label="Escambia County" style="left: 157px; top: 205px;">
                            <p>Escambia County</p>
                        </div>
                    </div>

                    <div class="legend-container ">

                        <figcaption class="legend-data" aria-hidden="false">
                            County production of gas in <span data-year="2017">2017</span> <span class="legend-units">(mcf)</span>
                        </figcaption>
                        <figcaption class="legend-no-data" aria-hidden="true">
                            There is no county-level data for Alabama in <span data-year="2017">2017</span>.
                        </figcaption>
                        <figcaption class="legend-withheld" aria-hidden="true">
                            County-level data for <span data-year="2017">2017</span> is withheld.
                        </figcaption>

                        <svg class="legend-svg vertical" aria-hidden="false"><g class="legendScale"><g class="legendCells"><g class="cell" transform="translate(0, 0)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(225, 244, 250);"></rect><text class="label" transform="translate(21,12.5)">0 – 2.7m</text></g><g class="cell" transform="translate(0, 25)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(161, 212, 237);"></rect><text class="label" transform="translate(21,12.5)">2.7m – 5.5m</text></g><g class="cell" transform="translate(0, 50)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(61, 149, 189);"></rect><text class="label" transform="translate(21,12.5)">5.5m – 8.2m</text></g><g class="cell" transform="translate(0, 75)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(0, 80, 120);"></rect><text class="label" transform="translate(21,12.5)">8.2m – 11m</text></g></g></g></svg>
                    </div>
                </div>
                <!-- .container -->

                <h4 class="details-container" aria-hidden="false">
                    <button is="aria-toggle" aria-controls="federal-production-gas-mcf-counties" aria-expanded="true" type="button">
              <span class="hide-expanded">
                <img class="aria-toggle-icon" alt="icon with a plus sign" src="../../img/icons/icon-circled-plus.svg">
                Show table
              </span>
              <span class="show-expanded">
                <img class="aria-toggle-icon" alt="icon with a minus sign" src="../../img/icons/icon-circled-minus.svg">
                Hide table
              </span>
          </button>
                </h4>
            </eiti-data-map>

            <div class="eiti-data-map-table" id="federal-production-gas-mcf-counties" aria-hidden="false">
                <table is="bar-chart-table" data-percent-max="100" class="county-table" year="2017">
                    <thead>
                        <tr>
                            <th>County</th>
                            <th colspan="2" class="numeric" data-series="volume">Mcf of gas</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="inner-table-row">
                            <td colspan="3" class="inner-table-cell">
                                <div class="inner-table-wrapper">
                                    <table>
                                        <tbody>
                                            <tr data-fips="01003" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}"
                                                aria-hidden="false" class="">
                                                <td>
                                                    <div class="swatch" data-value-swatch="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}"
                                                        style="background-color: rgb(225, 244, 250);"></div>Baldwin County</td>
                                                <td data-value-text="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}">45,012</td>
                                                <td class="numberless" data-series="volume" data-value="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}">
                                                    <div class="bar">
                                                        <div class="bar" style="width: 0.412354%;"></div>
                                                    </div><span class="text">45,012</span></td>
                                            </tr>

                                            <tr data-fips="01003" class="" aria-hidden="false">
                                                <td colspan="3" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}"
                                                    data-sentence="45012" aria-hidden="true" data-withheld="false">
                                                    <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Baldwin County in <span data-year="2017">2017</span> is withheld.
                                                    </span>
                                                    <span class="has-data" aria-hidden="false">
                              <span data-value="45012">45,012</span> mcf of gas were produced in Baldwin County in <span data-year="2017">2017</span>.
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr data-fips="01053" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}" aria-hidden="false" class="">
                                                <td>
                                                    <div class="swatch" data-value-swatch="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}"
                                                        style="background-color: rgb(225, 244, 250);"></div>Escambia County</td>
                                                <td data-value-text="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}">3,935</td>
                                                <td class="numberless" data-series="volume" data-value="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}">
                                                    <div class="bar">
                                                        <div class="bar" style="width: 0.0360485%;"></div>
                                                    </div><span class="text">3,935</span></td>
                                            </tr>

                                            <tr data-fips="01053" class="" aria-hidden="false">
                                                <td colspan="3" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}" data-sentence="3935" aria-hidden="true"
                                                    data-withheld="false">
                                                    <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Escambia County in <span data-year="2017">2017</span> is withheld.
                                                    </span>
                                                    <span class="has-data" aria-hidden="false">
                              <span data-value="3935">3,935</span> mcf of gas were produced in Escambia County in <span data-year="2017">2017</span>.
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr data-fips="01057" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}" aria-hidden="true">
                                                <td>
                                                    <div class="swatch" data-value-swatch="0" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}"></div>Fayette County</td>
                                                <td data-value-text="0" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}">Withheld</td>
                                                <td class="numberless" data-series="volume" data-value="0" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}">
                                                    <div class="bar">
                                                        <div class="bar" style="width: 0%; display: none;"></div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr data-fips="01057">
                                                <td colspan="3" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}" data-sentence="Withheld" aria-hidden="true" data-withheld="false">
                                                    <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Fayette County in <span data-year="2017">2017</span> is withheld.
                                                    </span>
                                                    <span class="has-data" aria-hidden="false">
                              <span data-value="0">0</span> mcf of gas were produced in Fayette County in <span data-year="2017">2017</span>.
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr data-fips="01075" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}" aria-hidden="false"
                                                class="selected">
                                                <td>
                                                    <div class="swatch" data-value-swatch="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}"
                                                        style="background-color: rgb(225, 244, 250);"></div>Lamar County</td>
                                                <td data-value-text="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}">63</td>
                                                <td class="numberless" data-series="volume" data-value="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}">
                                                    <div class="bar">
                                                        <div class="bar" style="width: 0.000577142%;"></div>
                                                    </div><span class="text">63</span></td>
                                            </tr>
                                            <tr data-fips="01075" class="selected" aria-hidden="false">
                                                <td colspan="3" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}" data-sentence="63" aria-hidden="false"
                                                    data-withheld="false">
                                                    <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Lamar County in <span data-year="2017">2017</span> is withheld.
                                                    </span>
                                                    <span class="has-data" aria-hidden="false">
                              <span data-value="63">63</span> mcf of gas were produced in Lamar County in <span data-year="2017">2017</span>.
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr data-fips="01097" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}"
                                                aria-hidden="false" class="">
                                                <td>
                                                    <div class="swatch" data-value-swatch="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}"
                                                        style="background-color: rgb(0, 80, 120);"></div>Mobile County</td>
                                                <td data-value-text="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}">10,915,860</td>
                                                <td class="numberless" data-series="volume" data-value="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}">
                                                    <div class="bar">
                                                        <div class="bar" style="width: 100%;"></div>
                                                    </div><span class="text">10,915,860</span></td>
                                            </tr>
                                            <tr data-fips="01097" class="" aria-hidden="false">
                                                <td colspan="3" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}"
                                                    data-sentence="10915860" aria-hidden="true" data-withheld="false">
                                                    <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Mobile County in <span data-year="2017">2017</span> is withheld.
                                                    </span>
                                                    <span class="has-data" aria-hidden="false">
                              <span data-value="10915860">10,915,860</span> mcf of gas were produced in Mobile County in <span data-year="2017">2017</span>.
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr data-fips="01125" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}"
                                                aria-hidden="false" class="">
                                                <td>
                                                    <div class="swatch" data-value-swatch="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}"
                                                        style="background-color: rgb(225, 244, 250);"></div>Tuscaloosa County</td>
                                                <td data-value-text="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}">331,485</td>
                                                <td class="numberless" data-series="volume" data-value="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}">
                                                    <div class="bar">
                                                        <div class="bar" style="width: 3.03673%;"></div>
                                                    </div><span class="text">331,485</span></td>
                                            </tr>
                                            <tr data-fips="01125" class="" aria-hidden="false">
                                                <td colspan="3" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}"
                                                    data-sentence="331485" aria-hidden="true" data-withheld="false">
                                                    <span class="withheld" aria-hidden="true">
                            Data about gas extraction on federal land in Tuscaloosa County in <span data-year="2017">2017</span> is withheld.
                                                    </span>
                                                    <span class="has-data" aria-hidden="false">
                            <span data-value="331485">331,485</span> mcf of gas were produced in Tuscaloosa County in <span data-year="2017">2017</span>.
                                                    </span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- /.table-container -->
        </figure>
    </div>
</div>
<div class="chart-list">
  <div class="map-container">
    <h4 class="chart-title">County production</h4>

    <figure is="eiti-data-map-table">
      <eiti-data-map color-scheme="Blues" steps="4" units="mcf">
        <div class="container">
          <div is="eiti-tooltip-wrapper" tooltip-style="subtle" cursor-offset="10" class="svg-container county map-container " style="padding-bottom: 245.738px;" data-dimensions="0.7863247863247863">
            <svg class="county map" viewBox="597 361 117 92">
              <g class="states features">
                <use xlink:href="{{ path '/maps/states/all.svg' }}#states"></use>
              </g>
              <g class="states mesh">
                <use xlink:href="{{ path '/maps/states/all.svg' }}#states-mesh"></use>
              </g>
              <g class="counties features">
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#counties"></use>
              </g>
              <g class="county feature" data-fips="01003" data-value="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}" fill="#e1f4fa">
                <title desc="Baldwin County" alt="Baldwin County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01003"></use>
              </g>
              <g class="county feature" data-fips="01053" data-value="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}" fill="#e1f4fa">
                <title desc="Escambia County" alt="Escambia County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01053"></use>
              </g>
              <g class="county feature" data-fips="01057" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}">
                <title desc="Fayette County" alt="Fayette County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01057"></use>
              </g>
              <g class="county feature selected" data-fips="01075" data-value="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}" fill="#e1f4fa">
                <title desc="Lamar County" alt="Lamar County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01075"></use>
              </g>
              <g class="county feature" data-fips="01097" data-value="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}" fill="#005078">
                <title desc="Mobile County" alt="Mobile County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01097"></use>
              </g>
              <g class="county feature" data-fips="01125" data-value="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}" fill="#e1f4fa">
                <title desc="Tuscaloosa County" alt="Tuscaloosa County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01125"></use>
              </g>
              <g class="counties mesh">
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#counties-mesh"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01003">
                <title desc="Baldwin County" alt="Baldwin County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01003"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01053">
               <title desc="Escambia County" alt="Escambia County"></title>
               <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01053"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01057">
                <title desc="Fayette County" alt="Fayette County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01057"></use>
              </g>
              <g class="county feature only-stroke selected" data-fips="01075">
                <title desc="Lamar County" alt="Lamar County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01075"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01097">
                <title desc="Mobile County" alt="Mobile County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01097"></use>
              </g>
              <g class="county feature only-stroke" data-fips="01125">
                <title desc="Tuscaloosa County" alt="Tuscaloosa County"></title>
                <use xlink:href="{{ path '/maps/states/AL.svg' }}#county-01125"></use>
              </g>
              <g class="state feature overlay">
                <use xlink:href="{{ path '/maps/states/all.svg' }}#state-AL"></use>
              </g>
            </svg>
            <div class="eiti-tooltip subtle" aria-hidden="true" aria-label="Escambia County" style="left: 157px; top: 205px;"><p>Escambia County</p></div></div>

    <div class="legend-container ">

        <figcaption class="legend-data" aria-hidden="false">
          County production of gas in <span data-year="2017">2017</span> <span class="legend-units">(mcf)</span>
        </figcaption>
        <figcaption class="legend-no-data" aria-hidden="true">
          There is no county-level data for Alabama in <span data-year="2017">2017</span>.
        </figcaption>
        <figcaption class="legend-withheld" aria-hidden="true">
          County-level data for <span data-year="2017">2017</span> is withheld.
        </figcaption>

      <svg class="legend-svg vertical" aria-hidden="false"><g class="legendScale"><g class="legendCells"><g class="cell" transform="translate(0, 0)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(225, 244, 250);"></rect><text class="label" transform="translate(21,12.5)">0 – 2.7m</text></g><g class="cell" transform="translate(0, 25)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(161, 212, 237);"></rect><text class="label" transform="translate(21,12.5)">2.7m – 5.5m</text></g><g class="cell" transform="translate(0, 50)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(61, 149, 189);"></rect><text class="label" transform="translate(21,12.5)">5.5m – 8.2m</text></g><g class="cell" transform="translate(0, 75)" style="opacity: 1;"><rect class="swatch" height="15" width="15" style="fill: rgb(0, 80, 120);"></rect><text class="label" transform="translate(21,12.5)">8.2m – 11m</text></g></g></g></svg>
    </div>
  </div><!-- .container -->

        <h4 class="details-container" aria-hidden="false">
          <button is="aria-toggle" aria-controls="federal-production-gas-mcf-counties" aria-expanded="true" type="button">
              <span class="hide-expanded">
                <img class="aria-toggle-icon" alt="icon with a plus sign" src="{{ path '/img/icons/icon-circled-plus.svg' }}">
                Show table
              </span>
              <span class="show-expanded">
                <img class="aria-toggle-icon" alt="icon with a minus sign" src="{{ path '/img/icons/icon-circled-minus.svg' }}">
                Hide table
              </span>
          </button>
        </h4>
      </eiti-data-map>

      <div class="eiti-data-map-table" id="federal-production-gas-mcf-counties" aria-hidden="false">
        <table is="bar-chart-table" data-percent-max="100" class="county-table" year="2017">
          <thead>
            <tr>
              <th>County</th>
              <th colspan="2" class="numeric" data-series="volume">Mcf of gas</th>
            </tr>
          </thead>
          <tbody>
            <tr class="inner-table-row">
              <td colspan="3" class="inner-table-cell">
                <div class="inner-table-wrapper">
                  <table>
                    <tbody>
                      <tr data-fips="01003" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}" aria-hidden="false" class="">
                        <td><div class="swatch" data-value-swatch="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}" style="background-color: rgb(225, 244, 250);"></div>Baldwin County</td>
                        <td data-value-text="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}">45,012</td>
                        <td class="numberless" data-series="volume" data-value="45012" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}"><div class="bar"><div class="bar" style="width: 0.412354%;"></div></div><span class="text">45,012</span></td>
                      </tr>

                      <tr data-fips="01003" class="" aria-hidden="false">
                        <td colspan="3" data-year-values="{&quot;2008&quot;:61347,&quot;2009&quot;:60034,&quot;2010&quot;:48367,&quot;2011&quot;:43324,&quot;2012&quot;:41802,&quot;2013&quot;:52715,&quot;2014&quot;:40669,&quot;2015&quot;:23373,&quot;2016&quot;:52449,&quot;2017&quot;:45012}" data-sentence="45012" aria-hidden="true" data-withheld="false">
                            <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Baldwin County in <span data-year="2017">2017</span> is withheld.
                            </span>
                            <span class="has-data" aria-hidden="false">
                              <span data-value="45012">45,012</span> mcf of gas were produced in Baldwin County in <span data-year="2017">2017</span>.
                            </span>
                          </td>
                      </tr>
                      <tr data-fips="01053" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}" aria-hidden="false" class="">
                        <td><div class="swatch" data-value-swatch="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}" style="background-color: rgb(225, 244, 250);"></div>Escambia County</td>
                        <td data-value-text="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}">3,935</td>
                        <td class="numberless" data-series="volume" data-value="3935" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}"><div class="bar"><div class="bar" style="width: 0.0360485%;"></div></div><span class="text">3,935</span></td>
                      </tr>

                      <tr data-fips="01053" class="" aria-hidden="false">
                        <td colspan="3" data-year-values="{&quot;2008&quot;:2131,&quot;2009&quot;:1935,&quot;2010&quot;:1844,&quot;2011&quot;:711,&quot;2014&quot;:971,&quot;2015&quot;:9319,&quot;2016&quot;:13232,&quot;2017&quot;:3935}" data-sentence="3935" aria-hidden="true" data-withheld="false">
                            <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Escambia County in <span data-year="2017">2017</span> is withheld.
                            </span>
                            <span class="has-data" aria-hidden="false">
                              <span data-value="3935">3,935</span> mcf of gas were produced in Escambia County in <span data-year="2017">2017</span>.
                            </span>
                          </td>
                      </tr>
                      <tr data-fips="01057" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}" aria-hidden="true">
                        <td><div class="swatch" data-value-swatch="0" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}"></div>Fayette County</td>
                        <td data-value-text="0" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}">Withheld</td>
                        <td class="numberless" data-series="volume" data-value="0" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}"><div class="bar"><div class="bar" style="width: 0%; display: none;"></div></div></td>
                      </tr>

                      <tr data-fips="01057">
                        <td colspan="3" data-year-values="{&quot;2008&quot;:4509,&quot;2009&quot;:3931,&quot;2010&quot;:3246,&quot;2011&quot;:3896,&quot;2012&quot;:1453}" data-sentence="Withheld" aria-hidden="true" data-withheld="false">
                            <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Fayette County in <span data-year="2017">2017</span> is withheld.
                            </span>
                            <span class="has-data" aria-hidden="false">
                              <span data-value="0">0</span> mcf of gas were produced in Fayette County in <span data-year="2017">2017</span>.
                            </span>
                          </td>
                      </tr>
                      <tr data-fips="01075" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}" aria-hidden="false" class="selected">
                        <td><div class="swatch" data-value-swatch="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}" style="background-color: rgb(225, 244, 250);"></div>Lamar County</td>
                        <td data-value-text="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}">63</td>
                        <td class="numberless" data-series="volume" data-value="63" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}"><div class="bar"><div class="bar" style="width: 0.000577142%;"></div></div><span class="text">63</span></td>
                      </tr>
                      <tr data-fips="01075" class="selected" aria-hidden="false">
                        <td colspan="3" data-year-values="{&quot;2008&quot;:976,&quot;2009&quot;:663,&quot;2010&quot;:661,&quot;2011&quot;:566,&quot;2012&quot;:661,&quot;2013&quot;:651,&quot;2014&quot;:434,&quot;2015&quot;:243,&quot;2017&quot;:63}" data-sentence="63" aria-hidden="false" data-withheld="false">
                            <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Lamar County in <span data-year="2017">2017</span> is withheld.
                            </span>
                            <span class="has-data" aria-hidden="false">
                              <span data-value="63">63</span> mcf of gas were produced in Lamar County in <span data-year="2017">2017</span>.
                            </span>
                          </td>
                      </tr>
                      <tr data-fips="01097" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}" aria-hidden="false" class="">
                        <td><div class="swatch" data-value-swatch="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}" style="background-color: rgb(0, 80, 120);"></div>Mobile County</td>
                        <td data-value-text="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}">10,915,860</td>
                        <td class="numberless" data-series="volume" data-value="10915860" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}"><div class="bar"><div class="bar" style="width: 100%;"></div></div><span class="text">10,915,860</span></td>
                      </tr>
                      <tr data-fips="01097" class="" aria-hidden="false">
                        <td colspan="3" data-year-values="{&quot;2008&quot;:22277408,&quot;2009&quot;:19941926,&quot;2010&quot;:18167855,&quot;2011&quot;:16216344,&quot;2012&quot;:17477538,&quot;2013&quot;:11748139,&quot;2014&quot;:14735766,&quot;2015&quot;:13477164,&quot;2016&quot;:13089835,&quot;2017&quot;:10915860}" data-sentence="10915860" aria-hidden="true" data-withheld="false">
                            <span class="withheld" aria-hidden="true">
                              Data about gas extraction on federal land in Mobile County in <span data-year="2017">2017</span> is withheld.
                            </span>
                            <span class="has-data" aria-hidden="false">
                              <span data-value="10915860">10,915,860</span> mcf of gas were produced in Mobile County in <span data-year="2017">2017</span>.
                            </span>
                          </td>
                      </tr>
                      <tr data-fips="01125" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}" aria-hidden="false" class="">
                        <td><div class="swatch" data-value-swatch="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}" style="background-color: rgb(225, 244, 250);"></div>Tuscaloosa County</td>
                        <td data-value-text="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}">331,485</td>
                        <td class="numberless" data-series="volume" data-value="331485" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}"><div class="bar"><div class="bar" style="width: 3.03673%;"></div></div><span class="text">331,485</span></td>
                      </tr>
                      <tr data-fips="01125" class="" aria-hidden="false">
                        <td colspan="3" data-year-values="{&quot;2008&quot;:614386,&quot;2009&quot;:568446,&quot;2010&quot;:557635,&quot;2011&quot;:525323,&quot;2012&quot;:488945,&quot;2013&quot;:457696,&quot;2014&quot;:421269,&quot;2015&quot;:408761,&quot;2016&quot;:375973,&quot;2017&quot;:331485}" data-sentence="331485" aria-hidden="true" data-withheld="false">
                          <span class="withheld" aria-hidden="true">
                            Data about gas extraction on federal land in Tuscaloosa County in <span data-year="2017">2017</span> is withheld.
                          </span>
                          <span class="has-data" aria-hidden="false">
                            <span data-value="331485">331,485</span> mcf of gas were produced in Tuscaloosa County in <span data-year="2017">2017</span>.
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div><!-- /.table-container -->
    </figure>
  </div>
</div>
{
  "container": {
    "class": "container-left-3"
  }
}
  • Handle: @county-production
  • Preview:
  • Filesystem Path: components/components/maps/county-production/county-production.hbs