import React from "react"; import NotebookTemplate from "@/components/NotebookTemplate"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; import { Area, AreaChart, Bar, BarChart, CartesianGrid, ComposedChart, Line, LineChart, XAxis, YAxis, } from "recharts"; import story from "@/data/usa_energy/energy_story.json"; import regionalStory from "@/data/usa_energy/regional_data.json"; type AnnualRow = { year: number; generation_twh: number; retail_sales_twh: number; losses_twh: number; loss_pct: number; }; type DemandSectorRow = { year: number; residential_twh: number; commercial_twh: number; industrial_twh: number; transportation_twh: number; total_twh: number; }; type GenerationKeyRow = { year: number; coal_twh: number; natural_gas_twh: number; nuclear_twh: number; renewables_twh: number; other_twh: number; total_twh: number; }; type GenerationShareRow = { year: number; coal_pct: number; natural_gas_pct: number; nuclear_pct: number; renewables_pct: number; }; type RenewablesRow = { year: number; wind_twh: number; solar_twh: number; hydro_twh: number; other_renewables_twh: number; renewables_twh: number; }; // Regional data types type RegionalTwhRow = { region: string; years: number[]; coal: number[]; natural_gas: number[]; nuclear: number[]; renewables: number[]; }; type RegionalSharesRow = { region: string; years: number[]; coal_pct: number[]; natural_gas_pct: number[]; nuclear_pct: number[]; renewables_pct: number[]; }; type RegionalSummary = { [key: string]: { first_year: number; last_year: number; total_change_pct: number; coal_share_change: number; natural_gas_share_change: number; renewables_share_change: number; }; }; // Transform regional data into yearly rows for charting interface RegionalYearlyRow { year: number; region: string; coal_twh: number; natural_gas_twh: number; nuclear_twh: number; renewables_twh: number; total_twh: number; coal_pct: number; natural_gas_pct: number; nuclear_pct: number; renewables_pct: number; } const annual = story.annual as AnnualRow[]; const demandBySector = story.demand_by_sector as DemandSectorRow[]; const generationKey = story.generation_key_sources as GenerationKeyRow[]; const generationShares = story.generation_shares as GenerationShareRow[]; const renewablesBreakdown = story.renewables_breakdown as RenewablesRow[]; const regionalTwh = regionalStory.generation_twh as RegionalTwhRow[]; const regionalShares = regionalStory.generation_shares as RegionalSharesRow[]; const regionalSummary = regionalStory.summary as RegionalSummary; // Transform regional data into flat yearly rows for small multiples const regionalYearlyData: RegionalYearlyRow[] = regionalTwh.flatMap((region) => { const shares = regionalShares.find((r) => r.region === region.region); return region.years.map((year, idx) => ({ year, region: region.region, coal_twh: region.coal[idx], natural_gas_twh: region.natural_gas[idx], nuclear_twh: region.nuclear[idx], renewables_twh: region.renewables[idx], total_twh: region.coal[idx] + region.natural_gas[idx] + region.nuclear[idx] + region.renewables[idx], coal_pct: shares?.coal_pct[idx] || 0, natural_gas_pct: shares?.natural_gas_pct[idx] || 0, nuclear_pct: shares?.nuclear_pct[idx] || 0, renewables_pct: shares?.renewables_pct[idx] || 0, })); }); // Create a combined dataset for the renewables share comparison chart interface RenewablesShareComparisonRow { year: number; CAISO_renewables_pct: number; ERCOT_renewables_pct: number; PJM_renewables_pct: number; NYISO_renewables_pct: number; } const renewablesShareComparison: RenewablesShareComparisonRow[] = regionalShares[0].years.map((year, idx) => ({ year, CAISO_renewables_pct: regionalShares.find((r) => r.region === "CAISO")?.renewables_pct[idx] || 0, ERCOT_renewables_pct: regionalShares.find((r) => r.region === "ERCOT")?.renewables_pct[idx] || 0, PJM_renewables_pct: regionalShares.find((r) => r.region === "PJM")?.renewables_pct[idx] || 0, NYISO_renewables_pct: regionalShares.find((r) => r.region === "NYISO")?.renewables_pct[idx] || 0, })); const fmtInt = (v: number) => new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(v); const fmtPct1 = (v: number) => new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 }).format(v); const fmtSigned1 = (v: number) => `${v >= 0 ? "+" : ""}${new Intl.NumberFormat("en-US", { maximumFractionDigits: 1, }).format(v)}`; const toplineConfig = { generation_twh: { label: "Net generation (TWh)", color: "var(--chart-1)" }, retail_sales_twh: { label: "Retail sales (TWh)", color: "var(--chart-2)" }, losses_twh: { label: "Losses & other (TWh)", color: "var(--chart-3)" }, loss_pct: { label: "Loss rate (%)", color: "var(--chart-4)" }, } satisfies ChartConfig; const demandConfig = { residential_twh: { label: "Residential", color: "var(--chart-1)" }, commercial_twh: { label: "Commercial", color: "var(--chart-2)" }, industrial_twh: { label: "Industrial", color: "var(--chart-3)" }, transportation_twh: { label: "Transportation", color: "var(--chart-4)" }, } satisfies ChartConfig; const generationKeyConfig = { coal_twh: { label: "Coal", color: "var(--chart-1)" }, natural_gas_twh: { label: "Natural gas", color: "var(--chart-2)" }, nuclear_twh: { label: "Nuclear", color: "var(--chart-3)" }, renewables_twh: { label: "Renewables", color: "var(--chart-4)" }, other_twh: { label: "Other", color: "var(--chart-5)" }, } satisfies ChartConfig; const sharesConfig = { coal_pct: { label: "Coal", color: "var(--chart-1)" }, natural_gas_pct: { label: "Natural gas", color: "var(--chart-2)" }, nuclear_pct: { label: "Nuclear", color: "var(--chart-3)" }, renewables_pct: { label: "Renewables", color: "var(--chart-4)" }, } satisfies ChartConfig; const renewablesConfig = { wind_twh: { label: "Wind", color: "var(--chart-1)" }, solar_twh: { label: "Solar", color: "var(--chart-2)" }, hydro_twh: { label: "Hydro", color: "var(--chart-3)" }, other_renewables_twh: { label: "Other renewables", color: "var(--chart-4)" }, } satisfies ChartConfig; const regionalSharesConfig = { CAISO_renewables_pct: { label: "CAISO", color: "var(--chart-1)" }, ERCOT_renewables_pct: { label: "ERCOT", color: "var(--chart-2)" }, PJM_renewables_pct: { label: "PJM", color: "var(--chart-3)" }, NYISO_renewables_pct: { label: "NYISO", color: "var(--chart-4)" }, } satisfies ChartConfig; export default function UsaEnergy() { const h = story.headline as { first_year: number; last_year: number; generation_change_pct: number; retail_sales_change_pct: number; coal_share_pp: number; natural_gas_share_pp: number; renewables_share_pp: number; nuclear_share_pp: number; loss_pct_first: number; loss_pct_last: number; }; return (

