31:T20e4,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 const legendURL = await FileAttachment("legend_horizontal.png").url(); const selectedBg = titles[0] === "Title" ? language === "English" ? await FileAttachment("new.jpg").url() : await FileAttachment("SST_Bg_Sp@1.jpg").url() : language === "Spanish" ? await FileAttachment("SST_Bg_sp@1.jpg").url() : await FileAttachment("NewSSTBg_en.jpg").url(); 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; }32:T638,finalDiv = html`

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: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` } } }34: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; }35: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.`; } } }36:T948,function fetchAndFlattenSST2(data) { // Build a quick lookup by name const byName = Object.fromEntries( (data || []).map((d) => [String(d.name), d]) ); const prelim = byName["Preliminary"]; const normals = byName["1991-2020"] || byName["1991–2020"] || data.find((d) => /1991.?2020/.test(d.name)); if (!normals) throw new Error("Normals (1991–2020) row not found."); const norm91 = normals.data; const flattened = []; // Determine which "year" rows exist (e.g., 1982..2025) const yearNames = Object.keys(byName) .filter((k) => /^\d{4}$/.test(k)) .map((k) => +k) .sort((a, b) => a - b); const newYears = yearNames.filter((d) => d !== 1981); for (const yr of newYears) { // Get the base year series const baseRow = (byName[String(yr)]?.data || []).slice(); // copy // Merge with Preliminary if this is 2025 (or whatever current year) and prelim exists let row = baseRow; if (yr === 2026 && prelim?.data) { const p = prelim.data; const L = Math.max(baseRow.length, p.length, norm91.length); // protect against length mismatch row = new Array(L); for (let i = 0; i < L; i++) { const vYear = baseRow[i] ?? null; const vPrel = p[i] ?? null; // Prefer the base value if present; otherwise use Preliminary row[i] = vYear != null ? vYear : vPrel; } } // Decide how many days to iterate. // Use the min of row length and normals length to avoid out-of-bounds. const len = Math.min(row.length, norm91.length); for (let y = 0; y < len; y++) { const tempC = row[y]; // may be null const normC = norm91[y]; // assumed numeric const anomC = tempC == null || normC == null ? null : +(tempC - normC).toFixed(4); const tempF = tempC == null ? null : +((tempC * 9) / 5 + 32).toFixed(4); const normF = normC == null ? null : +((normC * 9) / 5 + 32).toFixed(4); const anomF = tempF == null || normF == null ? null : +(tempF - normF).toFixed(4); const day = y + 1; flattened.push({ year: yr, date: julianToYearMonthDay(yr, day), // your existing helper day, temp: tempF, tempC: tempC, norm1991_2020: normF, norm1991_2020C: normC, anom: anomF, anomC: anomC }); } } return flattened; }37:T9d0, 38:[{"id":"63cbdf3da9f3beeb917e6e7aeea6029c0dfa80ee7a74c41a8f7c6a9d2a046f48f4c388c44d3a4935d94383e36cef6da9cee34f4a995f9874baef78f89bcf5d69","href":"https://static.observableusercontent.com/files/63cbdf3da9f3beeb917e6e7aeea6029c0dfa80ee7a74c41a8f7c6a9d2a046f48f4c388c44d3a4935d94383e36cef6da9cee34f4a995f9874baef78f89bcf5d69","name":"SST_legend2.png","type":"image/png","lastModified":1746857848044.023,"size":43791},{"id":"a1ab979a04a425b10f2469ede4f6d3fc11b151271645dd41c9016b0589c7127b210bd8e9ddc7ded9e186e03a01ac2f61cf997c955ebebaf236f3fd523346f09d","href":"https://static.observableusercontent.com/files/a1ab979a04a425b10f2469ede4f6d3fc11b151271645dd41c9016b0589c7127b210bd8e9ddc7ded9e186e03a01ac2f61cf997c955ebebaf236f3fd523346f09d","name":"SST_Bg_F.jpg","type":"image/jpeg","lastModified":1747357818053.228,"size":213273},{"id":"04e5f1fba58afb659c51737893004a47ff6a727d4cc0b290644af75b7713487a3a5f25f97b6a80b75d158195f8940af1b2a175d20fd102cff64f6603c3569998","href":"https://static.observableusercontent.com/files/04e5f1fba58afb659c51737893004a47ff6a727d4cc0b290644af75b7713487a3a5f25f97b6a80b75d158195f8940af1b2a175d20fd102cff64f6603c3569998","name":"SST_Bg_en.jpg","type":"image/jpeg","lastModified":1753132866802.039,"size":167543},{"id":"34f97eb2b1741c9e8ff68868ec5ccac4580ff32c0978f80e108cfc042a7a8a93d76479ba3d9252fc14b79e1cc8ab800c008df55a9895876922de79dced28d3de","href":"https://static.observableusercontent.com/files/34f97eb2b1741c9e8ff68868ec5ccac4580ff32c0978f80e108cfc042a7a8a93d76479ba3d9252fc14b79e1cc8ab800c008df55a9895876922de79dced28d3de","name":"NewSSTBg_en.jpg","type":"image/jpeg","lastModified":1753133906376.881,"size":343128},{"id":"b1e765351bc5f9ec821404ddebc25dfc354025d8b9e27cef33ce11cc07edd128ec06d01a17556246660badb7f41d26ad08fb879000f14cd0d9b730d6e0b20ebd","href":"https://static.observableusercontent.com/files/b1e765351bc5f9ec821404ddebc25dfc354025d8b9e27cef33ce11cc07edd128ec06d01a17556246660badb7f41d26ad08fb879000f14cd0d9b730d6e0b20ebd","name":"new.jpg","type":"image/jpeg","lastModified":1753134196018.958,"size":188155},{"id":"1487108f0f44b5acb987114bde6ae938655568ec3b798b985de12352b05ea586d92c8989d2d6613235cf8c52a5e97ae5f2babae71b25d851ce315599abfd74cd","href":"https://static.observableusercontent.com/files/1487108f0f44b5acb987114bde6ae938655568ec3b798b985de12352b05ea586d92c8989d2d6613235cf8c52a5e97ae5f2babae71b25d851ce315599abfd74cd","name":"annual_sst.csv","type":"text/csv","lastModified":1753371339578.028,"size":3096},{"id":"d3fdf0704902398393c75541975e9a99d44af4cd1d33b4c844bd6c1f6ab2b0a6837403b0df2fcb96f5f28ca7dc0724c8899519cf10ab478cfdd5dbff14ee8227","href":"https://static.observableusercontent.com/files/d3fdf0704902398393c75541975e9a99d44af4cd1d33b4c844bd6c1f6ab2b0a6837403b0df2fcb96f5f28ca7dc0724c8899519cf10ab478cfdd5dbff14ee8227","name":"legend_vertical.png","type":"image/png","lastModified":1753371662694.173,"size":24289},{"id":"911779e79007ecae18f5f9ba71bac8aec9fffd64ad79b9e6fb2d360a7990089b49c816d18df2ed1f9cdb1acc5d7504f1f54c0eb0a41329449cb7d7df144d9582","href":"https://static.observableusercontent.com/files/911779e79007ecae18f5f9ba71bac8aec9fffd64ad79b9e6fb2d360a7990089b49c816d18df2ed1f9cdb1acc5d7504f1f54c0eb0a41329449cb7d7df144d9582","name":"legend_horizontal.png","type":"image/png","lastModified":1753371662695.125,"size":24292},{"id":"2b03c632a963785d0aedfd4572189091f9f0734ebb8d8289be42313f3a8f782e7cd4053216c672e542b59a5dba5be5a98771348103f99d7e0877da14d724b17c","href":"https://static.observableusercontent.com/files/2b03c632a963785d0aedfd4572189091f9f0734ebb8d8289be42313f3a8f782e7cd4053216c672e542b59a5dba5be5a98771348103f99d7e0877da14d724b17c","name":"SST_Bg_sp.jpeg","type":"image/jpeg","lastModified":1753377116717.57,"size":167803},{"id":"a31858b325d4709491601585b150fcdd4d15a329517dde1b4b94aed95a7b37a748b411b506b25a5a0db7dec495d1be38f389ecaf2562a0743020e6d92bb88cca","href":"https://static.observableusercontent.com/files/a31858b325d4709491601585b150fcdd4d15a329517dde1b4b94aed95a7b37a748b411b506b25a5a0db7dec495d1be38f389ecaf2562a0743020e6d92bb88cca","name":"SST_Bg_sp@1.jpg","type":"image/jpeg","lastModified":1753378140765.784,"size":162781},{"id":"e880cca5fa7c6bcc343b7a1b116d1fb0986518fd659897c07e0f57f8f6872b1800656320b74bf90a9a37622434b0113993068a20d3215ec1f8d89bcfeecd3acc","href":"https://static.observableusercontent.com/files/e880cca5fa7c6bcc343b7a1b116d1fb0986518fd659897c07e0f57f8f6872b1800656320b74bf90a9a37622434b0113993068a20d3215ec1f8d89bcfeecd3acc","name":"SST_Bg_title_sp.jpg","type":"image/jpeg","lastModified":1753387495063.368,"size":193835},{"id":"0bf0c21ad67e2d2b0cc2180aa89f66b8c800a6c865d56c2f47dd37d8bb8ff140135fbd6d50885b69f2d5ac226a96c9574a57457024fa32011bf4b00e1cff0061","href":"https://static.observableusercontent.com/files/0bf0c21ad67e2d2b0cc2180aa89f66b8c800a6c865d56c2f47dd37d8bb8ff140135fbd6d50885b69f2d5ac226a96c9574a57457024fa32011bf4b00e1cff0061","name":"SST_Bg_Sp.jpg","type":"image/jpeg","lastModified":1753795728814.446,"size":195389},{"id":"0bf0c21ad67e2d2b0cc2180aa89f66b8c800a6c865d56c2f47dd37d8bb8ff140135fbd6d50885b69f2d5ac226a96c9574a57457024fa32011bf4b00e1cff0061","href":"https://static.observableusercontent.com/files/0bf0c21ad67e2d2b0cc2180aa89f66b8c800a6c865d56c2f47dd37d8bb8ff140135fbd6d50885b69f2d5ac226a96c9574a57457024fa32011bf4b00e1cff0061","name":"SST_Bg_Sp@1.jpg","type":"image/jpeg","lastModified":1753797285040.542,"size":195389},{"id":"807b1afb781461401c3fc9cb534f9f89575349800ef1755fbeac8c93c097d5460a1f45044e6053eeff3dd489b97a8e3aa1c33e689fda90a2a200197ddd12ae71","href":"https://static.observableusercontent.com/files/807b1afb781461401c3fc9cb534f9f89575349800ef1755fbeac8c93c097d5460a1f45044e6053eeff3dd489b97a8e3aa1c33e689fda90a2a200197ddd12ae71","name":"BebasNeue-Regular.woff2","type":"font/woff2","lastModified":1753800093918.205,"size":7780},{"id":"4e2049d23ea787a96c74356c0a7d40715e0e168611f8d7d18d0d59921bfafb09e5196f7ea6fc6233919f0f5dec0c7916fb010a73a40bfa40a89dc851eee56866","href":"https://static.observableusercontent.com/files/4e2049d23ea787a96c74356c0a7d40715e0e168611f8d7d18d0d59921bfafb09e5196f7ea6fc6233919f0f5dec0c7916fb010a73a40bfa40a89dc851eee56866","name":"Effra-Bold.woff2","type":"font/woff2","lastModified":1753800093925.981,"size":20860},{"id":"8a40cc9c389767d0bf81cc84049ac7d84258b1d3e2e6d1a281b994de825eb79a48b9f775e2b600f353e75051fd36c58d00bd1aaa199efdb59c8e639d1f47fda4","href":"https://static.observableusercontent.com/files/8a40cc9c389767d0bf81cc84049ac7d84258b1d3e2e6d1a281b994de825eb79a48b9f775e2b600f353e75051fd36c58d00bd1aaa199efdb59c8e639d1f47fda4","name":"Effra-Regular.woff2","type":"font/woff2","lastModified":1753800219704.319,"size":23932}] 2f:{"title":"Daily SST Ocean Temperature Graphic, 1982-2026","cells":[{"id":3165,"value":"

Daily SST Ocean Temperature Graphic, 1982-2026

","pinned":false,"hidden":false,"mode":"html"},{"id":2486,"value":"Use the options below to generate graphics of daily sea surface temperatures since 1982 using data from NOAA's Optimum Interpolation Sea Surface Temperature (OISST) v2.1 dataset. These graphics will update daily, or as data becomes available on the Climate Reanalyzer website. Note the most recent two weeks of data are considered preliminary. Specific information about the data can be found here. Chrome is the recommended browser for graphic download.","pinned":false,"hidden":false,"mode":"html"},{"id":3175,"value":"Related resource >> Check out Climate Central's daily sea surface attribution tool Climate Shift Index: Ocean to learn about how recent ocean temperatures compare to normal (1991-2020) and the degree to which human-caused climate change has played a role.","pinned":false,"hidden":false,"mode":"html"},{"id":6536,"value":"graphicBlock = html`

