33:T1adb,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 = 190; const cW = 1100, cH = 510; const xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.date)) .range([0, cW]); const yMin = Math.floor(d3.min(data, d => d.average) / 10) * 10; const yMax = Math.ceil (d3.max(data, d => d.average) / 10) * 10; const yTicks = d3.range(yMin, yMax + 1, 10); const yScale = d3.scaleLinear() .domain([310, d3.max(data, d => d.average)]) .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 and background travel with the SVG 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.75).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("opacity", 0.9) .text(d => d); // CO₂ line g.append("path") .datum(data) .attr("d", d3.line() .x(d => xScale(d.date)) .y(d => yScale(d.average)) .curve(d3.curveCatmullRom)) .attr("fill", "none") .attr("stroke", "#f8bc0c") .attr("stroke-width", 4); // Custom marker if (check_real.includes("Add custom marker") && birthDatum) { const mx = xScale(birthDatum.date); const my = yScale(birthDatum.average); g.append("line") .attr("x1", mx).attr("x2", mx) .attr("y1", my / 2).attr("y2", my) .attr("stroke", "white").attr("stroke-width", 1) .attr("stroke-dasharray", "4,3").attr("opacity", 0.6); g.append("circle") .attr("cx", mx).attr("cy", my).attr("r", 8) .attr("fill", "white") .attr("stroke", "#f8bc0c").attr("stroke-width", 2.5); g.append("text") .attr("x", mx).attr("y", my / 2 - 12) .attr("text-anchor", "middle") .style("font-family", "Effra, sans-serif") .style("font-size", "1.5em").style("fill", "#fff") .text(labVal_real); } // Interactive crosshair + tooltip const bisect = d3.bisector(d => d.date).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.date); const cy = yScale(d.average); const dateStr = fmt(d.date); const valStr = `${d.average.toFixed(1)} ppm`; 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: Carbon Dioxide"); 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 carbon dioxide concentration (ppm)"); // 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(1080, 780)") .style("font-size", "2.75em").style("font-family", "Bebas Neue") .style("fill", "#ccc") .text(stats.endYear); // Footnotes svg.append("text") .attr("transform", "translate(0, 830)") .style("font-size", "1.15em").style("font-family", "Effra") .style("fill", "#b8c4cd") .text("Monthly measurements of atmospheric CO2 parts per million (ppm) at Mauna Loa Observatory."); svg.append("text") .attr("transform", "translate(0, 855)") .style("font-size", "1.15em").style("font-family", "Effra") .style("fill", "#b8c4cd") .text(`Data as of ${last_update}. Source: NOAA Global Monitoring Laboratory.`); chartRef.node = svg.node(); return chartRef.node; }34:T634,summaryBar_real = { const fmtDate = (dec) => { const yr = Math.floor(dec); const mo = Math.round((dec - yr) * 12); return new Date(yr, mo).toLocaleDateString("en-US", { month: "long", year: "numeric" }); }; const fmt = d3.utcFormat("%B %Y"); const cards = [ { label: "Current", value: `${stats.current.average.toFixed(1)} ppm`, sub: fmt(stats.current.date) }, { label: "Highest", value: `${stats.max.toFixed(1)} ppm`, sub: fmt(stats.maxDate) }, { label: "Lowest", value: `${stats.min.toFixed(1)} ppm`, sub: fmt(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}

` )}

`; }35:[] 31:{"title":"Greenhouse Gas: Carbon Dioxide","cells":[{"id":0,"value":"# Greenhouse Gas: Carbon Dioxide","pinned":false,"hidden":false,"mode":"md"},{"id":2523,"value":"display = html`\n

${summaryBar_real}

${chart}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2510,"value":"menu_real = htl.html`\n \n

\n \n

\n ${viewof freshness}\n ${viewof downloadPng}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1806,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1810,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1814,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1804,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1803,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2247,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2270,"value":"### CODE FOR PAGE FUNCTIONALITY","pinned":false,"hidden":false,"mode":"md"},{"id":2694,"value":"viewof freshness = {\n const m = manifest.co2;\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":2503,"value":"viewof downloadPng = {\n return Inputs.button(\"Download Graphic\", {\n reduce: async () => {\n const blob = await svgToPng(chartRef.node, { scale: 2 });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `Monthly_CO2_${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":2436,"value":"viewof check_real = Inputs.checkbox([\"Add custom marker\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2444,"value":"viewof birthDate_real = Inputs.date({\n label: \"Enter a date\",\n value: d3.utcFormat(\"%Y-%m\")(new Date(Date.UTC(1990, 0))),\n min: d3.utcFormat(\"%Y-%m\")(new Date(Date.UTC(stats.startYear, 0))),\n max: d3.utcFormat(\"%Y-%m\")(new Date(Date.UTC(stats.endYear, stats.current.month - 1))),\n step: \"month\",\n disabled: isDis_real,\n width: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2466,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2454,"value":"viewof markerText_real = Inputs.text({\n value: \"Custom label\",\n label: \"\",\n disabled: labDis_real\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2430,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2448,"value":"viewof label_real = Inputs.radio([\"CO2 value\", \"Custom\"], {\n value: \"CO2 value\",\n label: \"Marker label\",\n disabled: isDis_real\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2616,"value":"chartRef = ({ node: null }) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2442,"value":"isDis_real = !check_real.includes(\"Add custom marker\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2451,"value":"labDis_real = label_real !== \"Custom\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2459,"value":"// Safe even when birthDatum is null\nlabVal_real = label_real === \"Custom\"\n ? markerText_real\n : birthDatum? `${birthDatum.average} ppm` : \"—\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2456,"value":"birthDatum = {\n return data.find((v) => v.year === birthDate_real.getFullYear()+1 && v.month === birthDate_real.getUTCMonth()+1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2427,"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).date,\n min,\n minDate: data.find(d => d.average === min).date,\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":2669,"value":"last_update = easternTime(manifest.co2.last_changed) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":2423,"value":"data = d3.csv(`${git_base}/co2.csv`, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2573,"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"}