2d:null 2e:["$","title",null,{"children":"Daily SST Ocean Temperature Graphic, 1982-2026 | Climate Central | Observable"}] 33: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}

34:T21b1,oceanChart = { const w = 1920, h = 1080; const margin = { top: 115, right: 385, bottom: 115, left: 385 }; const width = w - margin.left - margin.right; const height = h - margin.top - margin.bottom; // 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 svg = d3 .create("svg") .attr("viewBox", `-${margin.left} -${margin.top} ${w} ${h}`) .attr("preserveAspectRatio", "xMidYMid meet") .style("border", "1px solid black") .style("background", selectedBg); const oceanGx = Plot.plot({ width: w, height: h, marginTop: margin.top + 110, marginBottom: margin.bottom + 70, marginLeft: basin === "World (60°S-60°N)" ? margin.left + 80 : margin.left + 52, 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: [h - minRangeY, maxRangeY], grid: true, tickSize: 0, ticks: 5, tickFormat: (d) => language === "Spanish" ? spanishNumberFormat(`.${basin === "World (60°S-60°N)" ? 1 : 0}f`)( d ) + "°" : d.toFixed(basin === "World (60°S-60°N)" ? 1 : 0) + "°" }, 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) => (units === "°F" ? d.norm1991_2020 : d["norm1991_2020C"]), stroke: "#65b6e9", strokeWidth: 6, opacity: 0.8 }), // ── this year line, plotted by actual Date Plot.lineY(recordYearData, { x: "day", // ← switch to date y: (d) => d[varName], stroke: "#13f1ef", strokeWidth: 5, opacity: 0.8 }), // ── this year line, plotted by actual Date Plot.lineY(new2026, { x: "day", // ← switch to date y: (d) => d[varName], stroke: "white", strokeWidth: 10, opacity: 0.8 }) ] }); const yScale = d3 .scaleLinear() .domain([ d3.min(thisYear_subset, (d) => d.temp), d3.max(thisYear_subset, (d) => d.temp) ]) // use the min and max of `day` .range([0, 1920 - 385]); // map to the chart's width const xScale = d3.scaleLinear().domain([0, 366]).range([0, width]); // match Plot dimensions const svg2 = oceanGx.cloneNode(true); const svg3 = d3.select(svg2); // 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) // 2025 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"); svg3 .append("foreignObject") .attr("x", 470) .attr("y", h - 104) .attr("width", 900) .attr("height", 32).html(`

${footnote}

`); const lastDate = language === "English" ? lastNonLeap_en : lastNonLeap_sp; const pos = new2026.length - 1; // fix off-by-one const d = new2026[pos]; // safer and clearer const xPosition = xScale(d.day); const yPosition = yScale(d[varName]); // yScale should be based on temp, not day // Get the actual x position using the same domain/range as your Plot x scale const plotMarginLeft = basin === "World (60°S-60°N)" ? margin.left + 80 : margin.left + 52; const plotWidth = w - plotMarginLeft - margin.right; const xPlotScale = d3.scaleLinear().domain([0, 366]).range([0, plotWidth]); const lastPoint = new2026[new2026.length - 1]; // Compute y position using the Plot y scale const plotMarginTop = margin.top + 110; const plotMarginBottom = margin.bottom + 70; const plotChartHeight = h - plotMarginTop - plotMarginBottom; const yDomain = [min, max]; const yRangeLow = h - minRangeY; // must match your Plot y range const yRangeHigh = maxRangeY; // must match your Plot y range const yPlotScale = d3.scaleLinear() .domain(yDomain) .range([yRangeLow, yRangeHigh]); svg3 .append("text") .attr("x", plotMarginLeft + xPlotScale(lastPoint.day) + 12) .attr("y", yPlotScale(lastPoint[varName])) .attr("fill", "white") .attr("font-size", "30px") .attr("font-family", "Effra") .attr("font-weight", 700) .attr("text-anchor", "start") .attr("dominant-baseline", "middle") // vertically centers on the line endpoint .text(`${lastDate}`); const subtitle = `${basinName} (${units})`; 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", 385) .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", 385) .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:T482,function fetchAndFlattenSST(data) { let flattened = []; // Loop through each year in the data array for (let x = 1; x < data.length - 2; x++) { let yr = +data[x].name; let row1 = data[x].data; let norm91 = data[48].data; let isLeap = yr % 4; let rowLength = isLeap === 0 ? 366 : 365; // Ensure the data array is valid if (!Array.isArray(row1)) continue; // Loop through the temperatures for each day for (let y = 0; y < rowLength; y++) { const temp = row1[y]; const tempC = row1[y] const anomC = +(tempC-norm91[y]).toFixed(4); const normDay = +(norm91[y] * (9 / 5) + 32).toFixed(4); const normC = +(norm91[y]); const tempF = temp === null ? "null" : +(temp * (9 / 5) + 32).toFixed(4); const anomF = tempF - normDay; const day = y + 1; // Correct day index to 1-based flattened.push({ year: yr, date: julianToYearMonthDay(yr, day), day: day, temp: tempF, tempC: tempC, norm1991_2020: normDay, norm1991_2020C: normC, anom: anomF, anomC: anomC }); } } return flattened; }37:Ta67,footnote = { if (basin === "World (60°S-60°N)") { if (language === "English") { return `Data for 2026 includes January 1 through ${lastNonLeap_en}. Source: NOAA OISSTv2.1.`; } else { return `Los datos para 2026 incluyen del 1 de enero al ${lastNonLeap_sp}. Fuente: NOAA OISSTv2.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 OISSTv2.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 OISSTv2.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 OISSTv2.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 OISSTv2.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 OISSTv2.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: NOAAOISSTv2.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 OISSTv2.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: OISSTv2.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 OISSTv2.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: 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.`; } } }38: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