3f:null 40:["$","title",null,{"children":"Coral Reef🪸🦈Bleach Watch Analysis | A Hurtado Mujica | Observable"}] 46:T516,An Overview of Coral Reefs and Bleaching 🚧 Under Construction 🚧 In this project, I explore the causes and consequences of coral bleaching, a phenomenon that affects coral reefs around the world. Coral reefs are diverse and productive ecosystems that host a variety of marine life and provide benefits to humans. However, they are also vulnerable to environmental stressors, such as changes in temperature, light, or nutrients, that can disrupt the symbiotic relationship between corals and algae. When this happens, corals expel the algae from their tissues, losing their color and their main source of food. This is called coral bleaching, and it can lead to coral death if the stress is prolonged or severe. Coral bleaching is a major threat to coral reefs, as it reduces their biodiversity, resilience, and function. Source: (1) What is coral bleaching? - NOAA's National Ocean Service. https://oceanservice.noaa.gov/facts/coral_bleach.html. (2) Everything You Need to Know about Coral Bleaching—And How We Can Stop .... https://www.worldwildlife.org/pages/everything-you-need-to-know-about-coral-bleaching-and-how-we-can-stop-it. (3) Coral bleaching - Great Barrier Reef Foundation. https://www.barrierreef.org/the-reef/threats/coral-bleaching.47:T13e3,{ const { mean, deviation, max, min } = require("d3-array"); // Data processing function function processData(data) { return data.map(d => ({ ...d, date: new Date(d.date), SSTA_90th_HS: +d.SSTA_90th_HS })).sort((a, b) => a.date - b.date); } // Calculate statistics function calculateStats(data) { const sstaValues = data.map(d => d.SSTA_90th_HS); return { mean: d3.mean(sstaValues), stdDev: d3.deviation(sstaValues), max: d3.max(sstaValues), min: d3.min(sstaValues) }; } // Calculate moving average function calculateMovingAverage(data, period) { return data.map((d, i, arr) => { const start = Math.max(0, i - period + 1); const subset = arr.slice(start, i + 1); const avgSSTA = d3.mean(subset, d => d.SSTA_90th_HS); return { date: d.date, SSTA_90th_HS: avgSSTA }; }); } // Identify anomalies function identifyAnomalies(data, stats, threshold) { return data.filter(d => Math.abs(d.SSTA_90th_HS - stats.mean) > threshold * stats.stdDev ); } // Define dry seasons (December to April) function getDrySeasons(data) { let drySeasons = []; let currentDrySeason = null; for (let d of data) { const month = d.date.getMonth(); if (month >= 11 || month <= 3) { if (!currentDrySeason) { currentDrySeason = { start: d.date, end: d.date }; } else { currentDrySeason.end = d.date; } } else if (currentDrySeason) { drySeasons.push(currentDrySeason); currentDrySeason = null; } } if (currentDrySeason) { drySeasons.push(currentDrySeason); } return drySeasons; } // Make sure to sort the processedData by date const threshold = 2; // Define threshold (e.g., 2 standard deviations) const p = processData(processedData); const stats = calculateStats(p); const anomalies = identifyAnomalies(p, stats, threshold); const drySeasons = getDrySeasons(p); // Define the chart dimensions const margin = {top: 20, right: 30, bottom: 30, left: 40}; const width = 960 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom; const standardDeviation = d3.deviation(p, d => d.SSTA_90th_HS); const movingAveragePeriod = 365; // 1-year moving average const movingAverage = calculateMovingAverage(p, movingAveragePeriod); // Bleaching threshold (1°C above mean) const bleachingThreshold = stats.mean + 1; // Create a plot return Plot.plot({ marginLeft: margin.left, marginRight: margin.right, marginTop: margin.top, marginBottom: margin.bottom, width: width + margin.left + margin.right, height: height + margin.top + margin.bottom, x: { type: "time", grid: true, label: "Year→" }, y: { grid: true, label: "Sea Surface Temperature Anomaly (°C)" }, color: { type: "threshold", domain: [-threshold * standardDeviation, 0, threshold * standardDeviation], range: ["blue", "steelblue", "red"] }, marks: [ // El Niño years shading (primary drivers of mass bleaching) Plot.rectY( [{start: new Date('1982-01-01'), end: new Date('1983-12-31')}, {start: new Date('1997-01-01'), end: new Date('1998-12-31')}, {start: new Date('2015-01-01'), end: new Date('2016-12-31')}, {start: new Date('2023-01-01'), end: new Date('2023-12-31')}], { x1: d => d.start, x2: d => d.end, y1: stats.min, y2: stats.max, fill: "#ff6b35", fillOpacity: 0.12 } ), Plot.text( [{x: new Date('1982-07-01'), y: stats.max, t: "El Niño\n82–83"}, {x: new Date('1997-07-01'), y: stats.max, t: "El Niño\n97–98"}, {x: new Date('2015-07-01'), y: stats.max, t: "El Niño\n15–16"}, {x: new Date('2023-07-01'), y: stats.max, t: "El Niño\n2023"}], { x: "x", y: "y", text: "t", fontSize: 9, fill: "#c34a00", dy: -5 } ), // Dry seasons (Dec–Apr) highlighting Plot.rectY(drySeasons, { x1: d => d.start, x2: d => d.end, y1: stats.min, y2: stats.max, fill: "#ffff00", fillOpacity: 0.2 }), Plot.line(p, {x: "date", y: "SSTA_90th_HS", stroke: "currentColor"}), Plot.line(movingAverage, { x: "date", y: "SSTA_90th_HS", stroke: "purple", strokeWidth: 2 }), Plot.dot(anomalies, { x: "date", y: "SSTA_90th_HS", fill: "red" }), Plot.ruleY([stats.mean], {stroke: "yellow", strokeWidth: 2, strokeDasharray: "4,4"}), Plot.ruleY([bleachingThreshold], {stroke: "red", strokeWidth: 2, strokeDasharray: "4,4"}), Plot.text([{ x: p[0].date, y: stats.mean }], { text: "Mean", dx: 5 }), Plot.text([{ x: p[0].date, y: bleachingThreshold }], { text: "Bleaching Threshold", dx: 5, dy: -5 }), Plot.tip(anomalies, Plot.pointerX({ x: "date", y: "SSTA_90th_HS", title: d => `Date: ${d.date.toLocaleDateString()}\nSSTA: ${d.SSTA_90th_HS.toFixed(2)}°C`, })), ] }) }48:T497,{ const sstMaxValues = processedData.map(d => d.SST_MAX).sort(d3.ascending); const q1 = d3.quantile(sstMaxValues, 0.25); const q3 = d3.quantile(sstMaxValues, 0.75); // IQR const iqr = q3 - q1; const lowerFence = q1 - 1.5 * iqr; const upperFence = q3 + 1.5 * iqr; processedData.forEach(d => { d.outlier = d.SST_MAX < lowerFence || d.SST_MAX > upperFence; }); // SST_MAX values, sorted in ascending order // Convert your processedData into an array of [x, y] pairs const data = processedData.map(d => [d.SST_MIN, d.SST_MAX]); return Plot.plot({ marks: [ // Shaded IQR area for Q1 to Q3 Plot.rectY(processedData, {y1: lowerFence, y2: upperFence, fill: "#ddd"}), // Use a light grey fill for the IQR area // Scatter plot for SST_MIN vs. SST_MAX Plot.dot(processedData, { x: "SST_MIN", y: "SST_MAX", fill: d => d.outlier ? hexToRGBA(colors.primary, 0.5) : hexToRGBA(colors.secondary, 0.5) }), // Q1 and Q3 lines Plot.ruleY([lowerFence, upperFence], { stroke: "yellow", strokeWidth: 2, strokeDasharray: "5,5" }), ], x: { label: "SST_MIN (°C)" }, y: { label: "SST_MAX (°C)", grid: true }, }); }49:T7df,Plot.plot({ width: 960, height: 500, marginBottom: 50, marginRight: 80, x: { label: "Date →", tickFormat: d => d.toLocaleString('default', { month: 'short' }), ticks: d3.timeMonth.every(1), grid: true }, y: { domain: [15, 35], }, marks: [ Plot.frame(), // Left Y-axis (SST) Plot.axisY({ label: "SST at p=90th HS (°C) ↑", tickFormat: d => d.toFixed(0), domain: [15, 35] }), // Right Y-axis (DHW) Plot.axisY({ label: "DHW from p=90th HS (°C-weeks) ↑", tickFormat: d => ((d - 15) / 20 * 25).toFixed(0), domain: [15, 35], anchor: "right" }), // SST line Plot.line(processedData2023, { x: "date", y: "SST_90th_HS", stroke: "blue", strokeWidth: 2 }), // DHW line Plot.line(processedData2023, { x: "date", y: d => (d.DHW / 25) * 20 + 15, stroke: "purple", strokeWidth: 2 }), // DHW area Plot.areaY(processedData2023, { x: "date", y1: d => (d.DHW / 25) * 20 + 15, y2: 15, fill: d => d.DHW >= 8 ? "#800000" : d.DHW >= 4 ? "#ff0000" : d.DHW >= 1 ? "#ffa500" : d.DHW > 0 ? "#ffff00" : "#c7e9b4", fillOpacity: 0.5 }), // Bleaching Threshold Plot.line(processedData2023, { x: "date", y: d => d.SST_MAX + 1, stroke: "red", strokeWidth: 1, strokeDasharray: "5,5" }), Plot.dot(DHWpeaks2023, { x: "date", y: d => (d.DHW / 25) * 20 + 15, stroke: "red", domain: [15, 35], }), Plot.tip(DHWpeaks2023, Plot.pointerX({ x: "date", y: d => (d.DHW / 25) * 20 + 15, title: (d) => `Date: ${d.date.toLocaleDateString()} SST: ${d.SST_90th_HS.toFixed(1)}°C DHW: ${d.DHW.toFixed(1)}°C-weeks`, fontSize: 12, fontWeight: "bold",})), ], style: { backgroundColor: "white", color: "black", fontFamily: "Arial, sans-serif" } }) 4a:T5de,{ const byYear = d3.rollups( processedData.filter(d => !isNaN(d.SST_90th_HS)), v => d3.mean(v, d => d.SST_90th_HS), d => d.date.getFullYear() ).sort((a, b) => a[0] - b[0]).map(([, mean]) => mean); const n = byYear.length; let S = 0; for (let i = 0; i < n - 1; i++) for (let j = i + 1; j < n; j++) S += Math.sign(byYear[j] - byYear[i]); const varS = (n * (n - 1) * (2 * n + 5)) / 18; const Z = S > 0 ? (S - 1) / Math.sqrt(varS) : S < 0 ? (S + 1) / Math.sqrt(varS) : 0; // Error function approximation (Abramowitz & Stegun 7.1.26) const erf = x => { const a1 = 0.254829592, a2 = -0.284496736, a3 = 1.421413741; const a4 = -1.453152027, a5 = 1.061405429; const sign = x < 0 ? -1 : 1; const t = 1 / (1 + 0.3275911 * Math.abs(x)); const y = 1 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-x * x); return sign * y; }; const normalCDF = z => (1 + erf(z / Math.sqrt(2))) / 2; const p = 2 * (1 - normalCDF(Math.abs(Z))); const trend = S > 0 ? "↑ Increasing (warming)" : S < 0 ? "↓ Decreasing (cooling)" : "No trend"; const sig = p < 0.05 ? `✅ Statistically significant (p = ${p.toFixed(4)})` : `⚠️ Not significant (p = ${p.toFixed(4)})`; return md`| Statistic | Value | |-----------|-------| | Years analysed | ${n} | | Mann-Kendall S | ${S} | | Z score | ${Z.toFixed(3)} | | p-value (two-tailed) | ${p.toFixed(4)} | | Trend direction | **${trend}** | | Significance | ${sig} |`; }4b:T408,{ const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; const flat = d3.rollups( processedData.filter(d => !isNaN(d.DHW)), v => d3.max(v, d => d.DHW), d => d.date.getFullYear(), d => d.date.getMonth() ).flatMap(([year, ms]) => ms.map(([month, maxDHW]) => ({ year, month, maxDHW }))); return Plot.plot({ marginLeft: 50, marginBottom: 60, x: { tickFormat: m => months[m], domain: [0,1,2,3,4,5,6,7,8,9,10,11], label: "Month →" }, y: { label: "← Year", tickFormat: d3.format("d"), reverse: true }, color: { type: "threshold", domain: [0.001, 1, 4, 8], range: ["#c7e9b4", "#7fcdbb", "#41b6c4", "#2c7fb8", "#253494"], label: "Max DHW (°C-wks)", legend: true }, marks: [ Plot.cell(flat, { x: "month", y: "year", fill: "maxDHW", tip: true, title: d => `${d.year} ${months[d.month]}: ${d.maxDHW.toFixed(1)} °C-wks` }) ], width: 960, height: 700 }); }4c:T445,{ const events = []; let inEvent = false, start = null, peakDHW = 0, peakDate = null, lastIdx = 0; for (let i = 0; i < processedData.length; i++) { const d = processedData[i]; if (d.DHW >= 4) { if (!inEvent) { inEvent = true; start = d.date; peakDHW = d.DHW; peakDate = d.date; } else if (d.DHW > peakDHW) { peakDHW = d.DHW; peakDate = d.date; } lastIdx = i; } else if (inEvent) { const duration = Math.round((processedData[lastIdx].date - start) / 86400000) + 1; if (duration >= 7) { events.push({ "Start": start.toLocaleDateString('en-CA'), "End": processedData[lastIdx].date.toLocaleDateString('en-CA'), "Duration (days)": duration, "Peak Date": peakDate.toLocaleDateString('en-CA'), "Peak DHW (°C-wks)": +peakDHW.toFixed(1), "Severity": peakDHW >= 8 ? "🔴 Alert 2 — Severe" : "🟠 Alert 1 — Significant" }); } inEvent = false; start = null; peakDHW = 0; } } return Inputs.table(events, { sort: "Peak DHW (°C-wks)", reverse: true }); }4d:T517, function pearsonCorrelation(x, y) { if (x.length !== y.length) { throw new Error("sampleCovariance requires samples with equal lengths"); } if (x.length < 2) { throw new Error( "sampleCovariance requires at least two data points in each sample" ); } let sum_x = 0, sum_y = 0, sum_xy = 0, sum_x2 = 0, sum_y2 = 0; const n = x.length; for (let i = 0; i < n; i++) { sum_x += x[i]; sum_y += y[i]; sum_xy += x[i] * y[i]; sum_x2 += x[i] * x[i]; sum_y2 += y[i] * y[i]; } let numerator = n * sum_xy - sum_x * sum_y; let denominator = Math.sqrt((n * sum_x2 - sum_x * sum_x) * (n * sum_y2 - sum_y * sum_y)); const correlation = denominator ? numerator / denominator : 0; // Determine the description of the correlation let description; if (correlation > 0.7) { description = "Strong Positive Correlation"; } else if (correlation < -0.7) { description = "Strong Negative Correlation"; } else if (correlation > 0.3) { description = "Moderate Positive Correlation"; } else if (correlation < -0.3) { description = "Moderate Negative Correlation"; } else { description = "Weak or No Correlation"; } return { correlation, description }; } 4e:[{"id":"de153e3bd67c7d6a9a55085594b2644b8b8dd09a2e431f89213f077c0f1e921356b2e6c4617f605f55cb5f6effdc0787e27db687c219b1670341b68f364573e6","href":"https://static.observableusercontent.com/files/de153e3bd67c7d6a9a55085594b2644b8b8dd09a2e431f89213f077c0f1e921356b2e6c4617f605f55cb5f6effdc0787e27db687c219b1670341b68f364573e6","name":"panama_pacific_east.txt","type":"text/plain","lastModified":1704286858469.272,"size":1182773},{"id":"7a299d82e64fb9b9afe14339cd61d648bfa25de8ba4fd1bc4239943cdb8162a4921b18c9ad0b53577dfe70ab042cd6a8e30989584f364a1dd65045122e8fd3e1","href":"https://static.observableusercontent.com/files/7a299d82e64fb9b9afe14339cd61d648bfa25de8ba4fd1bc4239943cdb8162a4921b18c9ad0b53577dfe70ab042cd6a8e30989584f364a1dd65045122e8fd3e1","name":"current_ts_panama_pacific_east@1.png","type":"image/png","lastModified":1705476348905.89,"size":19676}] 44:{"id":"295a1e0988588397","slug":"coral-logic","title":"Coral Reef🪸🦈Bleach Watch Analysis","thumbnail":"9ad9e70808f5ee95a429fa57fe66bfc9466ef86457094d7ff7dcdececf3c5c61","access_level":"public","create_time":"$D2023-12-31T02:19:01.747Z","update_time":"$D2026-09-17T15:36:22.018Z","view_time":null,"first_public_time":"$D2023-12-31T02:19:01.747Z","has_unpublished_edits":null,"fork":{"id":"bd116742b1f91cf4","slug":"simple-d3","title":"Simple D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"bd97c0fb72cefbcd","login":"hurtadomujica","name":"A Hurtado Mujica","avatar_url":"https://avatars-next.observableusercontent.com/2b42f9ab154f8f25d09c17a0cf19cd55faa4c5126d9cb12fabc4b2c0753e209b","tier":"starter_2024","bio":"","following":false},"version":2034,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"95a8114fe9ee3fc0","login":"alexhurtadomujica","name":"A Hurtado Mujica","avatar_url":"https://avatars-next.observableusercontent.com/dc458964b68a54d370eafa9a76c8c8e0b66abd20e3d1886a666afd63b57aca3f","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"95a8114fe9ee3fc0","login":"alexhurtadomujica","name":"A Hurtado Mujica","avatar_url":"https://avatars-next.observableusercontent.com/dc458964b68a54d370eafa9a76c8c8e0b66abd20e3d1886a666afd63b57aca3f","tier":null,"role":"editor"},{"type":"team","id":"bd97c0fb72cefbcd","login":"hurtadomujica","name":"A Hurtado Mujica","avatar_url":"https://avatars-next.observableusercontent.com/2b42f9ab154f8f25d09c17a0cf19cd55faa4c5126d9cb12fabc4b2c0753e209b","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Coral Reef🪸🦈Bleach Watch Analysis","cells":[{"id":778,"value":"# Coral Reef🪸🦈Bleach Watch Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":790,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":793,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1125,"value":"_To Do, embed: https://observablehq.com/documentation/embeds/advanced_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"## Coral Reef Bleaching\n**Data Source:** [NOAA Coral Reef Watch — Panama Pacific East](https://coralreefwatch.noaa.gov/product/vs/data/panama_pacific_east.txt) | [Methodology](https://coralreefwatch.noaa.gov/product/5km/methodology.php#ssta)`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"## Time Series of SSTA@90th_HS\n ### SSTA is displayed as -5.0 to +5.0 °C\n \n_Standard Deviation Method_\n\nThe threshold for determining an anomaly is set to two standard deviations from the mean. Approximately 95% of values are expected to lie within two standard deviations of the mean in a normal distribution. Therefore, a temperature value that lies beyond this range is considered significantly higher or lower than the average and is thus flagged as an anomaly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"## Seasons\n### High tourism = Dry Season\n\nOnly positive values are displayed in the Coral Bleaching HotSpot maps, since the HotSpot is designed to show the occurrence and distribution of bleaching heat stress exceeding the MMM climatology. The range of HotSpots displayed is 0.0 to +5.0 °C.\n\nA study by Glynn and D'Croz (1990) , which showed that temperatures exceeding 1 °C above the usual (average) summertime maximum are sufficient to cause stress, including bleaching, to corals. (This is why 1 °C above the MMM is referred to as the bleaching threshold temperature.) [Experimental evidence for high temperature stress as the cause of El Niño coincident coral mortality](https://doi.org/10.1007/BF00265009) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1185,"value":"{\n const categoryList = _.map(pearsonComponents, (arrSymbols, category) => {\n const chunked = _.chunk(arrSymbols, 3);\n \n const chunkedRows = _.map(\n chunked,\n chunk3 => wrapWithClassName(\n _.map(\n chunk3,\n c => texPair(c)\n ), 'chunks')\n );\n \n return html`

${category}

\n ${chunkedRows}\n

`;\n });\n \n return html`

${categoryList}

`;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"texPair = str => html`\n

${tex`${str}`}

\n\n

${_html}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"### Sea Surface Temperature Minimum and Sea Surface Temperature Maximum \nThis would show how well the minimum and maximum sea surface temperatures are correlated. This is likely to be a strong positive correlation because both are measures of temperature.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1620,"value":"\n{// Assuming you have an array of x values and an array of y values:\nconst xValues = processedData.map(d => d.SST_MIN);\nconst yValues = processedData.map(d => d.SST_MAX);\nconsole.log(xValues, yValues);\n// Combine x and y values into pairs\nconst dataPairs = xValues.map((x, i) => [x, yValues[i]]);\n\n// Calculate Pearson correlation coefficient\nconst correlation = simplestatistics.sampleCorrelation(xValues, yValues);\n\n\n let description;\n if (correlation > 0.7) {\n description = \"Strong Positive Correlation\";\n } else if (correlation < -0.7) {\n description = \"Strong Negative Correlation\";\n } else if (correlation > 0.3) {\n description = \"Moderate Positive Correlation\";\n } else if (correlation < -0.3) {\n description = \"Moderate Negative Correlation\";\n } else {\n description = \"Weak or No Correlation\";\n }\n\n return(md`Pearson correlation coefficient (r): ${tex`\\color{${(colors.primary).replace('#', '')}}{${correlation}}`}, indicating a ${description}.`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"\n// Create the plot\nPlot.plot({\n marks: [\n Plot.dot(processedData, {x: \"SST_MIN\", y: \"SST_MAX\"}),\n // Regression line\n Plot.line(regressionLine, {x: d => d[0], y: d => d[1], stroke: hexToRGBA(colors.accent, 0.5)}),\n ],\n x: {\n label: \"SST_MIN (°C)\"\n },\n y: {\n label: \"SST_MAX (°C)\"\n }\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"## Interquartile range (IQR)\n The first scatter plot shades the **IQR band** as light grey: ${tex`\\boldsymbol{[Q1 \\to Q3]}`}.
The second extends to Tukey fences: ${tex`\\boldsymbol{[Q1 - 1.5 \\times IQR \\; \\to \\; Q3 + 1.5 \\times IQR]}`} \n\nPoints beyond the fences are colored **primary**; inliers are colored **secondary**.
Outlier classification uses SST_MAX only. Q1, Q3, and IQR are computed on the sorted SST_MAX distribution.\n \nData points that fall **below Q1 - 1.5 IQR ** or **above Q3 + 1.5 ** IQR are typically considered outliers. \n\n\n
\nThe difference between the third quartile (**Q3**, **the 75th percentile**) and the first quartile (**Q1**, **the 25th percentile**). IQR and identifying points that fall outside 1.5 times the IQR above the third quartile and below the first quartile. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1355,"value":"{ \n\n// SST_MAX values, sorted in ascending order\nconst sstMaxValues = processedData.map(d => d.SST_MAX).sort(d3.ascending);\nconst q1 = d3.quantile(sstMaxValues, 0.25);\nconst q3 = d3.quantile(sstMaxValues, 0.75);\n\n// Convert your processedData into an array of [x, y] pairs\nconst data = processedData.map(d => [d.SST_MIN, d.SST_MAX]);\n \nreturn Plot.plot({\n marks: [\n // Shaded IQR area for Q1 to Q3\n Plot.rectY(processedData, {y1: q1, y2: q3, fill: \"#ddd\"}), // Use a light grey fill for the IQR area\n // Scatter plot for SST_MIN vs. SST_MAX\n Plot.dot(processedData, {x: \"SST_MIN\", y: \"SST_MAX\", fill: d => d.outlier ? hexToRGBA(colors.primary, 0.5) : hexToRGBA(colors.secondary, 0.5)}),\n // Q1 and Q3 lines\n Plot.ruleY([q1, q3], { stroke: \"yellow\", strokeWidth: 2, strokeDasharray: \"5,5\" }),\n ],\n x: {\n label: \"SST_MIN (°C)\"\n },\n y: {\n label: \"SST_MAX (°C)\",\n grid: true\n },\n});\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1931,"value":"Points beyond the fences are colored **primary**; inliers are colored **secondary**.
Outlier classification uses SST_MAX only. Q1, Q3, and IQR are computed on the sorted SST_MAX distribution.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1691,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"// x: \"HotSpot_90th\", y: \"DHW\"\n\n{\n const {correlation, description} = pearsonCorrelation(\n processedData.map(d => d.SST_90th_HS),\n processedData.map(d => d.SSTA_90th_HS)\n );\n return md`**SST_90th_HS ↔ SSTA_90th_HS:** r = ${correlation.toFixed(4)} = ${description}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1948,"value":"{\n const {correlation, description} = pearsonCorrelation(\n processedData.map(d => d.HotSpot_90th),\n processedData.map(d => d.DHW)\n );\n return md`**HotSpot_90th ↔ DHW:** r = ${correlation.toFixed(4)} = ${description}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"{//Step 2: Calculate Q1, Q3, and IQR\n const q1 = d3.quantile(sortedData.map(d => d.SST_MIN), 0.25);\n const q3 = d3.quantile(sortedData.map(d => d.SST_MIN), 0.75);\n const iqr = q3 - q1;\n\n // Step 3: Define bounds for outliers\nconst lowerFence = q1 - 1.5 * iqr;\nconst upperFence = q3 + 1.5 * iqr;\n\n// Step 4: Classify points\n// Classify points as outliers directly in the `processedData` array\nreturn processedData.forEach(d => {\n d.outlier = d.SST_MIN < lowerFence || d.SST_MIN > upperFence;\n});\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1523,"value":"({ primary: colors.primary, secondary: colors.secondary, accent: colors.accent, marker: marker })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"processedData.map(d => d.SST_MAX).sort(d3.ascending);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"## Regression Line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1671,"value":"\n The red line can be used to predict SST_MAX for a given SST_MIN within the range
${tex`y = ax + b`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1503,"value":"md`The regression shown above is described by the equation ${tex`y = \\color{red}{${regressionLine.a.toFixed(3)}}x + \\color{blue}{${regressionLine.b.toFixed(3)}}`}. The coefficient of determination, or ${tex`\\color{green}{R^2}`}, is ${tex`\\color{orange}{${regressionLine.rSquared.toFixed(3)}}`}.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"md`${tex`y = \\color{red}{${regressionLine.a.toFixed(3)}}x + \\color{blue}{${regressionLine.b.toFixed(3)}}`}.\n\\n\n${tex`\\color{black}{R^2} =`} ${tex`\\color{green}{${regressionLine.rSquared.toFixed(3)}}`}.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"{ \n\n// SST_MAX values, sorted in ascending order\nconst sstMaxValues = processedData.map(d => d.SST_MAX).sort(d3.ascending);\nconst q1 = d3.quantile(sstMaxValues, 0.25);\nconst q3 = d3.quantile(sstMaxValues, 0.75);\n\n// Convert your processedData into an array of [x, y] pairs\nconst data = processedData.map(d => [d.SST_MIN, d.SST_MAX]);\n\n// Perform linear regression with simple-statistics\nconst regression = simplestatistics.linearRegression(data); // => { m: m, b: b }\n\n \nreturn Plot.plot({\n marks: [\n\n Plot.dot(processedData, {x: \"SST_MIN\", y: \"SST_MAX\"}),\n\n // Regression line\n Plot.line(regressionLine, {x: d => d[0], y: d => d[1], stroke: hexToRGBA(colors.accent, 0.5)}),\n ],\n x: {\n label: \"SST_MIN (°C)\"\n },\n y: {\n label: \"SST_MAX (°C)\",\n grid: true\n },\n});\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"regressionLine ={\n // Assuming d3 and d3Regression have been correctly imported\n const regression = d3.regressionLinear()\n .x(d => d.SST_MIN)\n .y(d => d.SST_MAX)\n .domain(d3.extent(processedData, d => d.SST_MIN)); // Use d3.extent to cover the full range of SST_MIN\n \n \n // Compute the regression line\n const regressionLine = regression(processedData);\n return regressionLine; \n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"SST_90th_HS and SSTA_90th_HS: This could be interesting to see how the 90th percentile of sea surface temperatures (SST_90th_HS) correlates with the sea surface temperature anomalies at the 90th percentile (SSTA_90th_HS).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1209,"value":"// Assuming processedData is an array of objects like you've described\nPlot.plot({\n x: {\n label: \"SST_90th_HS →\",\n },\n y: {\n label: \"SSTA_90th_HS ↑\"\n },\n marks: [\n //Plot.dot(processedData, {x: \"SST_MIN\", y: \"SST_MAX\"})\n\n Plot.dot(processedData, {x: \"SST_90th_HS\", y: \"SSTA_90th_HS\"})\n ]\n\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"HotSpot_90th and DHW (Degree Heating Weeks): This could indicate the relationship between hotspots (areas of warmer water) and the accumulated heat stress on coral reefs over a period.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1262,"value":"SST_90th_HS and DHW: To understand how the 90th percentile sea surface temperatures relate to the degree heating weeks, indicating prolonged heat stress.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1228,"value":"// Scatter plot for SST_90th_HS vs DHW\n\n\nPlot.plot({\n x: {\n label: \"SST_90th_HS →\",\n },\n y: {\n label: \"DHW ↑\"\n },\n marks: [\n //Plot.dot(processedData, {x: \"SST_MIN\", y: \"SST_MAX\"})\n\n Plot.dot(processedData, {x: \"SST_90th_HS\", y: \"DHW\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"// x: \"SSTA_90th_HS\", y: \"BAA_7day_max\"\n\npearsonCorrelation(\n processedData.map(d => d.SSTA_90th_HS),\n processedData.map(d => d.BAA_7day_max)\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"// Add season information to each data point\ncsvData.forEach(d => {\n d.season = getPanamaSeason(new Date(d.YYYY, d.MM - 1, d.DD));\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"data = csvData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"data","database":"$undefined"},{"id":1328,"value":" //Sort data for quantile calculations\nsortedData = processedData.sort((a, b) => a.SST_MIN - b.SST_MIN);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"// Add season information to each data point\nprocessedData.forEach(d => {\n d.season = getPanamaSeason(d.date);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"DHWpeaks2023 = DHWpeaks.filter(d => d.date >= startOf2023 && d.date <= endOf2023);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"chart2= {\nconst margin = { top: 20, right: 20, bottom: 30, left: 50 };\nconst width = 960 - margin.left - margin.right;\nconst height = 500 - margin.top - margin.bottom;\n \nconst xScale = d3.scaleTime()\n .domain(d3.extent(processedData, d => d.date))\n .range([0, width]);\n\nconst yScale = d3.scaleLinear()\n .domain([0, d3.max(processedData, d => d.SST_MAX)])\n .range([height, 0]);\n \n return { margin, width, height, xScale, yScale };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"// x: \"SST_90th_HS\", y: \"DHW\"\n\npearsonCorrelation(\n processedData.map(d => d.SST_90th_HS),\n processedData.map(d => d.DHW)\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"// Scatter plot for HotSpot_90th vs DHW\n\n\nPlot.plot({\n x: {\n label: \"HotSpot_90th →\",\n },\n y: {\n label: \"DHW ↑\"\n },\n marks: [\n //Plot.dot(processedData, {x: \"SST_MIN\", y: \"SST_MAX\"})\n\n Plot.dot(processedData, {x: \"HotSpot_90th\", y: \"DHW\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"SSTA_90th_HS and BAA_7day_max (Bleaching Alert Area maximum over 7 days): This would show how the temperature anomalies correlate with bleaching alert conditions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1249,"value":"// Scatter plot for SSTA_90th_HS vs BAA_7day_max\nPlot.plot({\n x: {\n label: \"SSTA_90th_HS →\",\n },\n y: {\n label: \"BAA_7day_max ↑\"\n },\n marks: [\n //Plot.dot(processedData, {x: \"SST_MIN\", y: \"SST_MAX\"})\n\n Plot.dot(processedData, {x: \"SSTA_90th_HS\", y: \"BAA_7day_max\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"## DHW Peaks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":916,"value":"## 2023 Bleaching Watch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1012,"value":"DHWs over 4 °C-weeks have been shown to cause significant coral bleaching; values over 8 °C-weeks have caused severe bleaching and significant mortality. Data and images are produced globally at 5km-resolution and are updated daily. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":940,"value":"![current_ts_panama_pacific_east@1.png](${await FileAttachment(\"current_ts_panama_pacific_east@1.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":933,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":989,"value":"### HotSpots are displayed as 0.0 to +5.0 °C\n\n| Stress Level | Definition | Effect |\n|----------------------------|--------------------------------------------|----------------------------------------------|\n| No Stress | HotSpot <= 0 | -- |\n| Bleaching Watch | 0 < HotSpot < 1 | -- |\n| Bleaching Warning | 1 <= HotSpot and 0 < DHW < 4 | Possible Bleaching |\n| Bleaching Alert Level 1 | 1 <= HotSpot and 4 <= DHW < 8 | Significant Bleaching Likely |\n| Bleaching Alert Level 2 | 1 <= HotSpot and 8 <= DHW | Severe Bleaching and Significant Mortality Likely |\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":981,"value":"Plot.plot({\n x: {\n label: \"Date →\",\n },\n y: {\n label: \"HotSpot_90th ↑\",\n grid: true\n },\n marks: [\n Plot.areaY(processedData2023, {\n x: \"date\",\n y1: \"HotSpot_90th\",\n fill: \"#fdae61\", // Choose a contrasting color for the HotSpot\n fillOpacity: 0.5,\n z: \"HotSpot\" // Set a different z channel for stacking\n }),\n\n Plot.tip(DHWpeaks2023, Plot.pointerX({\n x: \"date\",\n y: \"HotSpot_90th\",\n title: (d) => `Date: ${d.date.toLocaleDateString()}\\nDHW: ${d.DHW}`, })),\n Plot.line(processedData2023, {x: \"date\", y: \"HotSpot_90th\"}),\n ],\n width: 960,\n height: 500\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"### Dual Axis https://observablehq.com/@tophtucker/plot-dual-axis-line-chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1018,"value":"{return(\nPlot.plot({\n marks: [\n dualAxisY(processedData2023, {y: \"HotSpot_90th\", label: \"HotSpot (°C) \", anchor: \"left\", color: \"#2c7fb8\"}),\n dualAxisY(processedData2023, {y: \"DHW\", label: \"DHW (°C-weeks)\",anchor: \"right\", color: \"#253494\"}),\n Plot.lineY(processedData2023, Plot.normalizeY(\"extent\", {x: \"date\", y: \"HotSpot_90th\", stroke: \"#2c7fb8\"})),\n Plot.lineY(processedData2023, Plot.normalizeY(\"extent\", {x: \"date\", y:\"DHW\", stroke: \"#253494\"}))\n ]\n})\n)}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1960,"value":"{\n const dates = processedData.map(d => d.date);\n const minDate = d3.min(dates);\n const maxDate = d3.max(dates);\n const years = maxDate.getFullYear() - minDate.getFullYear() + 1;\n return md`| Property | Value |\n|----------|-------|\n| **Location** | Panama Pacific East (8.175°N, 79.325°W) |\n| **Records** | ${processedData.length.toLocaleString()} daily observations |\n| **Date Range** | ${minDate.toLocaleDateString()} – ${maxDate.toLocaleDateString()} (${years} years) |\n| **Source** | [NOAA Coral Reef Watch](https://coralreefwatch.noaa.gov/product/vs/data/panama_pacific_east.txt) |\n| **MMM** | 28.31 °C (Averaged Maximum Monthly Mean) |`\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1963,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1970,"value":"## Annual Bleaching-Stress Days\nCount of days per year exceeding NOAA CRW bleaching thresholds.
**Alert Level 1** (DHW 4–8°C-weeks) = significant bleaching likely.
**Alert Level 2** (DHW ≥ 8°C-weeks) = severe bleaching and coral mortality likely.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1979,"value":"{\n const flat = d3.rollups(\n processedData.filter(d => !isNaN(d.DHW)),\n v => [\n { year: v[0].date.getFullYear(), days: v.filter(d => d.DHW >= 4 && d.DHW < 8).length, level: \"Alert 1 (DHW 4–8°C-wks)\" },\n { year: v[0].date.getFullYear(), days: v.filter(d => d.DHW >= 8).length, level: \"Alert 2 (DHW ≥8°C-wks)\" }\n ],\n d => d.date.getFullYear()\n ).flatMap(([, rows]) => rows);\n\n return Plot.plot({\n x: { label: \"Year →\", tickFormat: d3.format(\"d\") },\n y: { label: \"Days of Bleaching Stress ↑\", grid: true },\n color: {\n domain: [\"Alert 1 (DHW 4–8°C-wks)\", \"Alert 2 (DHW ≥8°C-wks)\"],\n range: [\"#ff4500\", \"#800000\"],\n legend: true\n },\n marks: [\n Plot.barY(flat, Plot.stackY({ x: \"year\", y: \"days\", fill: \"level\", tip: true }))\n ],\n width: 960,\n height: 400\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1982,"value":"## Monthly DHW Heatmap (Year × Month)\nMaximum Degree Heating Weeks per calendar month for each year since 1985. This is the single clearest summary of *when* and *how often* bleaching-level heat stress has hit Panama Pacific East reefs across the full record. Colors follow NOAA CRW alert thresholds.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1985,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1988,"value":"## Year-over-Year SST Overlay\nAll years plotted as overlapping lines on a common day-of-year axis. Color encodes year, lighter colors are earlier years, warmer reds are recent years. A visible upward shift in the ensemble demonstrates long-term baseline warming even controlling for seasonality.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1993,"value":"{\n const data = processedData.map(d => ({\n dayOfYear: d3.timeDay.count(d3.timeYear(d.date), d.date) + 1,\n sst: d.SST_90th_HS,\n year: d.date.getFullYear()\n }));\n\n return Plot.plot({\n x: { label: \"Day of Year →\", domain: [1, 366] },\n y: { label: \"SST @ 90th HS (°C) ↑\", grid: true },\n color: {\n type: \"sequential\",\n scheme: \"YlOrRd\",\n label: \"Year\",\n legend: true\n },\n marks: [\n Plot.lineY(data, {\n x: \"dayOfYear\",\n y: \"sst\",\n stroke: \"year\",\n strokeOpacity: 0.35,\n strokeWidth: 1\n })\n ],\n width: 960,\n height: 400\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2003,"value":"## Bleaching Event Summary Table\nContiguous runs of ≥ 7 consecutive days where DHW ≥ 4 °C-weeks. Sorted by peak DHW descending. This tabular format makes it easy to identify the most severe historical bleaching episodes and track increasing frequency over time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2005,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"## Helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1025,"value":"function dualAxisY(data, {y, label, ticks = 10, tickFormat, ...options} = {}) {\n const [y1, y2] = d3.extent(Plot.valueof(data, y));\n const scale = d3.scaleLinear().domain([y1, y2]);\n return Plot.axisY(d3.ticks(y1, y2, ticks), {...options, y: scale, tickFormat: scale.tickFormat(ticks, tickFormat), label: label});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":696,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"DHWpeaks = findPeaks(processedData, 'DHW');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"function findPeaks(data, key) {\n return data.filter((item, i) => {\n let prevItem = data[i - 1];\n let nextItem = data[i + 1];\n\n // Check if the previous and next items exist and if the current item's key is a peak\n return (!prevItem || item[key] > prevItem[key]) && (!nextItem || item[key] > nextItem[key]);\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1587,"value":"### processedData2023","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":964,"value":"Inputs.table(processedData2023)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"processedData2023 = processedData.filter(d => d.date >= startOf2023 && d.date <= endOf2023);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"startOf2023 = new Date('2023-01-01');\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"endOf2023 = new Date('2023-12-31');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"//create a date object from YYYY, MM, DD fields for the x-axis\nprocessedData =csvData.map(row =>({\n date: new Date(+row.YYYY, +row.MM - 1, +row.DD),\n SST_MIN: parseFloat(row.SST_MIN),\n SST_MAX: parseFloat(row.SST_MAX),\n SST_90th_HS: parseFloat(row['SST@90th_HS']),\n SSTA_90th_HS: parseFloat(row['SSTA@90th_HS']),\n HotSpot_90th: parseFloat(row['90th_HS>0']),\n DHW: parseFloat(row['DHW_from_90th_HS>1']),\n BAA_7day_max: parseFloat(row['BAA_7day_max']),\n season: row.season,\n})).filter(d => !isNaN(d.SST_MIN) && !isNaN(d.SST_MAX) && !isNaN(d.SST_90th_HS) && isFinite(d.date.getTime()))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"### data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"function getPanamaSeason(date) {\n const month = date.getMonth();\n if (month >= 4 && month <= 10) { // May to November\n return 'Rainy Season';\n } else {\n return 'Dry Season'; // December to April\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"function hexToRGBA(hex, opacity) {\n let r = parseInt(hex.slice(1, 3), 16),\n g = parseInt(hex.slice(3, 5), 16),\n b = parseInt(hex.slice(5, 7), 16);\n\n return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"simplestatistics = require(\"https://unpkg.com/simple-statistics@7.8.3/dist/simple-statistics.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"import { stylesheet, theme } from \"@ajar/css\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"stylesheet","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1507,"value":"themecolors = `{\"colors\": ${JSON.stringify(colors)}, \"marker\": \"${marker}\"}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"themeJs = `theme({\"colors\": ${JSON.stringify(colors)}, \"marker\": \"${marker}\"})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"mutable copiedThemeJs = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"theme({ colors: colors, marker: marker })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"viewof marker = Inputs.radio(\n new Map([\n [\"i, ii, iii, iv\", \"lower-roman\"],\n [\"1, 2, 3, 4\", \"decimal\"],\n [\"a, b, c, d\", \"lower-latin\"],\n [\"A, B, C, D\", \"upper-latin\"],\n [\"I, II, III, IV\", \"upper-roman\"]\n ]),\n {\n value: \"lower-roman\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"viewof colors = Inputs.form({\n primary: Inputs.color({\n label: \"Primary Color\",\n datalist: d3.schemeTableau10,\n value: \"#7370ff\"\n }),\n secondary: Inputs.color({\n label: \"Secondary Color\",\n datalist: d3.schemeTableau10,\n value: \"#0d978b\"\n }),\n accent: Inputs.color({\n label: \"Accent Color\",\n datalist: d3.schemeTableau10,\n value: \"#ff4d00\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"_.forEach(document.getElementsByTagName(\"p\"), (p, i) => {\n p.innerHTML = p.innerHTML.replace(\"[^] \", \"\");\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"Inputs.table(csvData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"csvData = d3.csvParse(dataList.map((row) => row.join(\",\")).join(\"\\n\"));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"dataList = {\n const lines = fileContent.split(\"\\n\");\n const startLine = lines.findIndex((line) => line.startsWith(\"YYYY\"));\n const dataList = [];\n\n for (let i = startLine; i < lines.length; i++) {\n // Split the line into columns using a regular expression to handle multiple spaces\n const columns = lines[i].trim().split(/\\s+/);\n\n const parsedRow = columns.map((value) => {\n // Improved check for numeric values (handles negative numbers and long numbers)\n if (!isNaN(parseFloat(value)) && isFinite(value)) {\n return parseFloat(value);\n }\n return value;\n });\n\n dataList.push(parsedRow);\n }\n return dataList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"fileContent = await FileAttachment(\"panama_pacific_east.txt\").text({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"🌟This data: /panama_pacific_east.txt\n\n🌟https://coralreefwatch.noaa.gov/product/vs/data/panama_pacific_east.txt\n\n🌟https://coralreefwatch.noaa.gov/product/5km/methodology.php#ssta","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":784,"value":"## Stylesheet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"\n🌟This is a stylesheet by _ [Aaron's Stylesheet for Observable](https://observablehq.com/@ajar/css)_. \n\n🌟${tex`\\LaTeX`} https://observablehq.com/@s-haensch/latex-notation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1413,"value":"d3 = require('d3@7','d3-regression@1', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 45:"$44:body"