This notebook looks at annual US electricity net generation versus delivered retail sales (a proxy for end-use demand), plus how the generation mix changed across coal, gas, nuclear, and renewables.

Total demand change {fmtPct1(h.retail_sales_change_pct)}% Retail sales, {h.first_year} → {h.last_year} Coal share shift {fmtSigned1(h.coal_share_pp)} pp Share of generation, {h.first_year} → {h.last_year} Renewables share shift {fmtSigned1(h.renewables_share_pp)} pp Share of generation, {h.first_year} → {h.last_year}
Generation vs. retail sales TWh (annual). The gap is losses & other uses (T&D losses, plant use, accounting). fmtInt(v)} /> } /> } /> The "gap" is pretty stable Loss rate (% of net generation). {fmtPct1(h.loss_pct_first)}% → {fmtPct1(h.loss_pct_last)}%. `${fmtPct1(v)}%`} /> } />

The gap between generation and retail sales represents transmission & distribution (T&D) losses, electricity used at power plants themselves, and accounting differences. At roughly {fmtPct1(h.loss_pct_last)}% of generation, this gap has remained remarkably stable over the decade. That stability matters: it means grid efficiency isn't deteriorating even as the system undergoes massive fuel switching. The losses are essentially a fixed overhead on the system — every terawatt-hour generated requires about {fmtPct1(h.loss_pct_last)}% more to account for T&D and plant use.

Demand is mostly a sector story Retail sales by end-use sector (stacked, TWh). Total grew {fmtPct1(h.retail_sales_change_pct)}% from {h.first_year} to {h.last_year}. fmtInt(v)} /> } /> } />

Demand growth is modest — only {fmtPct1(h.retail_sales_change_pct)}% over the decade — but it's not evenly distributed. Commercial and residential sectors have driven most of the increase, reflecting electrification of buildings, data center growth, and increased air conditioning use. Industrial demand has been relatively flat, which is notable given overall economic growth — this suggests efficiency gains and offshoring of energy-intensive manufacturing. Transportation remains the smallest sector but is growing fastest as electric vehicles gain market share, though it's still a small fraction of total electricity use.

Supply transition: coal collapses, gas and renewables rise Net generation by key sources (stacked, TWh). Total grew {fmtPct1(h.generation_change_pct)}% from {h.first_year} to {h.last_year}. fmtInt(v)} /> } /> } />

While demand barely budged, the supply mix transformed. Coal generation collapsed from {fmtPct1((generationShares.find((s) => s.year === h.first_year)?.coal_pct || 0))}% to {fmtPct1((generationShares.find((s) => s.year === h.last_year)?.coal_pct || 0))}% — a {fmtSigned1(h.coal_share_pp)} percentage point shift driven by EPA regulations, cheap natural gas, and plant retirements. Natural gas filled much of that gap, rising {fmtSigned1(h.natural_gas_share_pp)} percentage points to become the dominant source. But the real story is renewables: they grew {fmtSigned1(h.renewables_share_pp)} percentage points, from a modest {fmtPct1((generationShares.find((s) => s.year === h.first_year)?.renewables_pct || 0))}% to {fmtPct1((generationShares.find((s) => s.year === h.last_year)?.renewables_pct || 0))}% of generation. Nuclear held roughly steady, providing a stable baseload that became relatively more important as coal faded.

