2c:null 2d:["$","title",null,{"children":"Daily SST Ocean Temperature Graphic, 1982-2026 | Climate Central | Observable"}] 32:T627,

Use the options below to generate daily sea surface temperature graphics. The sliders in the Positioning section will allow you to adjust the placement of the legend and the date label, as the current placement may not be ideal for all regions.

${col1}

${col2}

${col3}

33:T452,// Shared geometry for the chart (SVG coordinates, 1920×1080). The plot (gridline) // area runs from plotLeft to plotRight horizontally and plotTop to plotBottom // vertically. Used by the chart itself and by the legend/date position sliders. chartBox = { await bebasMeasureFace; const w = 1920, h = 1080; const spanishTitleShift = 0; // nudge Spanish subtitle/labels right to match the title image const titleX = language === "Spanish" ? 385 + spanishTitleShift : 385; const decimals = d3.tickStep(min, max, 5) < 1 ? 1 : 0; const formatTick = (d) => language === "Spanish" ? spanishNumberFormat(`.${decimals}f`)(d) + "°" : d.toFixed(decimals) + "°"; const labelGap = 14; const ctx = document.createElement("canvas").getContext("2d"); ctx.font = '40px "BebasMeasure"'; const maxLabelW = d3.max(d3.ticks(min, max, 5), (d) => ctx.measureText(formatTick(d)).width ); return { w, h, titleX, formatTick, plotLeft: titleX + labelGap + Math.ceil(maxLabelW), plotRight: w - 385, plotTop: maxRangeY, plotBottom: h - minRangeY }; }34:T1f57,oceanChart = { const { w, h, titleX, formatTick, plotLeft, plotRight, plotTop, plotBottom } = chartBox; const margin = { top: 115, right: 385, bottom: 115, left: 385 }; const width = w - margin.left - margin.right; const currentYear = Number(new2026[0]?.year ?? 2026); const recordYear = Number(recordYearData[0]?.year); const isRecordYear = recordYear === currentYear; // load your background as a base64 data URI (avoids cross-origin canvas // tainting issues in Safari when rasterizing the SVG for download) const legendURL = await FileAttachment("legend_horizontal.png").url(); const selectedBg = titles[0] === "Title" ? language === "English" ? await fileToDataURL(FileAttachment("new.jpg"), "image/jpeg") : await fileToDataURL(FileAttachment("SST_Bg_Sp@1.jpg"), "image/jpeg") : language === "Spanish" ? await fileToDataURL(FileAttachment("SST_Bg_sp@1.jpg"), "image/jpeg") : await fileToDataURL(FileAttachment("NewSSTBg_en.jpg"), "image/jpeg"); const withSub = titles[1] === "Subtitle" || titles[0] === "Subtitle" ? "black" : "none"; const oceanGx = Plot.plot({ width: w, height: h, marginTop: margin.top + 110, marginBottom: margin.bottom + 70, marginLeft: plotLeft, marginRight: margin.right, style: { fontFamily: "Bebas Neue", fontSize: 40, color: "#83bddf", background: `url(${selectedBg})`, backgroundSize: "cover" }, x: { ticks: 0, domain: [0, 366] }, y: { domain: [min, max], range: [plotBottom, plotTop], grid: true, tickSize: 0, ticks: 5, tickFormat: formatTick }, grid: { style: { strokeOpacity: 0.8 } }, marks: [ // ── all previous years Plot.lineY(previousYears, { x: "day", y: varName, stroke: "#D2D3D4", strokeWidth: 1, opacity: 0.65, z: "year" }), // ── 1991–2020 mean Plot.lineY(average_1991_2020, { x: "day", y: (d) => (realUnits === "°F" ? d.norm1991_2020 : d["norm1991_2020C"]), stroke: "#65b6e9", strokeWidth: 6, opacity: 0.8 }), // ── record year line Plot.lineY(recordYearData, { x: "day", y: (d) => d[varName], stroke: "#13f1ef", strokeWidth: 5, opacity: 0.8 }), // ── this year line Plot.lineY(new2026, { x: "day", y: (d) => d[varName], stroke: "white", strokeWidth: 10, opacity: 0.8 }) ] }); const svg2 = oceanGx.cloneNode(true); const svg3 = d3.select(svg2); // Left-align the y-axis tick labels at the title/subtitle's x position svg3 .select('[aria-label="y-axis tick label"]') .attr("text-anchor", "start") .attr("transform", `translate(${titleX - plotLeft},0)`); // Draw the dark blue legend box with light blue border svg3 .append("rect") .attr("x", 500 + legX) .attr("y", h - 385 - legY) .attr("width", 300) .attr("height", 150) .attr("fill", "#053250") // dark blue fill .attr("stroke", "#6dbff4") // light blue border .attr("stroke-width", 2) .attr("rx", 3); // rounded corners (optional) // 2026 line svg3 .append("line") .attr("x1", 520 + legX) .attr("x2", 560 + legX) .attr("y1", h - 355 - legY) .attr("y2", h - 355 - legY) .attr("stroke", "#ffffff") .attr("stroke-width", 10); // 2026 label svg3 .append("text") .attr("x", 597 + legX) .attr("y", h - 350 - legY) .text("2026") .attr("fill", "white") .attr("font-size", "20px") .attr("font-family", "Effra"); // record line svg3 .append("line") .attr("x1", 520 + legX) .attr("x2", 560 + legX) .attr("y1", h - 325 - legY) .attr("y2", h - 325 - legY) .attr("stroke", "#13f1ef") .attr("stroke-width", 5); // record label svg3 .append("text") .attr("x", 575 + legX) .attr("y", h - 320 - legY) .text(viewof rec) .attr("fill", "white") .attr("font-size", "20px") .style("text-anchor", "start") .attr("font-weight", 400) .attr("font-family", "Effra"); // normal line svg3 .append("line") .attr("x1", 520 + legX) .attr("x2", 560 + legX) .attr("y1", h - 295 - legY) .attr("y2", h - 295 - legY) .attr("stroke", "#6dbff4") .attr("stroke-width", 5); // normal label svg3 .append("text") .attr("x", 575 + legX) .attr("y", h - 290 - legY) .text(language === "Spanish" ? "Promedio de 1991-2020" : "1991-2020 mean") .attr("fill", "white") .attr("font-size", "20px") .style("text-anchor", "start") .attr("font-weight", 400) .attr("font-family", "Effra"); // other years line svg3 .append("line") .attr("x1", 520 + legX) .attr("x2", 560 + legX) .attr("y1", h - 265 - legY) .attr("y2", h - 265 - legY) .attr("stroke", "#D2D3D4") .attr("stroke-width", 3); // other years label svg3 .append("text") .attr("x", 575 + legX) .attr("y", h - 260 - legY) .text( language === "Spanish" ? "Otros años desde 1982" : "Other years since 1982" ) .attr("fill", "white") .attr("font-size", "20px") .style("text-anchor", "start") .attr("font-weight", 400) .attr("font-family", "Effra"); // Footnote block, left-aligned with the title/subtitle/y-axis labels. The // "Source:" / "Fuente:" part goes on its own last line, bottom-aligned with the // bottom of the logo baked into the background image (ink bottom at y = 1004); // the rest of the footnote sits directly above it. The block ends before the // logo (which starts at x = 1216) so long footnotes wrap upward instead. const footMatch = footnote.match(/^([\s\S]*?)\s*((?:Source|Fuente):[\s\S]*)$/); const footMain = footMatch ? footMatch[1] : footnote; const footSource = footMatch ? footMatch[2] : ""; const footBottom = 1008; // box bottom ≈ baseline of the source line at y ≈ 1004 const footHeight = 80; svg3 .append("foreignObject") .attr("x", titleX) .attr("y", footBottom - footHeight) .attr("width", 1192 - titleX) .attr("height", footHeight).html(`

