33:T5a8,summaryBar_real = { const fmtMonthYear = (row) => new Date(row.year, row.month - 1).toLocaleDateString("en-US", { month: "long", year: "numeric" }); const cards = [ { label: "Current", value: `${stats.current.average.toFixed(1)} ppb`, sub: fmtMonthYear(stats.current) }, { label: "Highest", value: `${stats.max.toFixed(1)} ppb`, sub: fmtMonthYear(stats.maxDate) }, { label: "Lowest", value: `${stats.min.toFixed(1)} ppb`, sub: fmtMonthYear(stats.minDate) }, { 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:T1848,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 = 50, chartY = 150; const cW = 1100, cH = 570; // Derive y-domain from the data, in 2-ppb steps with a tick at the top const tickStep = 2; 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"); // fonts and background 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") .style('fill', "#cccccc") .style('opacity', 0.9) .text(d => d); // N₂O 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); 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: Nitrous Oxide"); 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 nitrous oxide concentration (ppb)"); // Year labels 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, 780)") .style("font-size", "2.75em").style("font-family", "Bebas Neue") .style("fill", "#ccc") .text(stats.endYear); svg.append("text") .attr("transform", "translate(0, 830)") .style("font-size", "1.15em").style("font-family", "Effra") .style("fill", "#b8c4cd") .text("Globally averaged monthly nitrous oxide (N2O) 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(); }35:[] 31:{"title":"Greenhouse Gas: Nitrous Oxide","cells":[{"id":0,"value":"# Greenhouse Gas: Nitrous Oxide","pinned":false,"hidden":false,"mode":"md"},{"id":545,"value":"display = html`\n

${summaryBar_real}

${chart}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"viewof freshness = {\n const m = manifest.n2o;\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}","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"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_Nitrous_Oxide_${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"},{"id":118,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":452,"value":"### CODE FOR PAGE FUNCTIONALITY","pinned":false,"hidden":false,"mode":"md"},{"id":530,"value":"$33","pinned":false,"hidden":true,"mode":"ojs"},{"id":534,"value":"$34","pinned":false,"hidden":true,"mode":"ojs"},{"id":27,"value":"last_update = easternTime(manifest.n2o.last_changed) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"data = d3.csv(`${git_base}/n2o.csv`, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"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"},{"id":540,"value":"import { fonts, fontFaceCSS, fontsReady, bgDataUri, parseCpc, git_base, manifest, svgToPng, easternTime, d3 } from \"observable:@climatecentral/climate-services-library\"","pinned":false,"hidden":false,"mode":"js"}],"files":"$W35","stdlib":"2","titling":"auto"}