27:null 28:["$","title",null,{"children":"Largest Primary Energy Source Consumed By State, 2024 | North Branch Media | Observable"}] 2d:T2797,// Largest Primary Energy Source Consumed By State, 2024 // Share of each state's total primary energy consumption (coal, natural gas, petroleum, nuclear, renewables), trillion Btu, excluding net interstate electricity // U.S. Energy Information Administration, State Energy Data System, Table C1, 2024 estimates { // Libraries const d3 = await require("d3@7"); const topojson = await require("topojson-client@3"); // Data // https://www.eia.gov/state/seds/sep_sum/html/sum_btu_1.html const rows = [ ["01","AL","Alabama",239.3,797.7,575,464.6,235.5], ["02","AK","Alaska",18.3,460.6,271.3,0,9.9], ["04","AZ","Arizona",112.1,553.2,610.9,338.2,122.5], ["05","AR","Arkansas",167.9,388.9,322.3,154.2,100.1], ["06","CA","California",29.1,2010.5,2981.8,191.9,1173.5], ["08","CO","Colorado",181,527.1,500.6,0,125.5], ["09","CT","Connecticut",0,314.5,299,176.2,50.3], ["10","DE","Delaware",2.5,81.3,103.1,0,7.6], ["11","DC","District of Columbia",0,27,17.8,0,2.9], ["12","FL","Florida",90.7,1739.3,1863.1,303.4,306.4], ["13","GA","Georgia",191.5,782.9,989.8,501,298.1], ["15","HI","Hawaii",0,0.1,250.4,0,21.3], ["16","ID","Idaho",0.9,160.6,182.1,0,78.9], ["17","IL","Illinois",342.8,1073.9,1114.1,1036.1,260.3], ["18","IN","Indiana",596.5,961.1,668.8,0,188.5], ["19","IA","Iowa",180.7,433.6,400.8,0,440.4], ["20","KS","Kansas",152,311.7,348.9,96.1,152.1], ["21","KY","Kentucky",495.5,403.6,570.7,0,74.8], ["22","LA","Louisiana",48.4,2143.8,1628.7,153,153.9], ["23","ME","Maine",0.9,82.3,166.6,0,94.7], ["24","MD","Maryland",37,302,424.2,153.8,54], ["25","MA","Massachusetts",0,399.1,534.8,0,82.7], ["26","MI","Michigan",315.7,1086.4,808.7,274.5,208.8], ["27","MN","Minnesota",134.6,529.6,558,123.7,227.4], ["28","MS","Mississippi",42.5,678.8,366.2,111.3,71], ["29","MO","Missouri",423.2,309,602.9,109.9,91.3], ["30","MT","Montana",111.4,94.4,169.8,0,64.7], ["31","NE","Nebraska",177.9,204.2,229,63.7,168.6], ["32","NV","Nevada",31.6,295.6,296.9,0,85.8], ["33","NH","New Hampshire",2.6,59.7,147.4,101.1,37.3], ["34","NJ","New Jersey",0,680.3,770.2,289,74.4], ["35","NM","New Mexico",85.5,319.5,243.2,0,86.4], ["36","NY","New York",2.7,1367,1310.8,282.7,279.8], ["37","NC","North Carolina",182.2,715.8,936,452.7,190.9], ["38","ND","North Dakota",341.9,212.8,163.8,0,93.2], ["39","OH","Ohio",401.4,1484.3,1022.4,187.4,162.5], ["40","OK","Oklahoma",75,862.2,518.2,0,196.2], ["41","OR","Oregon",0.1,335.7,309.3,0,254.7], ["42","PA","Pennsylvania",301.6,1984,1107.6,787.4,181.3], ["44","RI","Rhode Island",0,107.5,80.4,0,13.7], ["45","SC","South Carolina",180.4,344.5,512.7,561.5,147.5], ["46","SD","South Dakota",21.9,103,111.8,0,141.1], ["47","TN","Tennessee",212.7,432.7,691.6,336.1,123.6], ["48","TX","Texas",746.1,5438.4,7069.5,403.2,844.3], ["49","UT","Utah",177.6,289.5,328.4,0,44.2], ["50","VT","Vermont",0,13,69.6,0,21.5], ["51","VA","Virginia",52.2,735,804.2,302.3,192.2], ["53","WA","Washington",34.5,394.1,712.2,104.1,383.9], ["54","WV","West Virginia",453.8,322.2,186.7,0,27.3], ["55","WI","Wisconsin",217.2,588.6,496.1,106,167], ["56","WY","Wyoming",297.3,222.7,145.2,0,40.8] ]; // Tokens const NB_BLUE = "#043463"; const NB_RED = "#fe0100"; const NB_PINK = "#ff8088"; const NB_YELLOW = "rgba(255,200,120,0.9)"; const NB_SKY = "#8fb8de"; const NB_TEAL = "#00ffff"; const NB_GREY = "#c9c9c9"; const WHITE = "#ffffff"; const FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"; // Sources const sources = [ { key: 2, name: "Petroleum", color: NB_BLUE }, { key: 1, name: "Natural gas", color: NB_SKY }, { key: 0, name: "Coal", color: NB_PINK }, { key: 4, name: "Renewables", color: NB_TEAL }, { key: 3, name: "Nuclear", color: NB_YELLOW } ]; const byId = new Map(); for (const r of rows) { const vals = [r[3], r[4], r[5], r[6], r[7]]; const total = d3.sum(vals); let top = sources[0]; for (const s of sources) if (vals[s.key] > vals[top.key]) top = s; byId.set(r[0], { id: r[0], ab: r[1], name: r[2], vals, total, top, share: vals[top.key] / total }); } const counts = d3.rollup(byId.values(), v => v.length, d => d.top.name); // Basemap const us = await fetch("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json").then(r => r.json()); const states = topojson.feature(us, us.objects.states); const borders = topojson.mesh(us, us.objects.states, (a, b) => a !== b); // Layout const W = 1000, HEADER_H = 96, MAP_H = 520, PANEL_H = 118, H = HEADER_H + MAP_H + PANEL_H; const projection = d3.geoAlbersUsa().fitExtent([[20, HEADER_H + 10], [W - 20, HEADER_H + MAP_H - 10]], states); const path = d3.geoPath(projection); // Container const root = document.createElement("div"); root.style.cssText = "position:relative;width:" + W + "px;background:" + WHITE + ";font-family:" + FONT + ";box-sizing:border-box;"; const svg = d3.select(root).append("svg").attr("width", W).attr("height", H).attr("viewBox", [0, 0, W, H]); // Titles svg.append("text").attr("x", 30).attr("y", 44).attr("font-family", "Georgia, 'Times New Roman', serif").attr("font-weight", 700).attr("font-size", 30).attr("fill", NB_BLUE) .text("Largest Primary Energy Source Consumed By State, 2024"); svg.append("text").attr("x", 30).attr("y", 70).attr("font-size", 14.5).attr("fill", NB_RED) .text("Share of each state's total primary energy consumption (coal, natural gas, petroleum, nuclear, renewables), trillion Btu, excluding net interstate electricity flow"); // States const fmtT = v => v.toFixed(1) + " T Btu"; const fmtP = v => (100 * v).toFixed(1) + "%"; svg.append("g").selectAll("path").data(states.features).join("path") .attr("d", path) .attr("fill", d => (byId.get(d.id) || {}).top ? byId.get(d.id).top.color : NB_GREY) .attr("stroke", "none") .on("mousemove", (event, d) => { const s = byId.get(d.id); if (!s) return; const row = (label, color, val, pct) => "