Shares tell the same story Percent of total generation. `${fmtPct1(v)}%`} /> } /> } />

The share chart makes the transition clearer: coal's decline is nearly linear, while gas and renewables show accelerating growth. By {h.last_year}, natural gas and renewables together accounted for roughly {fmtPct1((generationShares.find((s) => s.year === h.last_year)?.natural_gas_pct || 0) + (generationShares.find((s) => s.year === h.last_year)?.renewables_pct || 0))}% of generation — a dramatic shift from {h.first_year} when fossil fuels (coal + gas) dominated. This isn't just fuel switching; it's a structural change in how the US produces electricity, with implications for grid reliability, emissions, and energy policy.

Within renewables: wind + solar do the heavy lifting Renewables broken down (stacked, TWh). fmtInt(v)} /> } /> } />

Renewables growth isn't evenly distributed. Wind led the early expansion, particularly in the Midwest and Texas where resources are strong. Solar started later but accelerated dramatically after 2018, driven by falling costs and utility-scale deployment. Hydro provides a stable but limited base — it's geography-constrained and has grown little. Other renewables (geothermal, biomass, wood) remain niche. The divergence between wind and solar matters for grid operations: wind is more variable and often peaks at night, while solar follows a predictable daytime pattern that aligns with peak demand.

Regional patterns differ dramatically

The US has distinct electric markets. Each region followed a different path due to local resources, policy, and infrastructure.

CAISO total change {fmtPct1(regionalSummary.CAISO.total_change_pct)}% Coal {fmtSigned1(regionalSummary.CAISO.coal_share_change)} pp, Renewables +{fmtPct1(regionalSummary.CAISO.renewables_share_change)} pp ERCOT total change {fmtPct1(regionalSummary.ERCOT.total_change_pct)}% Coal {fmtSigned1(regionalSummary.ERCOT.coal_share_change)} pp, Renewables +{fmtPct1(regionalSummary.ERCOT.renewables_share_change)} pp PJM total change {fmtPct1(regionalSummary.PJM.total_change_pct)}% Coal {fmtSigned1(regionalSummary.PJM.coal_share_change)} pp, Renewables +{fmtPct1(regionalSummary.PJM.renewables_share_change)} pp NYISO total change {fmtPct1(regionalSummary.NYISO.total_change_pct)}% Coal {fmtSigned1(regionalSummary.NYISO.coal_share_change)} pp, Renewables +{fmtPct1(regionalSummary.NYISO.renewables_share_change)} pp
Renewables shares diverge Percent of generation by region. CAISO leads; ERCOT and NYISO accelerated mid-decade. `${fmtPct1(v)}%`} /> } /> } />

Regional generation mix over time

CAISO (California) Coal eliminated, solar dominates d.region === "CAISO")} margin={{ left: 12, right: 12, top: 8 }}> `${fmtPct1(v)}%`} /> } /> } /> ERCOT (Texas) Wind-dominant, coal declines d.region === "ERCOT")} margin={{ left: 12, right: 12, top: 8 }}> `${fmtPct1(v)}%`} /> } /> } /> PJM (Mid-Atlantic + Midwest) Coal to gas transition d.region === "PJM")} margin={{ left: 12, right: 12, top: 8 }}> `${fmtPct1(v)}%`} /> } /> } /> NYISO (New York) Hydro/nuclear base, renewables grow d.region === "NYISO")} margin={{ left: 12, right: 12, top: 8 }}> `${fmtPct1(v)}%`} /> } /> } />

What drives regional differences?

CAISO (California) leads the renewable transition with aggressive climate policy and solar resources. Coal was fully eliminated, and Diablo Canyon nuclear retired by 2024. Renewables grew from 22% to 65% of generation, with solar driving most gains. Gas peaked then declined as solar filled daytime load.

ERCOT (Texas) shows a different path: wind dominated early renewable growth, with solar accelerating more recently. Coal fell from 28% to 3%, but gas remained steady (~58%) due to fracking-driven low prices and reliability needs. The grid faces integration challenges as renewables approach 35%.

PJM, the largest ISO, followed a classic coal-to-gas transition driven by EPA regulations and gas prices. Coal dropped from 44% to 16%, while gas rose from 28% to 46%. Nuclear provides a steady base (~22%), with renewables growing modestly from 4% to 17%. The region's coal legacy means slower decarbonization.

NYISO (New York) benefits from Canadian hydro imports and ambitious state policy. Coal was minimal and is now gone, while Indian Point nuclear retirement reduced the nuclear share from 28% to 11%. Renewables grew from 21% to 50%, led by onshore wind and hydro. Gas remains critical at ~40% for reliability.

Key takeaways

Other questions to explore

 ); }