2c:null 2d:["$","title",null,{"children":"Greenhouse Gas: Methane | Climate Central | Observable"}] 32:T18e5,chart = { await fontsReady; const fmt = d3.utcFormat("%B %Y") const fullWidth = 1920, fullHeight = 1080; const margin = { top: 115, right: 385, bottom: 115, left: 385 }; const chartX = 65, chartY = 150; const cW = 1080, cH = 580; // Derive y-domain from the data, rounded to nice 25-ppb bounds with a little headroom const tickStep = 25; const yMin = Math.floor(d3.min(data, d => d.average) / tickStep) * tickStep; const yMax = Math.ceil (d3.max(data, d => d.average) / tickStep) * tickStep + tickStep; const yTicks = d3.range(yMin, yMax + 1, tickStep); const xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.decimal)) .range([0, cW]); const yScale = d3.scaleLinear() .domain([yMin, yMax]) .range([cH, 0]); const svg = d3.create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("viewBox", `-${margin.left} -${margin.top} ${fullWidth} ${fullHeight}`) .attr("preserveAspectRatio", "xMidYMid meet"); // Self-contained: fonts + background travel with the SVG into the PNG svg.append("style").text(fontFaceCSS); svg.append("image") .attr("href", bgDataUri) .attr("x", -margin.left).attr("y", -margin.top) .attr("width", fullWidth).attr("height", fullHeight) .attr("preserveAspectRatio", "xMidYMid slice"); const g = svg.append("g") .attr("transform", `translate(${chartX}, ${chartY})`) .style("fill", "#ccc") .style("font-family", "Bebas Neue") .style("font-size", "2.05em"); // Gridlines g.append("g").attr("class", "grid") .selectAll("line").data(yTicks).join("line") .attr("x1", 0).attr("x2", cW) .attr("y1", d => yScale(d)).attr("y2", d => yScale(d)) .attr("stroke", "#999").attr("stroke-opacity", 0.5).attr("stroke-width", 0.5); // Y-axis labels g.append("g").attr("class", "yaxis") .selectAll("text").data(yTicks).join("text") .attr("x", -8) .attr("y", d => yScale(d)) .attr("dy", "0.32em").attr("text-anchor", "end") .attr("fill", "#cccccc") .style("opacity", 0.9) .text(d => d); // Methane line g.append("path") .datum(data) .attr("d", d3.line() .x(d => xScale(d.decimal)) .y(d => yScale(d.average))) .attr("fill", "none") .attr("stroke", "#f8bc0c") .attr("stroke-width", 5); // Interactive crosshair + dot + tooltip const bisect = d3.bisector(d => d.decimal).center; const crosshair = g.append("line") .attr("y1", 0).attr("y2", cH) .attr("stroke", "white").attr("stroke-width", 1) .attr("stroke-dasharray", "4,3").attr("opacity", 0); const dot = g.append("circle") .attr("r", 7).attr("fill", "white") .attr("stroke", "#f8bc0c").attr("stroke-width", 2) .attr("opacity", 0); const tip = svg.append("g").attr("opacity", 0).attr("pointer-events", "none"); const tipRect = tip.append("rect") .attr("rx", 4).attr("ry", 4) .attr("fill", "rgba(0,0,0,0.75)") .attr("stroke", "#555").attr("stroke-width", 0.5); const tipDate = tip.append("text") .attr("fill", "#fff") .style("font-family", "Effra, sans-serif").style("font-size", "1.6em"); const tipVal = tip.append("text") .attr("fill", "#f8bc0c") .style("font-family", "Bebas Neue, sans-serif").style("font-size", "2em"); g.append("rect") .attr("width", cW).attr("height", cH) .attr("fill", "none").attr("pointer-events", "all") .on("pointermove", function (event) { const [mx] = d3.pointer(event); const dec = xScale.invert(mx); const i = bisect(data, dec); const d = data[i]; if (!d) return; const cx = xScale(d.decimal); const cy = yScale(d.average); // Use d.month directly — no decimal-year back-math const dateStr = new Date(d.year, d.month - 1) .toLocaleDateString("en-US", { month: "short", year: "numeric" }); const valStr = `${d.average} ppb`; crosshair.attr("x1", cx).attr("x2", cx).attr("opacity", 0.6); dot.attr("cx", cx).attr("cy", cy).attr("opacity", 1); const pad = 12, lineH = 38; tipDate.attr("x", pad).attr("y", pad + 24).text(dateStr); tipVal .attr("x", pad).attr("y", pad + 24 + lineH).text(valStr); const tw = Math.max( tipDate.node().getComputedTextLength() || 150, tipVal .node().getComputedTextLength() || 120 ) + pad * 2; const th = pad * 2 + lineH * 2; tipRect.attr("width", tw).attr("height", th); let tx = chartX + cx + 14; let ty = chartY + cy - th / 2; const svgRight = fullWidth - margin.left; if (tx + tw > svgRight) tx = chartX + cx - tw - 14; ty = Math.max(-margin.top + 8, Math.min(ty, fullHeight - margin.top - th - 8)); tip.attr("transform", `translate(${tx}, ${ty})`).attr("opacity", 1); }) .on("pointerleave", function () { crosshair.attr("opacity", 0); dot.attr("opacity", 0); tip.attr("opacity", 0); }); // Title + subtitle svg.append("text") .attr("transform", "translate(0, 60)") .style("font-size", "5em").style("font-family", "Bebas Neue") .style("fill", "#fff") .text("Greenhouse Gas: Methane"); svg.append("text") .attr("transform", "translate(0, 115)") .style("font-size", "3em").style("font-family", "Effra") .style("fill", "#cccccc") .style('opacity', 0.9) .text("Monthly methane concentration (ppb)"); // Year labels under the chart svg.append("text") .attr("transform", `translate(${chartX}, 780)`) .style("font-size", "2.75em").style("font-family", "Bebas Neue") .style("fill", "#ccc") .text(stats.startYear); svg.append("text") .attr("transform", "translate(1070, 790)") .style("font-size", "2.75em").style("font-family", "Bebas Neue") .style("fill", "#ccc") .text(stats.endYear); // Footnotes — derived dates, not hardcoded svg.append("text") .attr("transform", "translate(0, 830)") .style("font-size", "1.15em").style("font-family", "Effra") .style("fill", "#b8c4cd") .text("Globally-averaged monthly methane (CH4) measurements in parts per billion (ppb)."); svg.append("text") .attr("transform", "translate(0, 855)") .style("font-size", "1.15em").style("font-family", "Effra") .style("fill", "#b8c4cd") .text(`Data through ${last_update}. Source: NOAA Global Monitoring Laboratory.`); return svg.node(); }33:T5c2,summaryBar_real = { const fmtMonthYear = (row) => new Date(row.year, row.month - 1).toLocaleDateString("en-US", { month: "long", year: "numeric" }); const fmt = d3.utcFormat("%B %Y") const cards = [ { label: "Current", value: `${stats.current.average.toFixed(1)} ppb`, sub: fmt(stats.current.date) }, { label: "Highest", value: `${stats.max.toFixed(1)} ppb`, sub: fmt(stats.maxDate.date) }, { label: "Lowest", value: `${stats.min.toFixed(1)} ppb`, sub: fmt(stats.minDate.date) }, { label: "Years of Data", value: stats.endYear - stats.startYear + 1, sub: `${stats.startYear}–${stats.endYear}` }, ]; return html`

${cards.map(({label, value, sub}) => html`

${label}

${value}

${sub}

`)}

`; }34:[] 30:{"id":"9d8aedc60ba0a2fd","slug":"methane","title":"Greenhouse Gas: Methane","thumbnail":"5dc039bfda8b400685f73c379054ca420eb4df206af819bd194c585187fa64d4","access_level":"public","create_time":"$D2026-01-05T05:46:14.816Z","update_time":"$D2026-09-01T20:27:16.698Z","view_time":null,"first_public_time":"$D2026-04-09T03:53:19.725Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central","avatar_url":"https://avatars-next.observableusercontent.com/b8d84fbc6265f9a7c731e62fc076af7c84c7be3a9be06e52da319786d6b129dd","tier":"pro_2024"},"version":1211,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"individual","id":"2c83cdab1789ae3a","login":"helen-brush","name":"Helen Brush","avatar_url":"https://avatars-next.observableusercontent.com/77ee2df45f225a5bd60250da63b7a3e91a5b623fe778a82f42c1b3f3d8e521cd","tier":null,"role":"editor"},{"type":"individual","id":"43d98796353ee1e2","login":"ktrudeau","name":"Kaitlyn Trudeau","avatar_url":"https://avatars-next.observableusercontent.com/3650447af2e2411fcfe3aa899ed520cce0fe01a62f5b78ec6617c32d64cdf326","tier":null,"role":"editor"},{"type":"individual","id":"4437df17cc61ecd6","login":"zachary-labe","name":"Zack Labe","avatar_url":"https://avatars-next.observableusercontent.com/2962590adcb8bbcb054d521be92bcf44d6b50e1d353cf775520b792c1399f4de","tier":null,"role":"editor"},{"type":"team","id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central","avatar_url":"https://avatars-next.observableusercontent.com/b8d84fbc6265f9a7c731e62fc076af7c84c7be3a9be06e52da319786d6b129dd","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"9f19775783485e04","slug":"climate-services","title":"Climate Services Monthly Brief Graphics","owner":{"id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central"}},"type":"notebook","body":{"titling":"auto","title":"Greenhouse Gas: Methane","cells":[{"id":0,"value":"# Greenhouse Gas: Methane","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1039,"value":"display = html`\n

${summaryBar_real}

${chart}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"viewof freshness = {\n const m = manifest.ch4;\n const changed = new Date(m.last_changed);\n const daysSinceCheck = (Date.now() - new Date(m.last_checked)) / 864e5;\n\n if (m.status === \"failed\" || daysSinceCheck > 2) {\n return html`

\n Data may be stale. Last updated\n ${changed.toLocaleDateString(\"en-US\", {month:\"long\", day:\"numeric\", year:\"numeric\"})}.\n The automated update has not succeeded recently.\n

`;\n }\n return html`

\n Data last updated ${changed.toLocaleDateString()}.\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"viewof downloadPng = {\n return Inputs.button(\"Download Graphic\", {\n reduce: async () => {\n const blob = await svgToPng(chart, { scale: 2 });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `Monthly_Methane_${last_update}.png`;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(a.href);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":593,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":592,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":938,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":937,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":941,"value":"### CODE FOR PAGE FUNCTIONALITY","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":987,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"stats = {\n const current = data[data.length - 1];\n const max = d3.max(data, d => d.average);\n const min = d3.min(data, d => d.average);\n return {\n current,\n max,\n maxDate: data.find(d => d.average === max),\n min,\n minDate: data.find(d => d.average === min),\n startYear: d3.min(data, d => d.year),\n endYear: d3.max(data, d => d.year),\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = d3.csv(`${git_base}/ch4.csv`, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"last_update = easternTime(manifest.ch4.last_changed) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"import {\n fonts,\n fontFaceCSS,\n fontsReady,\n bgDataUri,\n parseCpc,\n git_base,\n manifest,\n svgToPng,\n easternTime,\n d3\n} from \"observable:@climatecentral/climate-services-library\"","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"