" + label + "" + fmtT(val) + (pct === null ? "" : " (" + fmtP(pct) + ")") + "

"; const lines = sources.map(k => row(k.name, k.color, s.vals[k.key], s.vals[k.key] / s.total)).join("") + "

" + row("Total", NB_BLUE, s.total, null) + "

"; tip.style("display", "block").html("

" + s.name + "

" + s.top.name + ", " + fmtP(s.share) + "

" + lines); const [mx, my] = d3.pointer(event, root); tip.style("left", (mx > W - 260 ? mx - 240 : mx + 14) + "px").style("top", (my + 14) + "px"); }) .on("mouseleave", () => tip.style("display", "none")); svg.append("path").attr("d", path(borders)).attr("fill", "none").attr("stroke", WHITE).attr("stroke-width", 0.8).attr("pointer-events", "none"); // Labels const small = new Set(["VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC"]); const labels = svg.append("g").attr("pointer-events", "none").attr("font-size", 11).attr("font-weight", 700).attr("fill", WHITE).attr("text-anchor", "middle"); const tweaks = { FL: [14, 0], LA: [-8, 0], MI: [12, 16], HI: [0, 0], AK: [0, 0], ID: [0, 16], CA: [-6, 0], WV: [-2, 4], KY: [6, 0], VA: [6, -2] }; const place = []; for (const f of states.features) { const s = byId.get(f.id); if (!s) continue; const c = path.centroid(f); if (!c || isNaN(c[0])) continue; const t = tweaks[s.ab] || [0, 0]; const xy = [c[0] + t[0], c[1] + t[1]]; if (small.has(s.ab)) { place.push({ s, xy }); continue; } labels.append("text").attr("x", xy[0]).attr("y", xy[1] + 4).attr("stroke", NB_BLUE).attr("stroke-width", 2.5).attr("paint-order", "stroke").text(s.ab); } const order = ["VT", "NH", "MA", "RI", "CT", "NJ", "DE", "MD", "DC"]; place.sort((a, b) => order.indexOf(a.s.ab) - order.indexOf(b.s.ab)); const lx = W - 48, ly0 = HEADER_H + 150; const leaders = svg.append("g").attr("pointer-events", "none"); place.forEach((p, i) => { const y = ly0 + i * 17; leaders.append("line").attr("x1", p.xy[0]).attr("y1", p.xy[1]).attr("x2", lx - 14).attr("y2", y - 4).attr("stroke", NB_BLUE).attr("stroke-width", 0.6).attr("opacity", 0.6); leaders.append("circle").attr("cx", p.xy[0]).attr("cy", p.xy[1]).attr("r", 1.8).attr("fill", WHITE).attr("stroke", NB_BLUE).attr("stroke-width", 0.6); leaders.append("text").attr("x", lx - 10).attr("y", y).attr("font-size", 11).attr("font-weight", 700).attr("fill", p.s.top.color).attr("stroke", NB_BLUE).attr("stroke-width", 0.4).attr("paint-order", "stroke").text(p.s.ab); }); // Legend const legend = svg.append("g").attr("transform", "translate(30," + (HEADER_H + MAP_H + 6) + ")"); legend.append("text").attr("y", 12).attr("font-size", 12).attr("fill", NB_BLUE).text("Largest source, number of states plus DC"); sources.forEach((s, i) => { const g = legend.append("g").attr("transform", "translate(" + (i * 170) + ",26)"); g.append("rect").attr("width", 14).attr("height", 14).attr("fill", s.color); g.append("text").attr("x", 20).attr("y", 11.5).attr("font-size", 12.5).attr("fill", NB_BLUE).text(s.name + " (" + (counts.get(s.name) || 0) + ")"); }); // Citation svg.append("text").attr("x", 30).attr("y", H - 34).attr("font-size", 11.5).attr("fill", NB_RED) .text("Source: U.S. Energy Information Administration, State Energy Data System, Table C1, 2024 estimates"); svg.append("text").attr("x", 30).attr("y", H - 16).attr("font-size", 12.5).attr("font-weight", 700).attr("fill", NB_RED).text("North Branch Media"); // Tooltip const tip = d3.select(root).append("div").style("cssText", "position:absolute;display:none;pointer-events:none;background:" + WHITE + ";border:1px solid " + NB_GREY + ";padding:8px 10px;font-size:12px;color:" + NB_BLUE + ";box-shadow:0 2px 6px rgba(0,0,0,0.12);min-width:200px;"); return root; }2e:[] 2b:{"id":"b8c07e8b0049daaf","slug":null,"title":"Largest Primary Energy Source Consumed By State, 2024","thumbnail":"96ef57ce74a64dc73edc4f989097ffd48ec234104ac72f18db8df286627c527a","access_level":"public","create_time":"$D2026-08-21T03:27:09.966Z","update_time":"$D2026-08-24T19:25:10.523Z","view_time":null,"first_public_time":"$D2026-08-21T03:27:09.966Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"76a2df239d009536","login":"northbranchmedia","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/76819e141d8360b0fb326704433556feaf213b308230b2c1906d59298189200a","tier":"starter_2024"},"version":10,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1a4a5420f054ddf6","login":"north-branch-media","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/c80485c224f42cb4baa7e0bcefcda23343f268e832e216af1cc503d13623ea1c","tier":null}],"members":[{"type":"team","id":"76a2df239d009536","login":"northbranchmedia","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/76819e141d8360b0fb326704433556feaf213b308230b2c1906d59298189200a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"1a4a5420f054ddf6","login":"north-branch-media","name":"North Branch Media","avatar_url":"https://avatars-next.observableusercontent.com/c80485c224f42cb4baa7e0bcefcda23343f268e832e216af1cc503d13623ea1c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d5b2371adbe5262e","slug":"tweets","title":"Tweets","owner":{"id":"76a2df239d009536","login":"northbranchmedia","name":"North Branch Media"}},"type":"notebook","body":{"title":"Largest Primary Energy Source Consumed By State, 2024","cells":[{"id":0,"value":"# Largest Primary Energy Source Consumed By State, 2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"