${footMain}

${footSource ? `

${footSource}

` : ""}

`); // Date label: Date X = px from the left edge of the chart area (to the label's // left edge); Date Y = px up from the bottom edge (to the label's middle) svg3 .append("text") .attr("x", plotLeft + dateX) .attr("y", plotBottom - dateY) .attr("fill", "white") .attr("font-size", "30px") .attr("font-family", "Effra") .attr("font-weight", 700) .attr("text-anchor", "start") .attr("dominant-baseline", "middle") .text(dateLabel.text); const subtitle = `${basinName} (${realUnits})`; const subtitleLines = wrapSvgText(subtitle, 93); // ← adjust maxChars as needed const fontSize = language === "English" ? 41 : 36; const yTop = language === "English" ? 245 : 235; const subtitleGroup = svg3 .append("text") .attr("x", titleX) .attr("y", yTop) .attr("fill", withSub) .attr("font-size", `${fontSize}px`) .attr("font-family", "Effra") .attr("font-weight", 400) .style("letter-spacing", "-1px") .attr("text-anchor", "start"); subtitleLines.forEach((line, i) => { subtitleGroup .append("tspan") .attr("x", titleX) .attr("dy", i === 0 ? 0 : fontSize * 1.1) .text(line); }); await injectFonts(svg2, effraRegular, effraBold, bebasRegular); return svg2; }35:T698,basinName = { if(language === "English"){ if (basin === "World (60°S-60°N)") { return `Daily global sea surface temperatures` } else if (basin === "North Atlantic") { return `Daily North Atlantic sea surface temperatures` } else if (basin === "Subpolar North Atlantic") { return `Daily Subpolar North Atlantic sea surface temperatures` } else if (basin === "Atlantic Hurricane MDR") { return `Daily Atlantic Hurricane MDR sea surface temperatures` } else if (basin === "Gulf of Maine") { return `Daily Gulf of Maine sea surface temperatures` } else if (basin === "Gulf of Mexico") { return `Daily Gulf of Mexico sea surface temperatures` } else { return `Daily Niño 3.4 sea surface temperatures ` } } else { if (basin === "World (60°S-60°N)") { return `Temperatura global diaria de la superficie del mar` } else if (basin === "North Atlantic") { return `Temperaturas diarias de la superficie del mar, Atlántico Norte` } else if (basin === "Subpolar North Atlantic") { return `Temperaturas diarias de la superficie del mar, subpolar del Atlántico Norte` } else if (basin === "Atlantic Hurricane MDR") { return `Temperaturas diarias de la superficie del mar en la región principal de desarrollo de huracanes del Atlántico` } else if (basin === "Gulf of Maine") { return `Temperaturas diarias de la superficie del mar, Golfo de Maine` } else if (basin === "Gulf of Mexico") { return `Temperaturas diarias de la superficie del mar, Golfo de México` } else { return `Temperaturas diarias de la superficie del mar, Niño 3.4` } } }36:Ta7d,footnote = { if (basin === "World (60°S-60°N)") { if (language === "English") { return `Data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISST v2.1.`; } else { return `Los datos para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISST v2.1.`; } } else if (basin === "North Atlantic") { if (language === "English") { return `North Atlantic (0-60°N, 0-80°W) data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISST v2.1.`; } else { return `Los datos del Atlántico Norte (0-60°N, 0-80°W) para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISST v2.1.`; } } else if (basin === "Subpolar North Atlantic") { if (language === "English") { return `Subpolar North Atlantic (45-60°N, 20-45°W) data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISST v2.1.`; } else { return `Los datos del Atlántico Norte subpolar (45-60°N, 20-45°W) para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISST v2.1.`; } } else if (basin === "Atlantic Hurricane MDR") { if (language === "English") { return `Atlantic Hurricane Main Development Region (MRD) (10-20°N, 20-85°W) data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISST v2.1.`; } else { return `Los datos de la región principal de desarrollo de huracanes del Atlántico (10-20°N, 20-85°W) para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISST v2.1.`; } } else if (basin === "Gulf of Maine") { if (language === "English") { return `Gulf of Maine (42-45°N, 66-71°W) data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISSTv2.1.`; } else { return `Los datos del Golfo de Maine (42-45°N, 66-71°W) para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISST v2.1.`; } } else if (basin === "Gulf of Mexico") { if (language === "English") { return `Gulf of Mexico (20-30°N, 82-98°W) data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISST v2.1.`; } else { return `Los datos del Golfo de México (20-30°N, 82-98°W) para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISST v2.1.`; } } else { if (language === "English") { return `Niño 3.4 (5°S-5°N, 120-170°W) data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISSTv2.1.`; } else { return `Los datos en la zona Niño 3.4 (5°S-5°N, 120-170°W) para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISSTv2.1.`; } } }37:T741,downloadGx = async function (x, filename) { try { // toBlob avoids building a giant base64 data: URL (which some Safari // versions choke on) and lets us trigger the download the same reliable // way the CSV button already does (Blob URL + anchor.click()). const blob = await htmlToImage.toBlob(x, { pixelRatio: 1 }); if (!blob) throw new Error("Image generation returned no data."); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = filename; // Safari quirk: because this callback is async (we `await` the blob // above), the click below can fire *after* the browser's brief // "user activation" window has expired. When that happens, Safari // often ignores the `download` attribute on blob: URLs and instead // tries to navigate the *current frame* to the blob: URL. Since this // notebook runs inside an