45:["$","title",null,{"children":"Daily Sea Surface Temperature Anomalies, 1982-2026 (Animation) | Climate Central | Observable"}] 4d:T2100,const mp4Export = (() => { const status = html``; const button = html``; const pngButton = html``; // Shared layout + drawing helpers used by both exports const prepare = () => { const SCALE = 2; const W = Math.round(animated_chart.getAttribute("width") * 1); const chartH = Math.round(animated_chart.getAttribute("height") * 1); // Logo: keep its aspect ratio, 200px wide, placed bottom-right under the chart const LOGO_W = 200; const LOGO_H = LOGO_W * logo.naturalHeight / logo.naturalWidth; const LOGO_MARGIN = 28; // distance from the right edge const TOP = 100, BOTTOM = Math.ceil(LOGO_H) + 24; const H = TOP + chartH + BOTTOM; const outW = Math.ceil(W * SCALE / 2) * 2, outH = Math.ceil(H * SCALE / 2) * 2; // Read the chart geometry from the rendered SVG, grouped into columns (one per year) const rects = [...animated_chart.querySelectorAll("g[aria-label=cell] rect")].map((r) => ({ x: +r.getAttribute("x"), y: +r.getAttribute("y"), w: +r.getAttribute("width"), h: +r.getAttribute("height"), fill: r.getAttribute("fill") })); const columns = [...d3.group(rects, (r) => r.x).entries()] .sort((a, b) => a[0] - b[0]) .map(([, col]) => col); const ticks = [...animated_chart.querySelectorAll("g[aria-label='x-axis tick label'] text")].map((t) => { const g = t.parentNode.getAttribute("transform").match(/translate$([-\d.]+),([-\d.]+)$/); const m = t.getAttribute("transform").match(/translate$([-\d.]+),([-\d.]+)$/); return {text: t.textContent, x: +g[1] + +m[1], y: +g[2] + +m[2]}; }); const drawColumn = (c, col) => { c.save(); c.scale(SCALE, SCALE); for (const r of col) { c.fillStyle = r.fill; c.fillRect(r.x, TOP + r.y, r.w + 0.2, r.h + 0.2); } c.restore(); }; const font = (px) => `${px}px 'Bebas Neue', sans-serif`; // Static layer: background, title, subtitle, legend, logo, axis labels const drawStatic = (c) => { c.save(); c.scale(SCALE, SCALE); c.imageSmoothingQuality = "high"; c.fillStyle = "#fff"; c.fillRect(0, 0, W, H); c.fillStyle = "#000"; c.font = font(38); c.textAlign = "left"; c.textBaseline = "alphabetic"; c.fillText("Global daily sea surface temperatures", 28, 58); c.font = font(18); c.fillText(`Data through ${lastDate}, 2026`, 28, 82); // color legend (mirrors colorLegend cell) const lw = 300, lm = 20, legendW = lw - 2 * lm, step = legendW / colors.length; c.save(); c.translate(W - lw - 20 + lm, 20 + 15); colors.forEach((col, i) => { c.fillStyle = col; c.fillRect(i * step, 0, step + 0.3, 10); }); c.fillStyle = "#000"; c.strokeStyle = "#000"; c.lineWidth = 1; c.textAlign = "center"; c.font = font(14); [-1.5, 0, 1.5].forEach((v) => { const x = (v + 1.5) / 3 * legendW; c.beginPath(); c.moveTo(x, 10); c.lineTo(x, 16); c.stroke(); c.fillText(v.toFixed(1) + "°C", x, 29); }); c.font = font(16); c.fillText("Difference from 1991-2020 normal", legendW / 2, -8); c.restore(); // Climate Central logo, bottom right (drawn from the image's full-resolution pixels) c.drawImage(logo, W - LOGO_W - LOGO_MARGIN, TOP + chartH + 12, LOGO_W, LOGO_H); // x-axis tick labels c.translate(0, TOP); c.fillStyle = "#595A5A"; c.font = font(18); c.textAlign = "right"; for (const t of ticks) { c.save(); c.translate(t.x, t.y); c.rotate(-Math.PI / 2); c.fillText(t.text, 0, 0.32 * 18); c.restore(); } c.restore(); }; const makeCanvas = () => { const cv = document.createElement("canvas"); cv.width = outW; cv.height = outH; return cv; }; return {W, H, outW, outH, columns, drawColumn, drawStatic, makeCanvas}; }; pngButton.onclick = async () => { pngButton.disabled = true; try { await fontReady; const {outW, outH, columns, drawColumn, drawStatic, makeCanvas} = prepare(); const canvas = makeCanvas(); const ctx = canvas.getContext("2d"); drawStatic(ctx); for (const col of columns) drawColumn(ctx, col); const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png")); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `daily-sst-anomalies-1982-2026_data-through-${lastDate}.png`; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 10000); status.textContent = `Done: PNG ${outW}×${outH}, ${(blob.size / 1e6).toFixed(1)} MB`; } catch (e) { status.textContent = "PNG export failed: " + e.message; console.error(e); } finally { pngButton.disabled = false; } }; button.onclick = async () => { if (!("VideoEncoder" in window)) { status.textContent = "WebCodecs isn't supported in this browser. Try Chrome, Edge or Safari 16.4+."; return; } button.disabled = true; try { await fontReady; const FPS = 30, DRAW_SECONDS = 5, HOLD_SECONDS = 1; const {outW, outH, columns, drawColumn, drawStatic, makeCanvas} = prepare(); const canvas = makeCanvas(); const ctx = canvas.getContext("2d"); const cells = makeCanvas(); // accumulates completed columns const cctx = cells.getContext("2d"); drawStatic(ctx); const staticLayer = makeCanvas(); staticLayer.getContext("2d").drawImage(canvas, 0, 0); // Encoder + muxer const config = {codec: "avc1.640033", width: outW, height: outH, bitrate: 25_000_000, framerate: FPS}; const support = await VideoEncoder.isConfigSupported(config); if (!support.supported) throw new Error("H.264 encoding at " + outW + "×" + outH + " isn't supported here."); const muxer = new Muxer({ target: new ArrayBufferTarget(), video: {codec: "avc", width: outW, height: outH}, fastStart: "in-memory" }); let encError; const encoder = new VideoEncoder({ output: (chunk, meta) => muxer.addVideoChunk(chunk, meta), error: (e) => { encError = e; } }); encoder.configure(config); const drawFrames = DRAW_SECONDS * FPS, total = (DRAW_SECONDS + HOLD_SECONDS) * FPS; let done = 0; // number of fully drawn columns for (let f = 0; f < total; f++) { if (encError) throw encError; // progress in columns: whole columns appear left to right, the newest one fades in const progress = columns.length * Math.min(1, f / drawFrames); const full = Math.floor(progress); for (; done < full; done++) drawColumn(cctx, columns[done]); ctx.drawImage(staticLayer, 0, 0); ctx.drawImage(cells, 0, 0); if (full < columns.length && progress > full) { ctx.globalAlpha = progress - full; drawColumn(ctx, columns[full]); ctx.globalAlpha = 1; } const frame = new VideoFrame(canvas, {timestamp: Math.round(f * 1e6 / FPS), duration: Math.round(1e6 / FPS)}); encoder.encode(frame, {keyFrame: f % FPS === 0}); frame.close(); while (encoder.encodeQueueSize > 8) await new Promise((r) => setTimeout(r, 5)); if (f % 5 === 0) { status.textContent = `Encoding ${Math.round(100 * f / total)}% (${outW}×${outH})…`; await new Promise((r) => setTimeout(r, 0)); } } await encoder.flush(); muxer.finalize(); const blob = new Blob([muxer.target.buffer], {type: "video/mp4"}); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `daily-sst-anomalies-1982-2026_data-through-${fileLastDate}.mp4`; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 10000); status.textContent = `Done: ${(blob.size / 1e6).toFixed(1)} MB`; } catch (e) { status.textContent = "Export failed: " + e.message; console.error(e); } finally { button.disabled = false; } }; return html`

${button}${pngButton}${status}

`; })(); display(mp4Export);4e:T63a,colorLegend = { const width = 300; const height = 60; const margin = { top: 20, right: 20, bottom: 30, left: 20 }; const domain = [-1.5, 1.5]; const colorScale = d3.scaleQuantize() .domain(domain) .range(colors); const svg = d3.create("svg") .attr("width", width) .attr("height", height); const legendWidth = width - margin.left - margin.right; const legendHeight = 10; const stepWidth = legendWidth / colors.length; const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Draw color blocks g.selectAll("rect") .data(colors) .join("rect") .attr("x", (d, i) => i * stepWidth) .attr("y", 0) .attr("width", stepWidth) .attr("height", legendHeight) .attr("fill", d => d); // Axis scale const xScale = d3.scaleLinear() .domain(domain) .range([0, legendWidth]); const xAxis = d3.axisBottom(xScale) .tickValues([-1.5, 0.0, 1.5]) .tickFormat((d) => d + "°C") .tickSize(6); // Add axis g.append("g") .attr("transform", `translate(0, ${legendHeight})`) .call(xAxis) .call(g => g.select(".domain").remove()) // remove axis line .call(g => g.selectAll("text") .style("font-family", "Bebas Neue") .style("font-size", "14px") ); // Add title g.append("text") .attr("x", legendWidth / 2) .attr("y", -8) .attr("text-anchor", "middle") .style("font-family", "Bebas Neue") .style("font-size", "16px") .style("font-weight", "normal") .text("Difference from 1991-2020 normal"); return svg.node(); } 4f:[{"id":"5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","href":"https://static.observableusercontent.com/files/5a9fadd5c85c0c14f9849886a66dbd03ed67662ead98114cbe633072026e41eec8c0d8ee22bd3c3b0bffb441bf8e8b1964c6861973c9dc3f5f160324feead694","name":"CC_LongLogo-2 (1) (1).png","type":"image/png","lastModified":1753857926640.158,"size":199924}] 49:{"id":"8f6b7fbb732305a8","slug":"daily-sst-animation","title":"Daily Sea Surface Temperature Anomalies, 1982-2026 (Animation)","thumbnail":"4903b9bac745dbd5634815a2599d301665b57152133bb288bfc20f056bef6323","access_level":"public","create_time":"$D2025-05-23T20:05:04.124Z","update_time":"$D2026-11-08T16:24:45.507Z","view_time":null,"first_public_time":"$D2025-07-30T09:04:32.380Z","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","bio":"Communicating climate change science, effects, and solutions to the public and decision-makers.","followed_by_you":false,"follows_you":false},"version":2052,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"43d98796353ee1e2","login":"ktrudeau","name":"Kaitlyn Trudeau","avatar_url":"https://avatars-next.observableusercontent.com/42ac37fb589a785ca94a55e06a2cd1131ebf60ecd90ae92ae1cf911cc0baf5a9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"1b16cfac8e47ddf9","login":"climatecentral","name":"Climate Central","avatar_url":"https://avatars-next.observableusercontent.com/b8d84fbc6265f9a7c731e62fc076af7c84c7be3a9be06e52da319786d6b129dd","tier":"pro_2024","role":"editor"},{"type":"individual","id":"43d98796353ee1e2","login":"ktrudeau","name":"Kaitlyn Trudeau","avatar_url":"https://avatars-next.observableusercontent.com/42ac37fb589a785ca94a55e06a2cd1131ebf60ecd90ae92ae1cf911cc0baf5a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Daily Sea Surface Temperature Anomalies, 1982-2026 (Animation)","cells":[{"id":0,"value":"

Daily Sea Surface Temperature Anomalies, 1982-2026 (Animation)

Global daily sea surface temperatures
Data through ${lastDate}, 2026

${colorLegend}

`)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"fontReady; // wait for Bebas Neue to load before drawing\n\nconst animated_chart = display(addAnimation(\n Plot.plot({\n height: 400,\n width: width,\n marginLeft: 25,\n marginTop: 35,\n style: {\n fontFamily: \"'Bebas Neue', sans-serif\",\n fontSize: 18,\n fill: \"#595A5A\"\n },\n y: {\n axis: false\n },\n x: {\n axis: \"top\",\n tickFormat: d3.format(\"0\"),\n tickRotate: 270,\n tickSize: 0,\n tickPadding: 35\n },\n color: {\n type: \"diverging\",\n range: colors,\n domain: [-0.8, 0.8],\n legend: false\n },\n marks: [\n Plot.cell(\n through26.filter((d) => !isNaN(d.temp)),\n {\n x: (d) => d.year,\n y: (d) => d.day,\n fill: (d) => d.anomC,\n fillOpacity: 0\n }\n )\n ]\n }),\n { type: \"rect\", delay: 0.1, replay: replay }\n))","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1641,"value":"

${logo}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"$4d","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1599,"value":"through26 = updatedData.filter((d) => d.year <= 2026)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colors = [\n \"#67000d\",\n \"#a50f15\",\n \"#cb181d\",\n \"#ef3b2c\",\n \"#fb6a4a\",\n \"#fc9272\",\n \"#fcbba1\",\n \"#fee0d2\",\n \"#deebf7\",\n \"#c6dbef\",\n \"#9ecae1\",\n \"#6baed6\",\n \"#4292c6\",\n \"#2171b5\",\n \"#08519c\",\n \"#08306b\"\n].reverse()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"const noNAs =through26.filter((d) => d.temp !== null)","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"const lastDate = d3.utcFormat(\"%B %-d\")(new Date (noNAs[noNAs.length-1].date))","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1642,"value":"const fileLastDate = noNAs[noNAs.length-1].date","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { updatedData, d2 } from \"@climatecentral/daily-sst\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import { addAnimation } from \"@mkfreeman/plot-animation\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"const logo = FileAttachment(\"CC_LongLogo-2 (1) (1).png\").image({width: 350, height: 30})","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"const fontReady = (fontLink, await document.fonts.load(\"18px 'Bebas Neue'\"));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"const fontLink = display(html``);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"import {Muxer, ArrayBufferTarget} from \"npm:mp4-muxer\";","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"2"}} 44:null

Daily Sea Surface Temperature Anomalies, 1982-2026 (Animation)

Global daily sea surface temperaturesData through ${lastDate}, 2026

Global daily sea surface temperatures
Data through ${lastDate}, 2026