\n\n\n\n\n

\n ${finalDiv}
\n ${sstGx}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2875,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1037,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3463,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3455,"value":"### Code and data section","pinned":false,"hidden":false,"mode":"md"},{"id":1119,"value":"sstGx = html`

\n \n\n

${oceanChart}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1686,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5731,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":7617,"value":"effraRegular = FileAttachment(\"Effra-Regular.woff2\") \n.arrayBuffer()\n .then(buf => `data:font/woff2;base64,${btoa(String.fromCharCode(...new Uint8Array(buf)))}`)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7619,"value":"bebasRegular = FileAttachment(\"BebasNeue-Regular.woff2\").arrayBuffer()\n .then(buf => `data:font/woff2;base64,${btoa(String.fromCharCode(...new Uint8Array(buf)))}`)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7620,"value":"effraBold = FileAttachment(\"Effra-Bold.woff2\").arrayBuffer()\n .then(buf => `data:font/woff2;base64,${btoa(String.fromCharCode(...new Uint8Array(buf)))}`)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7633,"value":"injectFonts = async (svgElement, effra, effraBold, bebas) => {\n const [effraUrl, boldUrl, bebasUrl] = await Promise.all([effra, effraBold, bebas]);\n const svg = d3.select(svgElement); // ← FIX: ensure it’s a D3 selection\n\n svg.insert(\"style\", \":first-child\").text(`\n @font-face {\n font-family: 'Effra';\n font-weight: 400;\n src: url('${effraUrl}') format('woff2');\n }\n @font-face {\n font-family: 'Effra';\n font-weight: 700;\n src: url('${boldUrl}') format('woff2');\n }\n @font-face {\n font-family: 'Bebas Neue';\n font-weight: 400;\n src: url('${bebasUrl}') format('woff2');\n }\n `);\n\n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":7350,"value":"legVals = {\n if (basin === \"World (60°S-60°N)\") {\n return [-15, 0];\n } else if (basin === \"North Atlantic\") {\n return [20, 231];\n } else if (basin === \"Subpolar North Atlantic\") {\n return [20, 231];\n } else if (basin === \"Atlantic Hurricane MDR\") {\n return [20, 363];\n } else if (basin === \"Gulf of Maine\") {\n return [15, 255];\n } else if (basin === \"Gulf of Mexico\") {\n return [10, 343];\n } else {\n return [187, 5];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7376,"value":"dateVals = {\n if (basin === \"World (60°S-60°N)\") {\n return [20, -51];\n } else if (basin === \"North Atlantic\") {\n return [5, -16];\n } else if (basin === \"Subpolar North Atlantic\") {\n return [20, -71];\n } else if (basin === \"Atlantic Hurricane MDR\") {\n return [20, -100];\n } else if (basin === \"Gulf of Maine\") {\n return [55,-58];\n } else if (basin === \"Gulf of Mexico\") {\n return [-50, 26];\n } else {\n return [51,-272];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5931,"value":"col3 = html`\n \n \n \n \n \n \n \n\n \n

Downloads
${viewof gxDownload}
${viewof dataDownload}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8309,"value":"viewof gxDownload = Inputs.button(\"Graphic (PNG)\", {\n reduce: () =>\n downloadGx(\n sstGx,\n `ClimateCentral_OceanTemperatures_Through_2026${fileDate}.png`\n ),\n width: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6001,"value":"col2 = html`\n \n \n \n \n \n \n \n \n \n \n

Positioning
${viewof legX}
${viewof legY}
${viewof dateX}
${viewof dateY}

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":6963,"value":"viewof basin = Inputs.select(\n [\n \"World (60°S-60°N)\",\n \"North Atlantic\",\n \"Subpolar North Atlantic\",\n \"Atlantic Hurricane MDR\",\n \"Gulf of Maine\",\n \"Gulf of Mexico\",\n \"Niño 3.4\"\n ],\n { label: \"Select an area:\", value: \"World (60°S-60°N)\", width: 200 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6972,"value":"viewof language = Inputs.radio([\"English\", \"Spanish\"], {\n label: \"Language\",\n value: \"English\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6973,"value":"viewof units = Inputs.radio([\"°F\", \"°C\"], { label: \"Units\", value: \"°F\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5980,"value":"viewof titles = \n Inputs.checkbox([\"Title\", \"Subtitle\"], {\n value: [\"Title\", \"Subtitle\"],\n label: \"Include\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6202,"value":"viewof dateX = Inputs.range([dateVals[0] - 300, dateVals[0] + 100], {\n label: \"Date X Position\",\n value: dateVals[0]-255,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7014,"value":"viewof dateY = \n Inputs.range([dateVals[1]-550,dateVals[1]+ 200], {\n label: \"Date Y Positon\",\n value: dateVals[0]-50,\n step: 1\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5940,"value":"viewof legX = \n Inputs.range([legVals[0]-50,legVals[0]+ 600], {\n label: \"Legend X Position\",\n value: legVals[0],\n step: 1\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7007,"value":"viewof legY = \n Inputs.range([legVals[1], legVals[1]+370], {\n label: \"Legend Y Postion\",\n value:legVals[1],\n step: 1\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6986,"value":"col1 = html`\n \n \n \n \n \n \n \n \n \n \n

Data
${viewof basin}
${viewof language}
${viewof units}
${viewof titles}

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":5946,"value":"viewof dataDownload = Inputs.button(\"Data (CSV)\", {\n reduce: () => downloadData(dailySST, fileDate),width: 200 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3773,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3685,"value":"max = d3.max(dailySST, (d) => d[varName])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3686,"value":"min = d3.min(dailySST, (d) => d[varName])","pinned":false,"hidden":false,"mode":"ojs"},{"id":3664,"value":"selectedSource = {\n if (basin=== \"World (60°S-60°N)\") {\n return \"https://climatereanalyzer.org/clim/sst_daily/json_2clim/oisst2.1_world2_sst_day.json\";\n } else if (basin === \"North Atlantic\") {\n return \"https://climatereanalyzer.org/clim/sst_daily/json_2clim/oisst2.1_natlan_sst_day.json\";\n } else if (basin=== \"Subpolar North Atlantic\") {\n return \"https://climatereanalyzer.org/clim/sst_daily/json_2clim/oisst2.1_natlsp_sst_day.json\";\n } else if (basin === \"Atlantic Hurricane MDR\") {\n return \"https://climatereanalyzer.org/clim/sst_daily/json_2clim/oisst2.1_atlhmdr_sst_day.json\";\n } else if (basin === \"Gulf of Maine\") {\n return \"https://climatereanalyzer.org/clim/sst_daily/json_2clim/oisst2.1_gom_sst_day.json\";\n } else if (basin === \"Gulf of Mexico\") {\n return \"https://climatereanalyzer.org/clim/sst_daily/json_2clim/oisst2.1_gomex_sst_day.json\";\n } else {\n return \"https://climatereanalyzer.org/clim/sst_daily/json_2clim/oisst2.1_nino3.4_sst_day.json\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"async function grabData(url) {\n const data = await fetch(url).then((response) => response.json());\n const dailySST = fetchAndFlattenSST(data);\n return dailySST;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"dailySST = grabData(selectedSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"average_1991_2020 = dailySST.slice(0, 365)","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"thisYear_subset = dailySST.filter((d) => d.date >= \"2026-01-01\" && d.date <= \"2026-12-31\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2420,"value":"thisYear_notNA = thisYear_subset.filter((d) => d.temp !== \"null\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"previousYears = dailySST.filter((d) => d.year >= 1982 & d.year < 2026)","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"function julianToMonthDay(julianDay) {\n // Start with January 1 of a non-leap year (e.g., 2023)\n const baseDate = new Date(2024, 0, 1); // Jan 1, 2023\n const date = new Date(baseDate.getTime() + (julianDay - 1) * 24 * 60 * 60 * 1000);\n\n // Define the D3 formatter\n const formatMonthDay = d3.timeFormat(\"%B %d\"); // Format as \"JAN 01\"\n \n return formatMonthDay(date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2785,"value":"function julianToYearMonthDay(year, julianDay) {\n // Start with January 1 of a non-leap year (e.g., 2023)\n const baseDate = new Date(year, 0, 1); // Jan 1, 2023\n const date = new Date(\n baseDate.getTime() + (julianDay - 1) * 24 * 60 * 60 * 1000\n );\n\n // Define the D3 formatter\n const formatMonthDay = d3.timeFormat(\"%Y-%m-%d\"); // Format as \"JAN 01\"\n\n return formatMonthDay(date);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2441,"value":"today = d3.timeFormat(\"%b %d, %Y\")(new Date())","pinned":false,"hidden":false,"mode":"ojs"},{"id":7283,"value":"lastNonLeap_en = julianToMonthDay(new2026.length + 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7291,"value":"lastNonLeap_sp = spanishFormat(new Date(lastNonLeap_en))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6190,"value":"fileDate = d3.timeFormat(\"%m%d\")(new Date(lastNonLeap_en))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2851,"value":" d2 = dailySST.filter((d) => !isNaN(d.year)) // Filter out NaN years","pinned":false,"hidden":false,"mode":"ojs"},{"id":4551,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":6407,"value":"spanishLocale = d3.timeFormatLocale({\n dateTime: \"%A, %e de %B de %Y, %X\",\n date: \"%d/%m/%Y\",\n time: \"%H:%M:%S\",\n periods: [\"AM\", \"PM\"],\n days: [\"domingo\", \"lunes\", \"martes\", \"miércoles\", \"jueves\", \"viernes\", \"sábado\"],\n shortDays: [\"dom\", \"lun\", \"mar\", \"mié\", \"jue\", \"vie\", \"sáb\"],\n months: [\"enero\", \"febrero\", \"marzo\", \"abril\", \"mayo\", \"junio\", \"julio\", \"agosto\", \"septiembre\", \"octubre\", \"noviembre\", \"diciembre\"],\n shortMonths: [\"ene\", \"feb\", \"mar\", \"abr\", \"may\", \"jun\", \"jul\", \"ago\", \"sep\", \"oct\", \"nov\", \"dic\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6408,"value":"spanishFormat = spanishLocale.format(\"%-d de %B\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6429,"value":"spanishNumberFormat = d3.formatLocale({\n decimal: \",\",\n thousands: \".\",\n grouping: [3],\n currency: [\"\", \" €\"]\n}).format\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4562,"value":"varName = units === \"°F\" ? \"temp\" : \"tempC\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4467,"value":"viewof rec = {\n if (language === \"English\") {\n return `${recordYear} (record)`;\n } else {\n return `${recordYear} (récord)`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5426,"value":"recordYear = {\n if (basin === \"Gulf of Maine\") {\n return 2012;\n } else if (basin === \"Gulf of Mexico\" || basin === \"Niño 3.4\") {\n return 2023;\n } else {\n return 2024;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5870,"value":"minRangeY = 220;","pinned":false,"hidden":false,"mode":"ojs"},{"id":5889,"value":"maxRangeY = 285 ;","pinned":false,"hidden":false,"mode":"ojs"},{"id":5609,"value":"recordYearData = dailySST.filter((d) => d.year === recordYear)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2352,"value":"downloadGx = function(x, filename) {\n htmlToImage.toPng(x)\n .then(function (dataUrl) {\n download(dataUrl, filename);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3292,"value":"function downloadData(data, fileDate) {\n const BOM = \"\\uFEFF\"; // UTF-8 Byte Order Mark\n let file_name = `Daily_SST_${basin}_19820101_2026${fileDate}.csv`;\n // Convert data to CSV format\n const csvData = new Blob([BOM + d3.csvFormat(data)], {\n type: \"text/csv;charset=utf-8;\"\n });\n const url = URL.createObjectURL(csvData);\n\n // Create a temporary link element\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = file_name;\n link.textContent = \"CSV\";\n\n // Append to the document and programmatically click to download\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7192,"value":"import {embed} from \"observable:@observablehq/auto-resizing-embed\"","pinned":false,"hidden":false,"mode":"js"},{"id":2354,"value":"download = import(\"downloadjs@1.4.7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2305,"value":"htmlToImage = import(\"https://cdn.skypack.dev/html-to-image@1.11.1?min\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7791,"value":"function wrapSvgText(text, maxChars) {\n const words = text.split(\" \");\n const lines = [];\n let line = \"\";\n\n for (const word of words) {\n if ((line + word).length > maxChars) {\n lines.push(line.trim());\n line = word + \" \";\n } else {\n line += word + \" \";\n }\n }\n lines.push(line.trim());\n return lines;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2283,"value":"import * as d3 from \"npm:d3\";","pinned":false,"hidden":false,"mode":"js"},{"id":8156,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":7855,"value":"ccEmbed = embed(\n \"https://observablehq.com/embed/@climatecentral/daily-sst@latest?cells=graphicBlock&banner=false\"\n)","pinned":false,"hidden":true,"mode":"ojs"},{"id":8194,"value":"async function grabData2(url) {\n const data = await fetch(url).then((response) => response.json());\n const dailySST = fetchAndFlattenSST2(data);\n return dailySST;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8527,"value":"data2 = grabData2(selectedSource)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8543,"value":"updatedData = data2.filter((d) => d.year <= 2026)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8402,"value":"new2026 = grabData2(selectedSource).then((elem) => elem.filter((d) => d.year === 2026 & d.temp !== null))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8207,"value":"new2025 = grabData2(selectedSource).then((elem) => elem.filter((d) => d.year === 2025 & d.temp !== null))","pinned":false,"hidden":false,"mode":"ojs"},{"id":7247,"value":"$37","pinned":false,"hidden":false,"mode":"html"}],"files":"$W38","stdlib":"2","titling":"auto"}