    
        <head>
            <meta charset='UTF-8'>
            <meta name='viewport' content='width=device-width, initial-scale=1.0'>
            <title>Corporate & State CO2 Emissions</title>
            <script src='https://cdn.tailwindcss.com'></script>
            <script src='https://d3js.org/d3.v7.min.js'></script>
            <link href='https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap' rel='stylesheet'>
            <style>
                body { font-family: 'Inter', sans-serif !important; overflow: hidden; }
                #app-container { display: flex; flex-direction: column; height: 100vh; }
                #chart-wrapper { position: relative; width: 100%; height: 100%; transition: width 0.3s ease-in-out, height 0.3s ease-in-out; }
                #details-panel { background-color: #111827; width: 100%; height: 0; overflow: hidden; flex-shrink: 0; transition: height 0.3s ease-in-out, width 0.3s ease-in-out; border-top: 2px solid #374151; }
                @media (min-width: 768px) {
                    #app-container.details-visible { flex-direction: row; }
                    #app-container.details-visible #chart-wrapper { width: 65%; height: 100%; }
                    #app-container.details-visible #details-panel { width: 35%; min-width: 300px; height: 100%; border-top: none; border-left: 2px solid #374151; }
                }
                @media (max-width: 767px) {
                    #app-container.details-visible #chart-wrapper { height: 50%; }
                    #app-container.details-visible #details-panel { height: 50%; }
                }
                .label, .rank-label, .cluster-label { font-weight: 500; fill: #fff; text-anchor: middle; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.7); transition: font-size 0.2s, opacity 0.3s, transform 0.3s ease-out; }
                .cluster-label { font-size: 1.25rem; font-weight: 700; opacity: 0; fill: #9ca3af; }
                .rank-label { font-weight: 700; opacity: 0; }
                .label { opacity: 1; }
                .node { cursor: pointer; }
                .node circle { transition: stroke 0.3s ease-out, stroke-width 0.3s ease-out, r 0.3s ease-out; }
                .node.selected circle { stroke: #22d3ee; stroke-width: 4px; }
                #title-container { transition: opacity 0.4s ease; }
                #title-container h1 { text-transform: uppercase; }
                .title-hidden { opacity: 0; }
                #selected-node-container { display: flex; align-items: center; justify-content: center; }
                #selected-node-container .total-emissions-bg { fill: rgba(107, 114, 128, 0.15); stroke: rgba(107, 114, 128, 0.4); stroke-width: 2px; stroke-dasharray: 10 5; }
                .control-button { width: 2.5rem; height: 2.5rem; background-color: rgba(55, 65, 81, 0.8); backdrop-filter: blur(4px); color: white; border-radius: 9999px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; border: 1px solid rgba(107, 114, 128, 0.5); flex-shrink: 0; }
                .control-button:hover { background-color: #4b5563; }
                #info-button { font-style: italic; font-family: 'Times New Roman', serif; font-size: 1.5rem; font-weight: bold; }
                .filter-button { background-color: #374151; color: #d1d5db; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; transition: all 0.2s; }
                .filter-button:hover { background-color: #4b5563; }
                .filter-button.active { background-color: #16a34a; color: white; border-color: #16a34a; font-weight: 600; }
            </style>
        </head>
        <body class='bg-gray-900 text-gray-200'>
            <div id='app-container'>
                <div id='chart-wrapper'>
                    <div id='top-controls' class='absolute top-0 left-0 right-0 z-20 p-4 flex justify-between items-start gap-4'>
                        <button id='info-button' class='control-button'><i>i</i></button>
                        <div class='flex flex-col items-center gap-4 flex-grow'>
                            <div id='filters' class='flex flex-wrap gap-2 justify-center p-2 bg-gray-900/50 rounded-full backdrop-blur-sm'>
                                <button class='filter-button active' data-filter='all'>All</button>
                                <button class='filter-button' data-filter='country'>By Country</button>
                                <button class='filter-button' data-filter='Oil & Gas'>Oil & Gas</button>
                                <button class='filter-button' data-filter='Coal'>Coal</button>
                                <button class='filter-button' data-filter='Mining'>Mining</button>
                                <button class='filter-button' data-filter='Manufacturing & Construction'>Manuf. & Const.</button>
                            </div>
                            <div id='title-container' class='text-center pointer-events-none'>
                                <h1 class='text-xl md:text-2xl font-bold text-white'>Top 100 CO₂ Emitters</h1>
                                <p class='text-xs md:text-sm text-gray-400'>1965-2018 | Bubble size represents total emissions</p>
                            </div>
                        </div>
                        <div id='zoom-controls' class='flex flex-col space-y-3'>
                            <button id='zoom-in' class='control-button text-2xl pb-1'>&plus;</button>
                            <button id='zoom-out' class='control-button text-2xl pb-1'>&minus;</button>
                        </div>
                    </div>
                    <div id='chart-container' class='w-full h-full absolute top-0 left-0'></div>
                </div>
                <div id='details-panel'>
                    <div id='details-content' class='p-4 md:p-6 w-full h-full overflow-y-auto hidden'>
                        <div class='flex justify-between items-start'>
                            <div>
                                <h2 id='modal-company-name' class='text-xl md:text-2xl font-bold text-cyan-400'></h2>
                                <p id='modal-company-country' class='text-gray-400 text-sm'></p>
                            </div>
                            <button id='close-modal' class='text-gray-400 hover:text-white text-4xl leading-none font-light -mt-2'>&times;</button>
                        </div>
                        <div id='selected-node-container' class='my-4 h-40 md:h-48'></div>
                        <div id='percentage-container' class='text-center -mt-4 mb-4'></div>
                        <div class='mt-4 border-t border-gray-700 pt-4'>
                             <div id='modal-wiki-content' class='mb-4'>
                                 <p id='modal-description' class='text-sm text-gray-300 mb-4'></p>
                                 <a id='modal-wiki-link' href='#' target='_blank' rel='noopener noreferrer' class='text-cyan-400 hover:text-cyan-300 text-sm font-semibold'>Read more on Wikipedia &rarr;</a>
                             </div>
                             <div id='modal-data-sections' class='space-y-4 border-t border-gray-700 pt-4'>
                                 <div class='space-y-3'>
                                    <p class='text-sm text-gray-400'>Total Emissions (1965-2018)</p>
                                    <p id='modal-total-emissions' class='text-2xl font-semibold'></p>
                                    <div class='flex items-start space-x-3 bg-gray-800 p-3 rounded-lg'>
                                        <svg class='w-6 h-6 text-cyan-400 flex-shrink-0 mt-1' viewBox='0 0 24 24' fill='currentColor'><path d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'></path></svg>
                                        <div><p class='text-sm text-gray-300'>Equivalent to <strong id='modal-total-car-equivalent' class='text-xl font-bold text-cyan-400'></strong> cars on the road for a year.</p></div>
                                    </div>
                                 </div>
                                 <div class='space-y-3'>
                                    <p class='text-sm text-gray-400'>Average Annual Emissions</p>
                                    <p id='modal-avg-emissions' class='text-xl font-medium'></p>
                                    <div class='flex items-start space-x-3 bg-gray-800 p-3 rounded-lg'>
                                         <svg class='w-6 h-6 text-cyan-400 flex-shrink-0 mt-1' viewBox='0 0 24 24' fill='currentColor'><path d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'></path></svg>
                                        <div><p class='text-sm text-gray-300'>Equivalent to <strong id='modal-annual-car-equivalent' class='text-xl font-bold text-cyan-400'></strong> cars on the road for a year.</p></div>
                                    </div>
                                 </div>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style='position: absolute; bottom: 1rem; left: 1rem; z-index: 10; font-size: 0.75rem; color: #6b7280; line-height: 1rem;'>
                Source: Climate Accountability Institute, 'Carbon Majors' database (2020 update).
            </div>
            <script>
                (function() {
                    const allEmissionsData = [
                        {'name':'China (Coal)','emissions_gt':220.12, 'country': 'China', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Coal_in_China', 'description':'This entity represents the aggregated emissions from all state-owned coal production in China, not a single company. China is the world&apos;s largest producer and consumer of coal.'},
                        {'name':'Former USSR (State)','emissions_gt':67.89, 'country': 'Former USSR', 'category': 'Oil & Gas', 'description':'This represents the cumulative emissions from the state-owned fossil fuel production enterprises of the former Soviet Union prior to its dissolution in 1991. These assets were later divided among successor states like Russia, Ukraine, and Kazakhstan.'},
                        {'name':'Saudi Aramco','emissions_gt':57.43, 'country': 'Saudi Arabia', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Saudi_Aramco', 'description':'Saudi Aramco, officially the Saudi Arabian Oil Group, is a state-owned petroleum and natural gas company that is the national oil company of Saudi Arabia.'},
                        {'name':'Gazprom','emissions_gt':44.51, 'country': 'Russia', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Gazprom', 'description':'PJSC Gazprom is a Russian majority state-owned multinational energy corporation headquartered in the Lakhta Center in Saint Petersburg.'},
                        {'name':'National Iranian Oil Company','emissions_gt':36.85, 'country': 'Iran', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/National_Iranian_Oil_Company', 'description':'The National Iranian Oil Company is a state-owned national oil and natural gas producer and distributor under the direction of the Ministry of Petroleum of Iran.'},
                        {'name':'ExxonMobil','emissions_gt':36.31, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/ExxonMobil', 'description':'ExxonMobil Corporation is an American multinational oil and gas corporation headquartered in Spring, Texas. It is the largest direct descendant of John D. Rockefeller&apos;s Standard Oil.'},
                        {'name':'Rosneft','emissions_gt':34.42, 'country': 'Russia', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Rosneft', 'description':'Rosneft is a Russian integrated energy company headquartered in Moscow. Rosneft specializes in the exploration, extraction, production, refinement, transport, and sale of petroleum, natural gas, and petroleum products.'},
                        {'name':'Royal Dutch Shell','emissions_gt':31.42, 'country': 'Netherlands', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Shell_plc', 'description':'Shell plc is a British multinational oil and gas company headquartered in London, England. It is one of the oil and gas supermajors and one of the largest companies in the world.'},
                        {'name':'Coal India','emissions_gt':25.33, 'country': 'India', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Coal_India', 'description':'Coal India Limited (CIL) is an Indian public sector undertaking. It is a Maharatna PSU under the ownership of the Ministry of Coal, Government of India. It is the largest government-owned-coal-producer in the world.'},
                        {'name':'BP','emissions_gt':24.55, 'country': 'UK', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/BP', 'description':'BP plc is a British multinational oil and gas company headquartered in London, England. It is one of the oil and gas supermajors.'},
                        {'name':'PetroChina (CNPC)','emissions_gt':24.23, 'country': 'China', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/PetroChina', 'description':'PetroChina Company Limited is a Chinese oil and gas company and is the listed arm of state-owned China National Petroleum Corporation (CNPC), headquartered in Dongcheng District, Beijing.'},
                        {'name':'Pemex','emissions_gt':22.78, 'country': 'Mexico', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Pemex', 'description':'Petróleos Mexicanos, better known as Pemex, is the Mexican state-owned petroleum company, created in 1938 by nationalization or expropriation of all private, foreign, and domestic oil companies at that time.'},
                        {'name':'Chevron','emissions_gt':21.84, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Chevron_Corporation', 'description':'Chevron Corporation is an American multinational energy corporation predominantly in oil and gas. The second largest direct descendant of Standard Oil, it is headquartered in San Ramon, California.'},
                        {'name':'Peabody Energy','emissions_gt':18.01, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Peabody_Energy', 'description':'Peabody Energy is a coal-mining and selling company headquartered in St. Louis, Missouri. Its primary business consists of the mining, sale, and distribution of coal.'},
                        {'name':'Poland (Coal)','emissions_gt':14.88, 'country': 'Poland', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Coal_in_Poland', 'description':'Represents Poland&apos;s state-owned coal production. Poland has a long history as a major coal producer, with companies like PGG (Polska Grupa Górnicza) being significant players in European coal markets.'},
                        {'name':'Kuwait Petroleum Corp','emissions_gt':14.49, 'country': 'Kuwait', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Kuwait_Petroleum_Corporation', 'description':'Kuwait Petroleum Corporation is Kuwait&apos;s national oil company, headquartered in Kuwait City.'},
                        {'name':'ConocoPhillips','emissions_gt':14.47, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/ConocoPhillips', 'description':'ConocoPhillips is an American multinational corporation engaged in hydrocarbon exploration and production. It is based in the Energy Corridor district of Houston, Texas.'},
                        {'name':'Total','emissions_gt':14.28, 'country': 'France', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/TotalEnergies', 'description':'TotalEnergies SE is a French multinational integrated energy and petroleum company founded in 1924 and one of the seven supermajor oil companies.'},
                        {'name':'Sinopec','emissions_gt':14.07, 'country': 'China', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Sinopec', 'description':'China Petroleum & Chemical Corporation, or Sinopec, is a Chinese oil and gas enterprise based in Beijing. It is listed in Hong Kong and also trades in Shanghai and New York.'},
                        {'name':'Abu Dhabi National Oil Company','emissions_gt':13.91, 'country': 'UAE', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/ADNOC', 'description':'The Abu Dhabi National Oil Company or ADNOC is the state-owned oil company of the United Arab Emirates (UAE). It is the world&apos;s 12th largest oil company by production.'},
                        {'name':'BHP','emissions_gt':13.23, 'country': 'Australia', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/BHP', 'description':'BHP Group Limited is an Australian multinational mining and metals public company headquartered in Melbourne, Victoria, Australia. It is the largest mining company in the world based on market capitalization.'},
                        {'name':'Sonatrach','emissions_gt':12.75, 'country': 'Algeria', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Sonatrach', 'description':'Sonatrach is the national state-owned oil company of Algeria. Founded on December 31, 1963, it is known today to be the largest company in Africa with 154 subsidiaries.'},
                        {'name':'Lukoil','emissions_gt':11.23, 'country': 'Russia', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Lukoil', 'description':'PJSC Lukoil is a Russian multinational energy corporation headquartered in Moscow, specializing in the business of extraction, production, transport, and sale of petroleum, natural gas, and petroleum products.'},
                        {'name':'Petroleos de Venezuela (PDVSA)','emissions_gt':11.21, 'country': 'Venezuela', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/PDVSA', 'description':'Petróleos de Venezuela, S.A. is the Venezuelan state-owned oil and natural gas company. It has activities in exploration, production, refining and exporting oil as well as exploration and production of natural gas.'},
                        {'name':'Iraq National Oil Company','emissions_gt':10.66, 'country': 'Iraq', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Iraq_National_Oil_Company', 'description':'The Iraq National Oil Company is a national oil company of Iraq. It was established in 1966 by the Iraqi government. It is responsible for developing and operating the oil industry in Iraq.'},
                        {'name':'RWE','emissions_gt':10.51, 'country': 'Germany', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/RWE', 'description':'RWE AG is a German multinational energy company headquartered in Essen. It generates and trades electricity in Asia-Pacific, Europe and the United States.'},
                        {'name':'Eni','emissions_gt':10.42, 'country': 'Italy', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Eni', 'description':'Eni S.p.A. is an Italian multinational energy company headquartered in Rome. Considered one of the seven &apos;supermajor&apos; oil companies in the world, it has operations in 66 countries.'},
                        {'name':'Anglo American','emissions_gt':9.81, 'country': 'UK', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/Anglo_American_plc', 'description':'Anglo American plc is a British multinational mining company with headquarters in London, England. It is the world&apos;s largest producer of platinum, with around 40% of world output.'},
                        {'name':'Nigerian National Petroleum Corp','emissions_gt':9.51, 'country': 'Nigeria', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Nigerian_National_Petroleum_Corporation', 'description':'The Nigerian National Petroleum Corporation is the state oil corporation of Nigeria and a major player in the African oil and gas industry.'},
                        {'name':'Equinor (Statoil)','emissions_gt':9.47, 'country': 'Norway', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Equinor', 'description':'Equinor ASA is a Norwegian state-owned multinational energy company headquartered in Stavanger. It is primarily a petroleum company, operating in 36 countries with additional investments in renewable energy.'},
                        {'name':'Glencore','emissions_gt':8.79, 'country': 'Switzerland', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/Glencore', 'description':'Glencore plc is a Swiss multinational commodity trading and mining company with headquarters in Baar, Switzerland. Glencore&apos;s oil and gas head office is in London and its registered office is in Saint Helier, Jersey.'},
                        {'name':'Arch Coal','emissions_gt':7.83, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Arch_Resources', 'description':'Arch Resources, formerly known as Arch Coal, is an American coal mining and processing company. The company mines, processes, and markets low-sulfur bituminous and sub-bituminous coal.'},
                        {'name':'Petrobras','emissions_gt':7.77, 'country': 'Brazil', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Petrobras', 'description':'Petróleo Brasileiro S.A., better known by the portmanteau Petrobras, is a state-owned Brazilian multinational corporation in the petroleum industry headquartered in Rio de Janeiro, Brazil.'},
                        {'name':'Consol Energy','emissions_gt':7.35, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Consol_Energy', 'description':'Consol Energy Inc. is an American energy company with interests in coal and natural gas production. The company is a major producer of high-BTU bituminous thermal coal.'},
                        {'name':'Qatar Petroleum','emissions_gt':7.18, 'country': 'Qatar', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/QatarEnergy', 'description':'QatarEnergy, formerly Qatar Petroleum, is a state owned petroleum company of Qatar. The company operates all oil and gas activities in Qatar, including exploration, production, refining, transport, and storage.'},
                        {'name':'Egyptian General Petroleum Corp','emissions_gt':6.65, 'country': 'Egypt', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Egyptian_General_Petroleum_Corporation', 'description':'The Egyptian General Petroleum Corporation is a state-owned oil and gas company in Egypt.'},
                        {'name':'RAG AG','emissions_gt':6.49, 'country': 'Germany', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/RAG_Aktiengesellschaft', 'description':'RAG AG, formerly Ruhrkohle AG, is a German corporation based in Essen, North Rhine-Westphalia, which is active in the fields of mining, coal-based power generation, and real estate.'},
                        {'name':'Libya National Oil Corp','emissions_gt':6.45, 'country': 'Libya', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/National_Oil_Corporation', 'description':'The National Oil Corporation is the national oil company of Libya. It dominates Libya&apos;s oil industry, along with a number of smaller subsidiaries.'},
                        {'name':'Occidental Petroleum','emissions_gt':6.32, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Occidental_Petroleum', 'description':'Occidental Petroleum Corporation is an American company engaged in hydrocarbon exploration in the United States, the Middle East, and Colombia as well as petrochemical manufacturing.'},
                        {'name':'Caterpillar','emissions_gt':6.21, 'country': 'USA', 'category': 'Manufacturing & Construction', 'wiki_url':'https://en.wikipedia.org/wiki/Caterpillar_Inc.', 'description':'Caterpillar Inc. is an American construction, mining, and other engineering equipment manufacturer. The company is the world&apos;s largest construction-equipment manufacturer.'},
                        {'name':'Czech Republic (State)','emissions_gt':6.18, 'country': 'Czech Republic', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Energy_in_the_Czech_Republic', 'description':'Represents the state-owned fossil fuel enterprises of the Czech Republic, primarily related to coal mining and power generation. Companies like CEZ Group and OKD have historically been major players.'},
                        {'name':'TurkmenGaz','emissions_gt':5.88, 'country': 'Turkmenistan', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/T%C3%BCrkmengaz', 'description':'Türkmengaz is the national gas company of Turkmenistan. It is the largest gas company in Central Asia.'},
                        {'name':'Repsol','emissions_gt':5.65, 'country': 'Spain', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Repsol', 'description':'Repsol S.A. is a Spanish multinational energy and petrochemical company based in Madrid. It is engaged in worldwide upstream and downstream activities.'},
                        {'name':'Apache Corp','emissions_gt':5.51, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/APA_Corporation', 'description':'APA Corporation is a company engaged in hydrocarbon exploration. It is organized in Delaware and headquartered in Houston. The company is ranked 595th on the Fortune 500.'},
                        {'name':'Chesapeake Energy','emissions_gt':5.23, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Chesapeake_Energy', 'description':'Chesapeake Energy Corporation is an American company engaged in hydrocarbon exploration and production. It is headquartered in Oklahoma City, Oklahoma.'},
                        {'name':'Alpha Natural Resources','emissions_gt':5.11, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Alpha_Natural_Resources', 'description':'Alpha Metallurgical Resources, Inc., formerly Alpha Natural Resources, is a leading American supplier and exporter of metallurgical coal for the steel industry, based in Bristol, Tennessee.'},
                        {'name':'Anadarko','emissions_gt':4.98, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Anadarko_Petroleum', 'description':'Anadarko Petroleum Corporation was a company engaged in hydrocarbon exploration. In 2019, the company was acquired by Occidental Petroleum.'},
                        {'name':'Natural Resource Partners','emissions_gt':4.88, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Natural_Resource_Partners', 'description':'Natural Resource Partners LP is a Houston, Texas-based company that owns, manages, and leases a portfolio of mineral properties in the United States.'},
                        {'name':'EOG Resources','emissions_gt':4.76, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/EOG_Resources', 'description':'EOG Resources, Inc. is an American company engaged in hydrocarbon exploration. It is organized in Delaware and headquartered in Houston, Texas.'},
                        {'name':'Murray Coal','emissions_gt':4.65, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Murray_Energy', 'description':'Murray Energy was a coal mining company based in St. Clairsville, Ohio. It was one of the largest privately-owned coal companies in the United States.'},
                        {'name':'Devon Energy','emissions_gt':4.51, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Devon_Energy', 'description':'Devon Energy Corporation is an American energy company engaged in hydrocarbon exploration. It is organized in Delaware and headquartered in Oklahoma City, Oklahoma.'},
                        {'name':'Surgutneftegas','emissions_gt':4.33, 'country': 'Russia', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Surgutneftegas', 'description':'Surgutneftegas is a Russian oil and gas company. It was created by merging several previously state-owned companies owning large oil and gas reserves in Western Siberia.'},
                        {'name':'Kazakhstan (Coal)','emissions_gt':4.29, 'country': 'Kazakhstan', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Energy_in_Kazakhstan', 'description':'Represents the state-owned coal production in Kazakhstan. The country has significant coal reserves, with major producers like Bogatyr Coal operating some of the largest open-pit mines in the world.'},
                        {'name':'KazMunayGas','emissions_gt':4.21, 'country': 'Kazakhstan', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/KazMunayGas', 'description':'KazMunayGas is the state-owned oil and gas company of Kazakhstan.'},
                        {'name':'Sasol','emissions_gt':4.11, 'country': 'South Africa', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Sasol', 'description':'Sasol Limited is an integrated energy and chemical company based in Sandton, South Africa. The company was formed in 1950 in Sasolburg, South Africa.'},
                        {'name':'OMV','emissions_gt':3.98, 'country': 'Austria', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/OMV', 'description':'OMV (formerly Österreichische Mineralölverwaltung, ÖMV) is an Austrian multinational integrated oil, gas and petrochemical company which is headquartered in Vienna, Austria.'},
                        {'name':'Hess Corporation','emissions_gt':3.87, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Hess_Corporation', 'description':'Hess Corporation is an American global independent energy company engaged in the exploration and production of crude oil and natural gas.'},
                        {'name':'Marathon Oil','emissions_gt':3.76, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Marathon_Oil', 'description':'Marathon Oil Corporation is an American company engaged in hydrocarbon exploration and production. It is headquartered in the Marathon Oil Tower in Houston, Texas.'},
                        {'name':'Concho Resources','emissions_gt':3.65, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Concho_Resources', 'description':'Concho Resources, Inc. was a company engaged in hydrocarbon exploration. In 2021, the company was acquired by ConocoPhillips.'},
                        {'name':'Freeport-McMoRan','emissions_gt':3.55, 'country': 'USA', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/Freeport-McMoRan', 'description':'Freeport-McMoRan Inc., often called Freeport, is an American mining company based in Phoenix, Arizona. The company is a leading producer of copper, gold, and molybdenum.'},
                        {'name':'TNK-BP','emissions_gt':3.45, 'country': 'Russia', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/TNK-BP', 'description':'TNK-BP was a major Russian oil company with its headquarters in Moscow. It was a joint venture between BP and the AAR Consortium (Alfa-Access-Renova). It was acquired by Rosneft in 2013.'},
                        {'name':'Pioneer Natural Resources','emissions_gt':3.35, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Pioneer_Natural_Resources', 'description':'Pioneer Natural Resources Company is an American company engaged in hydrocarbon exploration. It is headquartered in Irving, Texas. The company is focused on the Cline Shale and the Permian Basin.'},
                        {'name':'Ukraine (Coal)','emissions_gt':3.29, 'country': 'Ukraine', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Coal_in_Ukraine', 'description':'Represents the state-owned coal enterprises of Ukraine, particularly in the Donbas region. Historically, Ukraine has been a major coal producer, though production has been impacted by conflict and economic changes.'},
                        {'name':'Bumi Resources','emissions_gt':3.25, 'country': 'Indonesia', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Bumi_Resources', 'description':'PT Bumi Resources Tbk, is an Indonesian natural resources company, primarily engaged in coal mining. It is the largest coal producer in Indonesia.'},
                        {'name':'CNX Resources','emissions_gt':3.15, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/CNX_Resources', 'description':'CNX Resources Corporation is a natural gas company based in Pittsburgh. It is a leading producer of natural gas in the Appalachian Basin.'},
                        {'name':'Adaro Energy','emissions_gt':3.05, 'country': 'Indonesia', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Adaro_Energy', 'description':'PT Adaro Energy Indonesia Tbk is an Indonesian coal mining company. It is one of the largest coal producers in the Southern Hemisphere.'},
                        {'name':'Kiewit Mining Group','emissions_gt':2.95, 'country': 'USA', 'category': 'Manufacturing & Construction', 'wiki_url':'https://en.wikipedia.org/wiki/Kiewit_Corporation', 'description':'Kiewit Corporation is an employee-owned construction and engineering organization based in Omaha, Nebraska. It is one of the largest contractors in the world.'},
                        {'name':'Exxaro Resources','emissions_gt':2.85, 'country': 'South Africa', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/Exxaro', 'description':'Exxaro Resources is a South Africa-based diversified resources company. It has business interests in coal, titanium dioxide, iron ore, and energy.'},
                        {'name':'Teck Resources','emissions_gt':2.75, 'country': 'Canada', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/Teck_Resources', 'description':'Teck Resources Limited is a diversified Canadian mining company, headquartered in Vancouver, British Columbia. The company is Canada&apos;s largest diversified mining company.'},
                        {'name':'Noble Energy','emissions_gt':2.65, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Noble_Energy', 'description':'Noble Energy, Inc. was a company engaged in hydrocarbon exploration. It was acquired by Chevron in 2020.'},
                        {'name':'Bashneft','emissions_gt':2.55, 'country': 'Russia', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Bashneft', 'description':'Bashneft is a Russian oil company, one of the largest producers of oil products in the country. It is majority-owned by Rosneft.'},
                        {'name':'Kideco Jaya Agung','emissions_gt':2.45, 'country': 'Indonesia', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Indika_Energy', 'description':'PT Indika Energy Tbk is an Indonesian integrated energy company. Kideco Jaya Agung is one of its major subsidiaries and a leading coal producer.'},
                        {'name':'PGNiG','emissions_gt':2.35, 'country': 'Poland', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/PGNiG', 'description':'PGNiG (now part of Orlen Group) was a Polish state-controlled oil and gas company, which dealt with the exploration and production of natural gas and crude oil, and was one of the largest companies in Poland.'},
                        {'name':'Foundation Coal','emissions_gt':2.25, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Alpha_Natural_Resources', 'description':'Foundation Coal Holdings, Inc. was a major U.S. coal producer. In 2009, it was acquired by Alpha Natural Resources.'},
                        {'name':'Plains Exploration & Production','emissions_gt':2.15, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Freeport-McMoRan', 'description':'Plains Exploration & Production Company was a company engaged in hydrocarbon exploration and production. It was acquired by Freeport-McMoRan in 2013.'},
                        {'name':'Singareni Collieries Company','emissions_gt':2.05, 'country': 'India', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Singareni_Collieries_Company', 'description':'The Singareni Collieries Company Limited or SCCL is a government-owned coal mining company in India. It is one of the oldest public sector undertakings in the country.'},
                        {'name':'Westmoreland Coal','emissions_gt':1.95, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Westmoreland_Coal_Company', 'description':'Westmoreland Coal Company was a coal mining company. At its peak, it was one of the largest coal producers in North America.'},
                        {'name':'Indo Tambangraya Megah','emissions_gt':1.85, 'country': 'Indonesia', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Indo_Tambangraya_Megah', 'description':'PT Indo Tambangraya Megah Tbk is an Indonesian coal mining company, a subsidiary of Banpu of Thailand.'},
                        {'name':'XTO Energy','emissions_gt':1.75, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/XTO_Energy', 'description':'XTO Energy, Inc. is an American energy company, principally engaged in the drilling and production of unconventional oil and natural gas. It is a subsidiary of ExxonMobil.'},
                        {'name':'Massey Energy','emissions_gt':1.65, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Massey_Energy', 'description':'Massey Energy Company was a coal extractor in the United States. It was the largest coal producer in Central Appalachia. The company was purchased by Alpha Natural Resources in 2011.'},
                        {'name':'Talisman Energy','emissions_gt':1.55, 'country': 'Canada', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Talisman_Energy', 'description':'Talisman Energy Inc. was a Canadian multinational oil and gas exploration and production company. It was acquired by Repsol in 2015.'},
                        {'name':'Berau Coal Energy','emissions_gt':1.45, 'country': 'Indonesia', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Berau_Coal_Energy', 'description':'PT Berau Coal Energy Tbk is a major Indonesian thermal coal producer.'},
                        {'name':'Cloud Peak Energy','emissions_gt':1.35, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Cloud_Peak_Energy', 'description':'Cloud Peak Energy Inc. was a coal mining company headquartered in Gillette, Wyoming. It was a major producer of coal in the Powder River Basin.'},
                        {'name':'Walter Energy','emissions_gt':1.25, 'country': 'USA', 'category': 'Coal', 'wiki_url':'https://en.wikipedia.org/wiki/Walter_Energy', 'description':'Walter Energy, Inc. was a company that produced and exported metallurgical coal for the global steel industry. It was headquartered in Birmingham, Alabama.'},
                        {'name':'Eskom','emissions_gt':1.18, 'country': 'South Africa', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Eskom', 'description':'Eskom is a South African electricity public utility, established in 1923 as the Electricity Supply Commission. Eskom represents South Africa in the Southern African Power Pool.'},
                        {'name':'ECA','emissions_gt':1.15, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Ovintiv', 'description':'Ovintiv Inc., formerly Encana Corporation (ECA), is a hydrocarbon exploration and production company organized in Delaware and headquartered in Denver, Colorado.'},
                        {'name':'Canadian Natural Resources','emissions_gt':1.05, 'country': 'Canada', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Canadian_Natural_Resources', 'description':'Canadian Natural Resources Limited, or CNRL, is a Canadian oil and gas exploration, development and production company.'},
                        {'name':'ArcelorMittal','emissions_gt':0.98, 'country': 'Luxembourg', 'category': 'Manufacturing & Construction', 'wiki_url':'https://en.wikipedia.org/wiki/ArcelorMittal', 'description':'ArcelorMittal S.A. is a Luxembourgish multinational steel manufacturing corporation headquartered in Luxembourg City. It is the second largest steel producer in the world.'},
                        {'name':'Syncrude','emissions_gt':0.95, 'country': 'Canada', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Syncrude', 'description':'Syncrude Canada Ltd. is one of the world&apos;s largest producers of synthetic crude oil from oil sands. It is a joint venture operated by Suncor Energy.'},
                        {'name':'Husky Energy','emissions_gt':0.85, 'country': 'Canada', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Husky_Energy', 'description':'Husky Energy Inc. was a Canadian integrated energy company. It was acquired by Cenovus Energy in 2021.'},
                        {'name':'Suncor Energy','emissions_gt':0.75, 'country': 'Canada', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Suncor_Energy', 'description':'Suncor Energy is a Canadian integrated energy company based in Calgary, Alberta. It specializes in production of synthetic crude from oil sands.'},
                        {'name':'Newfield Exploration','emissions_gt':0.65, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Ovintiv', 'description':'Newfield Exploration was a petroleum, natural gas and natural gas liquids exploration and production company. It was acquired by Encana (now Ovintiv) in 2019.'},
                        {'name':'Goodrich Petroleum','emissions_gt':0.55, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Goodrich_Petroleum', 'description':'Goodrich Petroleum Corporation is an independent exploration and production company engaged in the exploitation, development and production of natural gas and crude oil.'},
                        {'name':'Ultra Petroleum','emissions_gt':0.45, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Ultra_Petroleum', 'description':'Ultra Petroleum was a company engaged in hydrocarbon exploration. It primarily operated in the Green River Basin of Wyoming.'},
                        {'name':'Denbury Resources','emissions_gt':0.35, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Denbury_Resources', 'description':'Denbury Inc. is an American energy company. It is engaged in hydrocarbon exploration and is a leader in CO₂-enhanced oil recovery.'},
                        {'name':'Toreador Resources','emissions_gt':0.25, 'country': 'USA', 'category': 'Oil & Gas', 'description':'Toreador Resources Corporation was a petroleum and natural gas exploration and production company, primarily active in France. It was later acquired and its assets were sold to other energy firms.'},
                        {'name':'Newmont','emissions_gt':0.15, 'country': 'USA', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/Newmont', 'description':'Newmont Corporation is an American gold mining company based in Greenwood Village, Colorado. It is the world&apos;s largest gold mining corporation.'},
                        {'name':'Barrick Gold','emissions_gt':0.10, 'country': 'Canada', 'category': 'Mining', 'wiki_url':'https://en.wikipedia.org/wiki/Barrick_Gold', 'description':'Barrick Gold Corporation is a mining company that produces gold and copper with 16 operating sites in 13 countries. It is headquartered in Toronto, Ontario, Canada.'},
                        {'name':'Vistra Energy','emissions_gt':0.08, 'country': 'USA', 'category': 'Oil & Gas', 'wiki_url':'https://en.wikipedia.org/wiki/Vistra_Corp', 'description':'Vistra Corp. is a major retail electricity and power generation company based in Irving, Texas. It is one of the largest competitive power generators in the U.S.'},
                        {'name':'Cementos Argos','emissions_gt':0.05, 'country': 'Colombia', 'category': 'Manufacturing & Construction', 'wiki_url':'https://en.wikipedia.org/wiki/Cementos_Argos', 'description':'Cementos Argos S.A. is a Colombian multinational company that produces and markets cement and ready-mix concrete. It is the fifth largest cement producer in Latin America.'}
                    ].sort((a, b) => b.emissions_gt - a.emissions_gt).map((d, i) => ({...d, id: i + 1, rank: i + 1}));

                    let width, height, activeFilter = 'all';
                    let activeNode = null;
                    let nodes, simulation, zoom, radiusScale, colorScale, clusterLabels;
                    let lastTransform = d3.zoomIdentity;
                    let isTransitioning = false;
                    const totalEmissionsOfAll = d3.sum(allEmissionsData, d => d.emissions_gt);
                    const GLOBAL_EMISSIONS_1965_2018_GT = 1354;
                    const TONS_CO2_PER_CAR_YEAR = 4.6;
                    const HEADER_OFFSET = 120; 

                    const svg = d3.select('#chart-container').append('svg');
                    const zoomGroup = svg.append('g');
                    const clusterLabelGroup = zoomGroup.append('g').attr('class', 'cluster-label-container');

                    function setupChart() {
                        radiusScale = d3.scaleSqrt().domain([0, d3.max(allEmissionsData, d => d.emissions_gt)]);
                        colorScale = d3.scaleOrdinal(d3.schemeTableau10);
                        simulation = d3.forceSimulation(allEmissionsData).force('x', d3.forceX().strength(0.1)).force('y', d3.forceY().strength(0.1)).force('collision', d3.forceCollide()).on('tick', ticked);
                        zoom = d3.zoom().scaleExtent([0.1, 30]).on('zoom', (event) => {
                            if (!activeNode && !isTransitioning) { lastTransform = event.transform; }
                            zoomGroup.attr('transform', event.transform);
                            document.querySelector('#title-container').classList.toggle('title-hidden', event.transform.k > 1.2);
                            updateLabels(event.transform);
                        });
                        svg.call(zoom);
                        renderNodes();
                        handleLayoutChange({ initial: true });
                    }
                    
                    function getShortLabel(name) {
                        const rules = { 'Coal India': 'Coal India', 'National Iranian Oil Company': 'Iran Oil', 'Abu Dhabi National Oil Company': 'ADNOC', 'Nigerian National Petroleum Corp': 'NNPC', 'Egyptian General Petroleum Corp': 'EGPC', 'Petroleos de Venezuela (PDVSA)': 'PDVSA', 'Canadian Natural Resources': 'Canadian Natural', 'Singareni Collieries Company': 'Singareni', 'Manufacturing & Construction': 'Manuf. & Const.' };
                        if (rules[name]) return rules[name];
                        if (name.includes('(')) return name.substring(0, name.indexOf('(')).trim();
                        return name;
                    }

                    function handleLayoutChange(options = {}) {
                        if (isTransitioning) return;
                        isTransitioning = true;
                        const { newFilter, panelAction, duration = 400 } = options;
                        let panelStateChanged = false;
                        if (panelAction) {
                            const isPanelOpen = document.getElementById('app-container').classList.contains('details-visible');
                            if (panelAction === 'open' && !isPanelOpen) { document.getElementById('app-container').classList.add('details-visible'); panelStateChanged = true; }
                            else if (panelAction === 'close' && isPanelOpen) { document.getElementById('app-container').classList.remove('details-visible'); panelStateChanged = true; }
                        }
                        if (newFilter && newFilter !== activeFilter) {
                            activeFilter = newFilter;
                            document.querySelectorAll('.filter-button').forEach(btn => { btn.classList.toggle('active', btn.dataset.filter === newFilter); });
                        }
                        const transitionDelay = panelStateChanged ? 350 : 50; 
                        setTimeout(() => {
                            updateForces(); 
                            simulation.on('end.layout', null);
                            setTimeout(() => {
                                zoomToFit(duration);
                                setTimeout(() => { isTransitioning = false; }, duration);
                            }, 150);
                        }, transitionDelay);
                    }

                    function renderNodes() {
                        nodes = zoomGroup.selectAll('.node').data(allEmissionsData, d => d.id).join(
                            enter => {
                                const g = enter.append('g').attr('class', 'node').on('click', (event, d) => selectNode(d));
                                g.append('circle').style('fill', d => colorScale(d.category)).style('stroke', d => d3.color(colorScale(d.category)).darker(1)).style('stroke-width', 1.5);
                                g.append('text').attr('class', 'rank-label').attr('dy', '-0.1em');
                                g.append('text').attr('class', 'label').attr('dy', '1em');
                                return g;
                            }
                        );
                        nodes.select('circle').attr('r', d => radiusScale(d.emissions_gt));
                        nodes.select('.rank-label').text(d => d.rank);
                        nodes.select('.label').text(d => getShortLabel(d.name));
                        updateLabels(lastTransform);
                    }

                    function ticked() {
                        if (nodes) { nodes.attr('transform', d => `translate(${d.x || 0}, ${d.y || 0})`); }
                        if (activeFilter !== 'all' && clusterLabels) {
                             clusterLabels.each(function(d) {
                                const { x, topY } = getClusterCentroid(d.name);
                                if(isFinite(x) && isFinite(topY)) { d3.select(this).attr('transform', `translate(${x}, ${topY - 40})`); }
                            });
                        }
                    }
                    
                    function getClusterCentroid(clusterName) {
                        const nodesInCluster = allEmissionsData.filter(nodeData => {
                            let nodeClusterName;
                            if (activeFilter === 'country') {
                                const countryName = nodeData.country;
                                nodeClusterName = (countryName === 'USA' || countryName === 'China') ? countryName : 'Other Countries';
                            } else {
                                nodeClusterName = (nodeData.category === activeFilter) ? getShortLabel(activeFilter) : 'Other Categories';
                            }
                            return nodeClusterName === clusterName;
                        });
                        if (nodesInCluster.length === 0) return { x: NaN, topY: NaN };
                        const x = d3.mean(nodesInCluster, d => d.x);
                        const topY = d3.min(nodesInCluster, d => d.y - radiusScale(d.emissions_gt));
                        return { x, topY };
                    }

                    function updateLabels(transform) {
                        const k = transform ? transform.k : 1;
                        nodes.each(function(d) {
                            const nodeGroup = d3.select(this);
                            const radius = radiusScale(d.emissions_gt);
                            const scaledRadius = radius * k;
                            nodeGroup.select('.rank-label').style('font-size', `${Math.min(radius / 1.5, 32 / k)}px`).style('opacity', scaledRadius > 20 ? 1 : 0);
                            nodeGroup.select('.label').style('font-size', `${Math.min(radius / 3.5, 14 / k)}px`);
                        });
                        if(clusterLabels) {
                            const showLabels = k > 0.8 && activeFilter !== 'all';
                            clusterLabels.style('opacity', showLabels ? 1 : 0);
                        }
                    }
                    
                    function updateForces() {
                        width = chartWrapper.clientWidth;
                        height = chartWrapper.clientHeight;
                        if (width === 0 || height === 0) return;
                        svg.attr('width', width).attr('height', height);
                        const maxRadius = Math.max(40, Math.min(95, Math.min(width, height) / 12));
                        const minRadius = Math.max(5, maxRadius / 25);
                        radiusScale.range([minRadius, maxRadius]);
                        if (nodes) { nodes.select('circle').attr('r', d => radiusScale(d.emissions_gt)); }
                        simulation.force('collision').radius(d => radiusScale(d.emissions_gt) + 5);
                        let clusters = {};
                        let clusterData = [];
                        const centerY = height / 2 + HEADER_OFFSET / 2;
                        if (activeFilter === 'all') {
                            const center = { x: width / 2, y: centerY };
                            simulation.force('x').x(center.x).strength(0.1);
                            simulation.force('y').y(center.y).strength(0.1);
                        } else if (activeFilter === 'country') {
                             clusters['USA'] = { x: width * 0.2, y: centerY, name: 'USA' };
                             clusters['China'] = { x: width * 0.8, y: centerY, name: 'China' };
                             clusters['Other Countries'] = { x: width * 0.5, y: centerY, name: 'Other Countries' };
                            simulation.force('x').x(d => clusters[(d.country === 'USA' || d.country === 'China') ? d.country : 'Other Countries'].x).strength(0.2);
                            simulation.force('y').y(centerY).strength(0.15);
                            clusterData = Object.values(clusters);
                        } else { 
                             const activeLabel = getShortLabel(activeFilter);
                             clusters[activeLabel] = { x: width * 0.75, y: centerY, name: activeLabel };
                             clusters['Other Categories'] = { x: width * 0.25, y: centerY, name: 'Other Categories'};
                            simulation.force('x').x(d => d.category === activeFilter ? clusters[activeLabel].x : clusters['Other Categories'].x).strength(0.2);
                            simulation.force('y').y(d => d.category === activeFilter ? clusters[activeLabel].y : clusters['Other Categories'].y).strength(0.1);
                            clusterData = Object.values(clusters);
                        }
                        clusterLabels = clusterLabelGroup.selectAll('.cluster-label').data(clusterData, d => d.name);
                        clusterLabels.exit().transition().duration(300).style('opacity', 0).remove();
                        const enteredLabels = clusterLabels.enter().append('text').attr('class', 'cluster-label').style('opacity', 0).text(d => d.name);
                        clusterLabels = enteredLabels.merge(clusterLabels);
                        setTimeout(() => {
                            const k = lastTransform.k;
                            const showLabels = k > 0.8 && activeFilter !== 'all';
                            clusterLabels.transition().duration(300).style('opacity', showLabels ? 1 : 0);
                        }, 500);
                        simulation.alpha(1).restart();
                    }
                    
                    function zoomToFit(duration = 750) {
                        const parent = chartWrapper;
                        const fullWidth = parent.clientWidth;
                        const fullHeight = parent.clientHeight;
                        if (fullWidth === 0 || fullHeight === 0) { return; }
                        clusterLabelGroup.style('display', 'none');
                        const bounds = zoomGroup.node().getBBox();
                        clusterLabelGroup.style('display', null); 
                        if (bounds.width === 0 || bounds.height === 0 || !isFinite(bounds.width)) { return; }
                        const { x, y, width, height } = bounds;
                        const padding = 100; 
                        const scale = Math.min(fullWidth / (width + padding), (fullHeight - HEADER_OFFSET) / (height + padding));
                        const boundsCenterY = y + height / 2;
                        const visibleAreaHeight = fullHeight - HEADER_OFFSET;
                        const visibleCenterY = HEADER_OFFSET + (visibleAreaHeight / 2);
                        const newX = fullWidth / 2 - (x + width / 2) * scale;
                        const newY = visibleCenterY - (boundsCenterY * scale);
                        if (!isFinite(scale) || !isFinite(newX) || !isFinite(newY)) { return; }
                        const transform = d3.zoomIdentity.translate(newX, newY).scale(scale);
                        svg.transition().duration(duration).call(zoom.transform, transform);
                        lastTransform = transform;
                    }

                    function selectNode(d) {
                        if (isTransitioning || activeNode?.id === d.id) return;
                        activeNode = d;
                        nodes.classed('selected', n => n.id === d.id);
                        populateDetails(d);
                        detailsContent.classList.remove('hidden');
                        handleLayoutChange({ panelAction: 'open' });
                        setTimeout(() => renderSelectedNodeVis(d), 350); 
                    }

                    function deselectNode() {
                        if (isTransitioning || !activeNode) return;
                        activeNode = null;
                        nodes.classed('selected', false);
                        setTimeout(() => {
                            detailsContent.classList.add('hidden');
                            d3.select(selectedNodeContainer).selectAll('*').remove();
                        }, 350);
                        handleLayoutChange({ panelAction: 'close' });
                    }

                    function populateDetails(d) {
                        document.getElementById('modal-data-sections').style.display = 'block';
                        document.getElementById('selected-node-container').style.display = 'flex';
                        document.getElementById('percentage-container').style.display = 'block';
                        document.getElementById('modal-wiki-content').style.display = 'block';
                        document.getElementById('modal-company-name').textContent = `${d.rank}. ${d.name}`;
                        document.getElementById('modal-company-country').textContent = d.country || 'Global/State';
                        document.getElementById('modal-total-emissions').textContent = `${d.emissions_gt.toFixed(2)} GtCO₂e`;
                        const years = 2018 - 1965;
                        const avgEmissionsMt = (d.emissions_gt / years) * 1000;
                        document.getElementById('modal-avg-emissions').textContent = `${avgEmissionsMt.toFixed(2)} MtCO₂e`;
                        const wikiContent = document.getElementById('modal-wiki-content');
                        if (d.description) {
                            document.getElementById('modal-description').innerHTML = d.description;
                            const wikiLink = document.getElementById('modal-wiki-link');
                            wikiLink.style.display = d.wiki_url ? 'inline-block' : 'none';
                            if (d.wiki_url) wikiLink.href = d.wiki_url;
                            wikiContent.style.display = 'block';
                        } else {
                            wikiContent.style.display = 'none';
                        }
                        const totalEmissionsTons = d.emissions_gt * 1e9;
                        const totalCarEquivalent = totalEmissionsTons / TONS_CO2_PER_CAR_YEAR;
                        document.getElementById('modal-total-car-equivalent').textContent = Math.round(totalCarEquivalent).toLocaleString();
                        const annualEmissionsTons = avgEmissionsMt * 1e6;
                        const annualCarEquivalent = annualEmissionsTons / TONS_CO2_PER_CAR_YEAR;
                        document.getElementById('modal-annual-car-equivalent').textContent = Math.round(annualCarEquivalent).toLocaleString();
                        const percentageOfTotal = (d.emissions_gt / GLOBAL_EMISSIONS_1965_2018_GT) * 100;
                        document.getElementById('percentage-container').innerHTML = `<p class='text-xl font-bold text-white'>${percentageOfTotal.toFixed(3)}%</p><p class='text-xs text-gray-500'>of total global emissions (1965-2018)</p>`;
                    }
                    
                    function showInfoPanel() {
                        if (isTransitioning || activeNode?.info) return;
                        activeNode = { info: true };
                        nodes.classed('selected', false);
                        document.getElementById('modal-company-name').textContent = 'About This Visualization';
                        document.getElementById('modal-company-country').textContent = 'Data, Methodology, and Credits';
                        document.getElementById('modal-description').innerHTML = `<p class='mb-2'>This interactive chart, built with D3.js, visualizes the top 100 corporate and state-owned producers of fossil fuels, whose products account for a majority of industrial greenhouse gas emissions since 1965.</p><p class='mb-4'>The 'Carbon Majors' report, which is the source for this data, specifically tracks the emissions from the world&apos;s largest corporate and state-owned producers of oil, gas, and coal. It doesn&apos;t include broad sectors like Global Agriculture or Transportation because those are categories of consumption. The emissions from the fuel burned by cars, planes, and farms are ultimately traced back to the companies that extracted and sold that fuel in this particular dataset.</p><p class='mb-4'>The percentage calculation compares an entity&apos;s emissions to the total estimated global CO₂ emissions from fossil fuels and cement production between 1965 and 2018, which is approximately 1,354 gigatonnes (Source: Climate Accountability Institute).</p><p class='mb-4'>This project was created by <a href='https://sfoa.earth' target='_blank' class='text-cyan-400 hover:underline'>SFOA</a>.</p>`;
                        document.getElementById('modal-wiki-content').style.display = 'block';
                        document.getElementById('modal-wiki-link').style.display = 'none';
                        document.getElementById('modal-data-sections').style.display = 'none';
                        document.getElementById('selected-node-container').style.display = 'none';
                        document.getElementById('percentage-container').style.display = 'none';
                        detailsContent.classList.remove('hidden');
                        handleLayoutChange({ panelAction: 'open' });
                    }

                    function renderSelectedNodeVis(d) {
                        const visContainer = d3.select(selectedNodeContainer);
                        visContainer.selectAll('*').remove(); 
                        const visSvg = visContainer.append('svg').attr('width', '100%').attr('height', '100%');
                        const containerWidth = selectedNodeContainer.clientWidth;
                        const containerHeight = selectedNodeContainer.clientHeight;
                        if (containerWidth === 0) return; 
                        const totalRadius = Math.min(containerWidth, containerHeight) / 2 * 0.9; 
                        const totalEmissionsOfVisible = d3.sum(allEmissionsData, d => d.emissions_gt);
                        const scale = d3.scaleSqrt().domain([0, totalEmissionsOfVisible]).range([0, totalRadius]);
                        const selectedRadius = scale(d.emissions_gt);
                        const visGroup = visSvg.append('g').attr('transform', `translate(${containerWidth/2}, ${containerHeight/2})`);
                        visGroup.append('circle').attr('class', 'total-emissions-bg').attr('r', totalRadius);
                        const selectedNodeGroup = visGroup.append('g').attr('class', 'node');
                        selectedNodeGroup.append('circle').attr('r', 0).style('fill', colorScale(d.category)).style('stroke', d3.color(colorScale(d.category)).darker(1)).style('stroke-width', 2).transition().duration(500).attr('r', selectedRadius);
                    }

                    // --- Event Listeners ---
                    document.getElementById('close-modal').addEventListener('click', deselectNode);
                    document.getElementById('info-button').addEventListener('click', showInfoPanel);
                    document.getElementById('zoom-in').addEventListener('click', () => { svg.transition().duration(250).call(zoom.scaleBy, 1.4); });
                    document.getElementById('zoom-out').addEventListener('click', () => { svg.transition().duration(250).call(zoom.scaleBy, 1 / 1.4); });
                    
                    document.querySelectorAll('.filter-button').forEach(button => {
                        button.addEventListener('click', e => {
                            const newFilter = e.target.dataset.filter;
                            if (isTransitioning || activeFilter === newFilter) return;
                            const options = { newFilter: newFilter };
                            if (activeNode) {
                                options.panelAction = 'close';
                                activeNode = null;
                                nodes.classed('selected', false);
                                setTimeout(() => {
                                    detailsContent.classList.add('hidden');
                                    d3.select(selectedNodeContainer).selectAll('*').remove();
                                }, 350);
                            }
                            handleLayoutChange(options);
                        });
                    });

                    let resizeTimer;
                    window.addEventListener('resize', () => {
                        clearTimeout(resizeTimer);
                        resizeTimer = setTimeout(() => {
                            if(activeNode) deselectNode();
                            handleLayoutChange({ duration: 250 });
                        }, 250);
                    });

                    // --- Initial Load ---
                    setupChart();
                })();
            </script>
        </body>
        </html>
    ">