2f:T3708,{ const W = 900; const H = 420; const margin = { top: 60, right: 75, bottom: 60, left: 70 }; const w = W - margin.left - margin.right; const h = H - margin.top - margin.bottom; const yearlyStats = d3.rollups( cleanData, v => ({ count: v.length, mean: d3.mean(v, d => d.bleaching), pctSevere: v.filter(d => d.bleaching > 50).length / v.length, pctAny: v.filter(d => d.bleaching > 0).length / v.length }), d => d.year ) .map(([year, s]) => ({ year, ...s })) .sort((a, b) => d3.ascending(a.year, b.year)); const EVENTS = [ { year: 1998, label: "1998", detail: "First global mass bleaching event. El Niño driven. Dataset mean: 43.1%.", color: "#e74c3c" }, { year: 2005, label: "2005", detail: "Record Atlantic bleaching. Dataset peak survey count: 3,986.", color: "#e67e22" }, { year: 2010, label: "2010", detail: "Indian Ocean & SE Asia bleaching event.", color: "#f1c40f" }, { year: 2016, label: "2016", detail: "3rd Global Bleaching Event (2014–2017). GBR lost ~50% shallow corals.", color: "#e74c3c" } ]; const tooltip = html``; // ── Header ── const header = html`

Bleaching Over Time (1980–2020)

Bars show the number of reef surveys per year (left axis). The red line shows mean bleaching percentage (right axis, capped at 90%). Orange markers flag well-documented global bleaching events. ● Yellow dots = fewer than 50 surveys that year — interpret those values with caution, as small samples can produce misleadingly high or low means.

`; const svg = d3.create("svg") .attr("width", "100%") .attr("viewBox", `0 0 ${W} ${H}`) .style("display", "block") .style("background", "#04111e"); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const allYears = yearlyStats.map(d => d.year); const x = d3.scaleBand() .domain(allYears) .range([0, w]) .padding(0.25); const yCount = d3.scaleLinear() .domain([0, d3.max(yearlyStats, d => d.count) * 1.15]).nice() .range([h, 0]); const yMean = d3.scaleLinear() .domain([0, 90]) .range([h, 0]); g.append("g").selectAll("line").data(yCount.ticks(5)).join("line") .attr("x1", 0).attr("x2", w) .attr("y1", d => yCount(d)).attr("y2", d => yCount(d)) .attr("stroke", "rgba(255,255,255,0.05)"); const pre98X = x(1998) ?? 0; const defs = svg.append("defs"); defs.append("pattern") .attr("id", "hatch") .attr("patternUnits", "userSpaceOnUse") .attr("width", 10).attr("height", 10) .append("line") .attr("x1", 0).attr("y1", 0).attr("x2", 10).attr("y2", 10) .attr("stroke", "rgba(241,196,15,0.06)") // ← lighter hatch .attr("stroke-width", 1); g.append("rect") .attr("x", 0).attr("y", 0) .attr("width", pre98X).attr("height", h) .attr("fill", "rgba(255,193,7,0.03)"); g.append("rect") .attr("x", 0).attr("y", 0) .attr("width", pre98X).attr("height", h) .attr("fill", "url(#hatch)"); g.append("line") .attr("x1", pre98X).attr("x2", pre98X) .attr("y1", 0).attr("y2", h) .attr("stroke", "rgba(241,196,15,0.2)") .attr("stroke-width", 1) .attr("stroke-dasharray", "3 3"); g.append("text") .attr("x", pre98X / 2).attr("y", 16) .attr("text-anchor", "middle") .attr("fill", "rgba(241,196,15,0.5)") .attr("font-size", 10) .attr("font-family", "IBM Plex Sans, sans-serif") .text("⚠ sparse data — few surveys pre-1998"); g.append("text") .attr("x", pre98X / 2).attr("y", 29) .attr("text-anchor", "middle") .attr("fill", "rgba(241,196,15,0.35)") .attr("font-size", 9) .attr("font-family", "IBM Plex Sans, sans-serif") .text("interpret means with caution"); EVENTS.forEach(ev => { const xPos = x(ev.year); if (xPos == null) return; const cx = xPos + x.bandwidth() / 2; g.append("rect") .attr("x", cx - 20).attr("width", 40) .attr("y", 0).attr("height", h) .attr("fill", ev.color).attr("opacity", 0.06); g.append("line") .attr("x1", cx).attr("x2", cx) .attr("y1", 0).attr("y2", h) .attr("stroke", ev.color) .attr("stroke-width", 1) .attr("stroke-dasharray", "4 3") .attr("opacity", 0.75); g.append("text") .attr("x", cx + 3).attr("y", 8) .attr("fill", ev.color) .attr("font-size", 9).attr("font-weight", "bold") .attr("font-family", "IBM Plex Mono, monospace") .text(ev.label); }); g.selectAll(".bar").data(yearlyStats).join("rect") .attr("class", "bar") .attr("x", d => x(d.year)) .attr("width", x.bandwidth()) .attr("y", d => yCount(d.count)) .attr("height", d => h - yCount(d.count)) .attr("fill", "#4a90d9") .attr("opacity", d => d.count < 50 ? 0.22 : 0.5) .attr("rx", 2) .on("mouseover", (event, d) => showTT(event, d)) .on("mousemove", event => moveTT(event)) .on("mouseout", () => { tooltip.style.display = "none"; }); const lineData = yearlyStats.map(d => ({ ...d, meanCapped: Math.min(d.mean, 89) })); const line = d3.line() .x(d => x(d.year) + x.bandwidth() / 2) .y(d => yMean(d.meanCapped)) .curve(d3.curveCatmullRom); const area = d3.area() .x(d => x(d.year) + x.bandwidth() / 2) .y0(h) .y1(d => yMean(d.meanCapped)) .curve(d3.curveCatmullRom); defs.append("linearGradient") .attr("id", "line-area-grad") .attr("x1", "0").attr("y1", "0") .attr("x2", "0").attr("y2", "1") .selectAll("stop") .data([ { offset: "0%", color: "#e74c3c", opacity: 0.15 }, { offset: "100%", color: "#e74c3c", opacity: 0.0 } ]) .join("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color) .attr("stop-opacity", d => d.opacity); g.append("path").datum(lineData).attr("d", area) .attr("fill", "url(#line-area-grad)"); g.append("path").datum(lineData).attr("d", line) .attr("fill", "none") .attr("stroke", "#e74c3c") .attr("stroke-width", 2) .attr("opacity", 0.9); g.selectAll(".ldot").data(lineData).join("circle") .attr("class", "ldot") .attr("cx", d => x(d.year) + x.bandwidth() / 2) .attr("cy", d => yMean(d.meanCapped)) .attr("r", d => d.count < 50 ? 4.5 : 2.5) .attr("fill", d => d.count < 50 ? "#f1c40f" : "#e74c3c") .attr("stroke", d => d.count < 50 ? "#04111e" : "none") .attr("stroke-width", 1.2) .attr("cursor", "pointer") .on("mouseover", (event, d) => showTT(event, d)) .on("mousemove", event => moveTT(event)) .on("mouseout", () => { tooltip.style.display = "none"; }); function showTT(event, d) { const ev = EVENTS.find(e => e.year === d.year); const sparse = d.count < 50; tooltip.style.display = "block"; tooltip.innerHTML = `

YEAR

${d.year}

Surveys

${d3.format(",")(d.count)}

Mean bleaching

${d.mean.toFixed(1)}%

Severe (>50%)

${(d.pctSevere * 100).toFixed(1)}% of surveys

Any bleaching

${(d.pctAny * 100).toFixed(1)}% of surveys

${sparse ? `

⚠ Only ${d.count} surveys — mean may not be representative.

` : ""} ${ev ? `

📌 ${ev.detail}

` : ""} `; moveTT(event); } function moveTT(event) { const tt = tooltip; const x = event.clientX; const y = event.clientY; const ttH = tt.offsetHeight || 180; const flip = y - ttH - 20 < 0; tt.style.left = (x + 14) + "px"; tt.style.top = flip ? (y + 14) + "px" : (y - ttH - 10) + "px"; } g.append("g") .attr("transform", `translate(0,${h})`) .call( d3.axisBottom(x) .tickValues(allYears.filter(y => y % 5 === 0)) .tickFormat(d3.format("d")) ) .call(ag => ag.select(".domain").attr("stroke", "rgba(255,255,255,0.1)")) .call(ag => ag.selectAll(".tick line").attr("stroke", "rgba(255,255,255,0.1)")) .selectAll("text") .attr("fill", "#a8b8c8").attr("font-size", 10); g.append("g") .call(d3.axisLeft(yCount).ticks(5).tickFormat(d3.format(",d"))) .call(ag => ag.select(".domain").remove()) .call(ag => ag.selectAll(".tick line").attr("stroke", "rgba(255,255,255,0.08)")) .selectAll("text").attr("fill", "#6a8099").attr("font-size", 9); g.append("text") .attr("transform", "rotate(-90)") .attr("x", -h / 2).attr("y", -54) .attr("text-anchor", "middle") .attr("fill", "#4a90d9").attr("font-size", 10) .attr("font-family", "IBM Plex Sans, sans-serif") .text("Survey count (bars)"); g.append("g") .attr("transform", `translate(${w},0)`) .call( d3.axisRight(yMean) .tickValues([0, 10, 20, 30, 40, 50, 60, 70, 80, 90]) .tickFormat(d => d + "%") ) .call(ag => ag.select(".domain").remove()) .call(ag => ag.selectAll(".tick line").attr("stroke", "rgba(255,255,255,0.08)")) .selectAll("text").attr("fill", "#e74c3c").attr("font-size", 9); g.append("text") .attr("transform", "rotate(90)") .attr("x", h / 2).attr("y", -(w + 58)) .attr("text-anchor", "middle") .attr("fill", "#e74c3c").attr("font-size", 10) .attr("font-family", "IBM Plex Sans, sans-serif") .text("Mean bleaching % (line)"); const lg = svg.append("g") .attr("transform", `translate(${margin.left + 10}, ${margin.top - 32})`); lg.append("rect").attr("width", 12).attr("height", 12) .attr("fill", "#4a90d9").attr("opacity", 0.6).attr("rx", 2); lg.append("text").attr("x", 16).attr("y", 10) .attr("fill", "#a8b8c8").attr("font-size", 10) .attr("font-family", "IBM Plex Sans, sans-serif") .text("Survey count"); lg.append("line").attr("x1", 106).attr("x2", 122) .attr("y1", 6).attr("y2", 6) .attr("stroke", "#e74c3c").attr("stroke-width", 2); lg.append("circle").attr("cx", 114).attr("cy", 6).attr("r", 2.5) .attr("fill", "#e74c3c"); lg.append("text").attr("x", 126).attr("y", 10) .attr("fill", "#a8b8c8").attr("font-size", 10) .attr("font-family", "IBM Plex Sans, sans-serif") .text("Mean bleaching %"); lg.append("circle").attr("cx", 252).attr("cy", 6).attr("r", 4.5) .attr("fill", "#f1c40f") .attr("stroke", "#04111e").attr("stroke-width", 1); lg.append("text").attr("x", 261).attr("y", 10) .attr("fill", "#a8b8c8").attr("font-size", 10) .attr("font-family", "IBM Plex Sans, sans-serif") .text("Fewer than 50 surveys — interpret with caution"); const allEvents = [ ...EVENTS, { year: 2020, label: "2020", detail: "Survey count drops to 90 — COVID-19 pandemic prevented most fieldwork.", color: "#6a8099" } ]; const callouts = html`

${allEvents.map(ev => `

${ev.label}

${ev.detail}

`).join("")}

`; const sparseNote = html`

⚠ Pre-1998 data caveat: Before 1998 the dataset contains very few surveys per year (often under 30). Mean bleaching values in this period are based on small, geographically concentrated samples and should not be compared directly to post-1998 values where thousands of surveys exist. The apparent high percentages in the 1980s reflect where scientists chose to survey — not a global baseline.

`; return html` ${tooltip}

${header} ${svg.node()} ${callouts} ${sparseNote}

`; }30:T4bb5,{ const width = 920; const height = 560; const bleachCategories = [ { label: "0% bleaching", color: "#4a9edd", test: (p) => p === 0, tip: "No bleaching detected at time of survey. Corals appear healthy. Does not mean the reef has never bleached — survey may have occurred outside a stress event." }, { label: "1–10%", color: "#2ecc71", test: (p) => p > 0 && p <= 10, tip: "Mild or early-stage bleaching. Only a small fraction of corals affected. Often signals the beginning of a thermal stress event or sensitivity of certain species." }, { label: "10–30%", color: "#f1c40f", test: (p) => p > 10 && p <= 30, tip: "Moderate bleaching. A significant portion of corals are stressed. Reef is under clear thermal pressure — mortality possible if heat stress continues." }, { label: "30–60%", color: "#e67e22", test: (p) => p > 30 && p <= 60, tip: "Severe bleaching. Majority of corals visibly white. Coral mortality becomes likely. Associated with sustained temperatures 1–2°C above the long-term maximum." }, { label: ">60% (severe)", color: "#e74c3c", test: (p) => p > 60, tip: "Mass bleaching. More than 60% of corals bleached — NOAA Alert Level 2. Widespread coral death expected. Seen at epicenters of 1998, 2005 and 2016 global events." } ]; function bleachColor(p) { if (p === 0) return "#4a9edd"; if (p <= 10) return "#2ecc71"; if (p <= 30) return "#f1c40f"; if (p <= 60) return "#e67e22"; return "#e74c3c"; } const activeCategories = new Set(bleachCategories.map((_, i) => i)); const projection = d3.geoNaturalEarth1() .scale(160) .translate([width / 2, height / 2]); const path = d3.geoPath(projection); const world110 = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"); const world50 = await d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json"); const countries110 = topojson.feature(world110, world110.objects.countries); const countries50 = topojson.feature(world50, world50.objects.countries); let currentTransform = d3.zoomIdentity; let currentScale = 1; const projectedData = cleanData.map(d => { const p = projection([d.longitude, d.latitude]); return { ...d, px: p ? p[0] : -9999, py: p ? p[1] : -9999 }; }); const header = html`

World Map of Bleaching Observations

Each dot represents a reef survey location, colored by reported bleaching percentage. Use the animation to see observations accumulate year-by-year, or filter to focus on high-bleaching sites. Zoom in (up to 50×) to explore individual survey sites and see which country each reef is in. Scroll to zoom · drag to pan · double-click to reset.

`; const controls = html`

      
      All years

        Animation speed
        faster
        
        slower
      
        Show data:
        
        zoom 1×
      
      Min bleaching %:
      
      0%
      
        Filter map to show only sites above this bleaching threshold

`; const svg = d3.create("svg") .attr("viewBox", `0 0 ${width} ${height}`) .attr("width", "100%") .style("display", "block") .style("cursor", "grab") .style("border-radius", "0 0 10px 10px"); svg.append("rect") .attr("width", width).attr("height", height) .attr("fill", "#04111e"); const mapG = svg.append("g"); const zoom = d3.zoom() .scaleExtent([1, 50]) .wheelDelta((event) => -event.deltaY * 0.008) .on("zoom", (event) => { currentTransform = event.transform; currentScale = event.transform.k; mapG.attr("transform", event.transform); controls.querySelector("#zoomLevel").textContent = `zoom ${currentScale.toFixed(1)}×`; if (currentScale >= 4) { countriesPath.attr("d", d => path(d)); countriesG.attr("display", null); countries110G.attr("display", "none"); countriesG.selectAll("path") .data(countries50.features) .join("path") .attr("d", path) .attr("fill", "#1a3248") .attr("stroke", "#253d52") .attr("stroke-width", 0.4 / currentScale); } else { countriesG.attr("display", "none"); countries110G.attr("display", null); countries110G.selectAll("path") .attr("stroke-width", 0.4); } const dotScale = Math.max(0.3, 1 / Math.sqrt(currentScale)); dotsG.selectAll("circle") .attr("r", d => (d.bleaching > 50 ? 4.5 : 2.8) * dotScale); if (currentScale > 6) cullDots(); }); svg.call(zoom); svg.on("dblclick.zoom", () => svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity) ); mapG.append("path").datum({ type: "Sphere" }) .attr("d", path).attr("fill", "#04111e"); mapG.append("path").datum(d3.geoGraticule()()) .attr("d", path).attr("fill", "none") .attr("stroke", "rgba(255,255,255,0.04)").attr("stroke-width", 0.5); const countries110G = mapG.append("g"); countries110G.selectAll("path") .data(countries110.features) .join("path") .attr("d", path) .attr("fill", "#1a3248") .attr("stroke", "#253d52") .attr("stroke-width", 0.4); const countriesG = mapG.append("g").attr("display", "none"); const countriesPath = countriesG.selectAll("path") .data(countries50.features) .join("path") .attr("d", path) .attr("fill", "#1a3248") .attr("stroke", "#253d52") .attr("stroke-width", 0.4); [ { name: "Pacific Ocean", lon: -145, lat: 5 }, { name: "Atlantic Ocean", lon: -32, lat: 5 }, { name: "Indian Ocean", lon: 73, lat: -20 }, { name: "Arctic Ocean", lon: 0, lat: 82 }, { name: "Southern Ocean", lon: 0, lat: -62 } ].forEach(({ name, lon, lat }) => { const p = projection([lon, lat]); if (!p) return; mapG.append("text") .attr("x", p[0]).attr("y", p[1]) .attr("text-anchor", "middle") .attr("fill", "rgba(100,160,220,0.45)") .attr("font-size", 11) .attr("font-style", "italic") .attr("font-family", "sans-serif") .attr("pointer-events", "none") .text(name); }); const dotsG = mapG.append("g"); const tooltip = html``; const legendTooltip = html``; function positionTT(tt, event, h = 160) { const flip = event.clientY - h - 20 < 0; tt.style.left = (event.clientX + 14) + "px"; tt.style.top = flip ? (event.clientY + 14) + "px" : (event.clientY - h) + "px"; } const countLabel = svg.append("text") .attr("x", width - 12).attr("y", 18) .attr("text-anchor", "end") .attr("fill", "#a8b8c8").attr("font-size", 11) .attr("font-family", "sans-serif"); svg.append("text") .attr("x", width - 10).attr("y", height - 10) .attr("text-anchor", "end") .attr("fill", "rgba(168,184,200,0.4)") .attr("font-size", 9.5).attr("font-family", "sans-serif") .text("Scroll to zoom up to 50× · drag to pan · double-click to reset"); svg.append("text") .attr("x", width / 2).attr("y", height - 10) .attr("text-anchor", "middle") .attr("fill", "rgba(168,184,200,0.4)") .attr("font-size", 9.5).attr("font-family", "sans-serif") .text("Click legend to filter · shift+click to multi-select · click again to reset"); const showAllText = svg.append("text") .attr("x", 14).attr("y", height - 38) .attr("fill", "#a8b8c8").attr("font-size", 9.5) .attr("font-family", "sans-serif") .attr("cursor", "pointer") .attr("text-decoration", "underline") .attr("opacity", 0) .text("↺ show all categories") .on("click", () => { activeCategories.clear(); bleachCategories.forEach((_, i) => activeCategories.add(i)); updateLegendState(); render(animYear, +bleachSlider.value, modeSelect.value); }); const lgG = svg.append("g") .attr("transform", `translate(14, ${height - 28})`); const legendCircles = []; const legendLabels = []; bleachCategories.forEach(({ label, color, tip }, i) => { const gx = i * 118; lgG.append("rect") .attr("x", gx - 2).attr("y", -12) .attr("width", 114).attr("height", 22) .attr("fill", "transparent").attr("cursor", "pointer") .on("click", (event) => { if (event.shiftKey) { activeCategories.has(i) ? activeCategories.delete(i) : activeCategories.add(i); } else { if (activeCategories.size === 1 && activeCategories.has(i)) { bleachCategories.forEach((_, j) => activeCategories.add(j)); } else { activeCategories.clear(); activeCategories.add(i); } } updateLegendState(); render(animYear, +bleachSlider.value, modeSelect.value); }) .on("mouseover", (event) => { legendTooltip.style.display = "block"; legendTooltip.innerHTML = `

${label}

${tip}

Click to isolate · shift+click to multi-select

`; positionTT(legendTooltip, event, 160); }) .on("mousemove", (event) => positionTT(legendTooltip, event, 160)) .on("mouseout", () => { legendTooltip.style.display = "none"; }); legendCircles.push( lgG.append("circle") .attr("cx", gx + 5).attr("cy", 0).attr("r", 5) .attr("fill", color).attr("pointer-events", "none") ); legendLabels.push( lgG.append("text") .attr("x", gx + 14).attr("y", 4) .attr("fill", "#a8b8c8").attr("font-size", 10) .attr("font-family", "sans-serif") .attr("pointer-events", "none") .text(label) ); }); function updateLegendState() { const allActive = activeCategories.size === bleachCategories.length; showAllText.attr("opacity", allActive ? 0 : 1); bleachCategories.forEach(({ color }, i) => { const on = activeCategories.has(i); legendCircles[i].attr("fill", on ? color : "#2a3a4a").attr("r", on ? 5 : 4); legendLabels[i].attr("fill", on ? "#a8b8c8" : "#3a4a5a"); }); } function cullDots() { if (!currentTransform) return; const t = currentTransform; const margin = 40; const x0 = -t.x / t.k - margin; const y0 = -t.y / t.k - margin; const x1 = (width - t.x) / t.k + margin; const y1 = (height - t.y) / t.k + margin; dotsG.selectAll("circle") .attr("display", d => d.px >= x0 && d.px <= x1 && d.py >= y0 && d.py <= y1 ? null : "none" ); } function render(yearVal, bleachVal, mode) { let filtered = mode === "all" ? projectedData : mode === "cumulative" ? projectedData.filter(d => d.year <= yearVal) : projectedData.filter(d => d.year === yearVal); filtered = filtered.filter(d => d.bleaching >= bleachVal); filtered = filtered.filter(d => bleachCategories.some((cat, i) => activeCategories.has(i) && cat.test(d.bleaching)) ); const dotScale = Math.max(0.3, 1 / Math.sqrt(currentScale)); const dots = dotsG.selectAll("circle") .data(filtered, d => `${d.year}-${d.latitude}-${d.longitude}`); dots.enter().append("circle") .attr("cx", d => d.px) .attr("cy", d => d.py) .attr("fill", d => bleachColor(d.bleaching)) .attr("opacity", 0.82) .attr("stroke", "rgba(255,255,255,0.2)") .attr("stroke-width", 0.4) .attr("r", d => (d.bleaching > 50 ? 4.5 : 2.8) * dotScale) .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "#fff") .attr("stroke-width", 1.4 / currentScale) .attr("opacity", 1); tooltip.style.display = "block"; tooltip.innerHTML = ` YEAR
${d.year}
BLEACHING
${d.bleaching.toFixed(1)}%
COUNTRY
${d.country || "—"}
OCEAN
${d.ocean}
REALM
${d.realm}
COORDINATES
${d.latitude.toFixed(3)}°, ${d.longitude.toFixed(3)}° `; positionTT(tooltip, event, 200); }) .on("mousemove", event => positionTT(tooltip, event, 200)) .on("mouseout", function() { d3.select(this) .attr("stroke", "rgba(255,255,255,0.2)") .attr("stroke-width", 0.4) .attr("opacity", 0.82); tooltip.style.display = "none"; }); dots.exit().remove(); if (currentScale > 6) cullDots(); countLabel.text(`${filtered.length.toLocaleString()} sites`); } const playBtn = controls.querySelector("#playBtn"); const resetBtn = controls.querySelector("#resetBtn"); const yearDisplay = controls.querySelector("#yearDisplay"); const speedSlider = controls.querySelector("#speedSlider"); const bleachSlider = controls.querySelector("#bleachSlider"); const bleachLabel = controls.querySelector("#bleachLabel"); const modeSelect = controls.querySelector("#modeSelect"); let playing = false, animTimer = null, animYear = 1980; function stopAnim() { playing = false; clearInterval(animTimer); playBtn.textContent = "▶ Play"; } function startAnim() { if (modeSelect.value === "all") modeSelect.value = "cumulative"; if (animYear >= 2020) animYear = 1980; playing = true; playBtn.textContent = "⏸ Pause"; animTimer = setInterval(() => { yearDisplay.textContent = animYear; render(animYear, +bleachSlider.value, modeSelect.value); animYear++; if (animYear > 2020) stopAnim(); }, +speedSlider.value); } playBtn.addEventListener("click", () => playing ? stopAnim() : startAnim()); speedSlider.addEventListener("input", () => { if (playing) { stopAnim(); startAnim(); } }); resetBtn.addEventListener("click", () => { stopAnim(); animYear = 1980; modeSelect.value = "all"; bleachSlider.value = 0; bleachLabel.textContent = "0%"; yearDisplay.textContent = "All years"; activeCategories.clear(); bleachCategories.forEach((_, i) => activeCategories.add(i)); updateLegendState(); svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity); render(animYear, 0, "all"); }); bleachSlider.addEventListener("input", () => { bleachLabel.textContent = bleachSlider.value + "%"; render(animYear, +bleachSlider.value, modeSelect.value); }); modeSelect.addEventListener("change", () => { yearDisplay.textContent = modeSelect.value === "all" ? "All years" : animYear; render(animYear, +bleachSlider.value, modeSelect.value); }); render(animYear, 0, "all"); return html`${tooltip}${legendTooltip}

${header}${controls}${svg.node()}

`; }31:T5fab,{ const W = 900; const CHART_H = 260; const BAR_H = 220; const margin = { top: 30, right: 20, bottom: 60, left: 60 }; const bw = (W / 2) - margin.left - margin.right - 20; const bh = BAR_H - margin.top - margin.bottom; const oceanColors = { "Atlantic": "#4a9edd", "Pacific": "#2ecc71", "Indian": "#e67e22", "Red Sea": "#e74c3c", "Arabian Gulf": "#9b59b6", "Unknown": "#7f8c8d" }; const allYears = [...new Set(cleanData.map(d => d.year))].sort(d3.ascending); function computeOceanStats(data) { return d3.rollups( data, v => ({ count: v.length, mean: d3.mean(v, d => d.bleaching), pctSevere: v.filter(d => d.bleaching > 50).length / v.length, pctAny: v.filter(d => d.bleaching > 0).length / v.length }), d => d.ocean ) .map(([ocean, s]) => ({ ocean, ...s })) .filter(d => d.ocean !== "Unknown"); } function computeSparkline(ocean) { return d3.rollups( cleanData.filter(d => d.ocean === ocean), v => d3.mean(v, d => d.bleaching), d => d.year ) .map(([year, mean]) => ({ year, mean })) .sort((a, b) => d3.ascending(a.year, b.year)); } let selectedOcean = null; let sortMetric = "count"; let rightMetric = "mean"; let yearRange = [d3.min(allYears), d3.max(allYears)]; function getFilteredData() { return cleanData.filter(d => d.year >= yearRange[0] && d.year <= yearRange[1]); } // ── Tooltip ── const tooltip = html``; // ── Header ── const header = html`

Which Oceans Are Most Affected?

Bleaching is not evenly distributed across ocean basins. The Atlantic leads in survey count (13,319) and highest mean bleaching (14.4%), driven by intensive Caribbean monitoring. The Indian Ocean ranks second in mean bleaching (12.9%) but has the highest proportion of severe events (12.2% of surveys >50%). Click any bar to explore that ocean in detail ↓

`; // ── Controls ── const controls = html`

    Sort by:
    
    Right chart:
    
      ✕ Clear filter

`; // ── Year brush ── const brushDiv = html`

      Year range: 
        ${yearRange[0]} – ${yearRange[1]}
      
        drag handles to filter both charts

`; // ── Chart SVG ── const chartSvg = d3.create("svg") .attr("width", "100%") .attr("viewBox", `0 0 ${W} ${CHART_H + 20}`) .style("display", "block") .style("background", "#04111e"); // ── Click hint arrow ── const clickHint = html`

↑ Click any bar to open the ocean detail panel with sparkline and statistics

`; // ── Detail panel ── const detailPanel = html`

`; // ── Insight box ── const insightBox = html``; // ════════════════ // DRAW BAR CHART // ════════════════ function drawBarChart(g, data, key, w, h, valFn, labelFn, title) { const x = d3.scaleBand() .domain(data.map(d => d.ocean)) .range([0, w]).padding(0.3); const y = d3.scaleLinear() .domain([0, d3.max(data, valFn) * 1.15]).nice() .range([h, 0]); g.append("g").selectAll("line").data(y.ticks(4)).join("line") .attr("x1", 0).attr("x2", w) .attr("y1", d => y(d)).attr("y2", d => y(d)) .attr("stroke", "rgba(255,255,255,0.05)"); g.append("text").attr("x", 0).attr("y", -12) .attr("fill", "#a8b8c8").attr("font-size", 11) .attr("font-family", "IBM Plex Sans, sans-serif") .text(title); // Bars g.selectAll(".bar").data(data).join("rect") .attr("class", "bar") .attr("x", d => x(d.ocean)) .attr("width", x.bandwidth()) .attr("y", d => y(valFn(d))) .attr("height", d => h - y(valFn(d))) .attr("fill", d => selectedOcean && d.ocean !== selectedOcean ? "#1e3a52" : (oceanColors[d.ocean] || "#4a9edd")) .attr("rx", 3) .attr("opacity", d => selectedOcean && d.ocean !== selectedOcean ? 0.3 : 0.9) .attr("cursor", "pointer") .on("mouseover", function(event, d) { if (!selectedOcean || d.ocean === selectedOcean) d3.select(this).attr("opacity", 1).attr("stroke", "#fff").attr("stroke-width", 1); tooltip.style.display = "block"; tooltip.innerHTML = `

${d.ocean}

Surveys

${d3.format(",")(d.count)}

Mean bleaching

${d.mean.toFixed(1)}%

Severe (>50%)

${(d.pctSevere * 100).toFixed(1)}% of surveys

Any bleaching

${(d.pctAny * 100).toFixed(1)}% of surveys

Click to explore ↓ detail panel

`; tooltip.style.left = (event.clientX + 14) + "px"; tooltip.style.top = (event.clientY - 180) + "px"; }) .on("mousemove", event => { tooltip.style.left = (event.clientX + 14) + "px"; tooltip.style.top = (event.clientY - 180) + "px"; }) .on("mouseout", function(event, d) { d3.select(this) .attr("opacity", selectedOcean && d.ocean !== selectedOcean ? 0.3 : 0.9) .attr("stroke", "none"); tooltip.style.display = "none"; }) .on("click", (event, d) => { if (selectedOcean === d.ocean) { selectedOcean = null; controls.querySelector("#clearFilter").style.display = "none"; detailPanel.style.maxHeight = "0"; insightBox.style.display = "none"; clickHint.style.display = "block"; } else { selectedOcean = d.ocean; controls.querySelector("#clearFilter").style.display = "inline"; clickHint.style.display = "none"; showDetailPanel(d.ocean); updateInsight(); } drawBars(); }); // Value labels g.selectAll(".val-lbl").data(data).join("text") .attr("class", "val-lbl") .attr("x", d => x(d.ocean) + x.bandwidth() / 2) .attr("y", d => y(valFn(d)) - 4) .attr("text-anchor", "middle") .attr("fill", d => selectedOcean && d.ocean !== selectedOcean ? "#2a4a62" : "#a8b8c8") .attr("font-size", 9) .attr("font-family", "IBM Plex Sans, sans-serif") .text(d => labelFn(d)); // X axis g.append("g").attr("transform", `translate(0,${h})`) .call(d3.axisBottom(x)) .call(ag => ag.select(".domain").attr("stroke", "rgba(255,255,255,0.1)")) .call(ag => ag.selectAll(".tick line").attr("stroke", "rgba(255,255,255,0.1)")) .selectAll("text") .attr("fill", d => selectedOcean && d !== selectedOcean ? "#2a4a62" : "#a8b8c8") .attr("font-size", 10) .attr("transform", "rotate(-20)") .attr("text-anchor", "end"); // Y axis — correct format per scale g.append("g") .call( d3.axisLeft(y).ticks(4).tickFormat(d => { if (key === "count") return d3.format(",d")(d); if (key === "mean") return d.toFixed(1) + "%"; // already 0-100 return (d * 100).toFixed(0) + "%"; // ratios: 0-1 }) ) .call(ag => ag.select(".domain").remove()) .call(ag => ag.selectAll(".tick line").attr("stroke", "rgba(255,255,255,0.08)")) .selectAll("text").attr("fill", "#6a8099").attr("font-size", 9); } // ════════════════ // DRAW BOTH BARS // ════════════════ function drawBars() { chartSvg.selectAll("*").remove(); const stats = computeOceanStats(getFilteredData()); const leftSorted = [...stats].sort((a, b) => d3.descending(a[sortMetric], b[sortMetric])); drawBarChart( chartSvg.append("g").attr("transform", `translate(${margin.left},${margin.top})`), leftSorted, "count", bw, bh, d => d.count, d => d3.format(",")(d.count), "Survey count by ocean basin" ); const rightSorted = [...stats].sort((a, b) => d3.descending(a[rightMetric], b[rightMetric])); const rightTitle = rightMetric === "mean" ? "Mean bleaching % by ocean basin" : rightMetric === "pctSevere" ? "% of surveys with >50% bleaching" : "% of surveys with any bleaching"; drawBarChart( chartSvg.append("g").attr("transform", `translate(${W / 2 + margin.left},${margin.top})`), rightSorted, rightMetric, bw, bh, d => d[rightMetric], d => rightMetric === "mean" ? d.mean.toFixed(1) + "%" : (d[rightMetric] * 100).toFixed(1) + "%", rightTitle ); } // ════════════════ // DETAIL PANEL // ════════════════ function showDetailPanel(ocean) { const spark = computeSparkline(ocean); const stats = computeOceanStats(getFilteredData()).find(d => d.ocean === ocean); const color = oceanColors[ocean] || "#4a9edd"; const peak = spark.reduce((a, b) => b.mean > a.mean ? b : a); const safeId = ocean.replace(/\s/g, ""); const spW = 300, spH = 60; const spX = d3.scaleLinear().domain(d3.extent(spark, d => d.year)).range([0, spW]); const spY = d3.scaleLinear().domain([0, d3.max(spark, d => d.mean) * 1.2]).range([spH, 0]); const line = d3.line().x(d => spX(d.year)).y(d => spY(d.mean)).curve(d3.curveCatmullRom); const area = d3.area().x(d => spX(d.year)).y0(spH).y1(d => spY(d.mean)).curve(d3.curveCatmullRom); detailPanel.innerHTML = `

${ocean} — mean bleaching % by year

Total surveys

              ${stats ? d3.format(",")(stats.count) : "—"}
            

Mean bleaching

              ${stats ? stats.mean.toFixed(1) + "%" : "—"}
            

Severe (>50%)

              ${stats ? (stats.pctSevere * 100).toFixed(1) + "%" : "—"}
            

Any bleaching

              ${stats ? (stats.pctAny * 100).toFixed(1) + "%" : "—"}
            

`; detailPanel.style.maxHeight = "220px"; } // ════════════════ // INSIGHTS // ════════════════ const INSIGHTS = { "Atlantic": `Atlantic Ocean: Highest survey count (13,319) and highest mean bleaching (14.4%) in the dataset, driven by intensive Caribbean monitoring programs. The 2005 Atlantic bleaching event was the worst on record for the Caribbean at the time. Peak mean recorded in 1983 (87.0%) — only 15 surveys that year, so interpret with caution.`, "Indian": `Indian Ocean: Second highest mean bleaching (12.9%) and the highest proportion of severe events (12.2% of surveys >50% bleaching). Particularly impacted around the Coral Triangle and the Maldives/Seychelles reefs, which experienced catastrophic bleaching in 1998 and again during 2015–2016. Peak mean in 1983 (75.0%).`, "Pacific": `Pacific Ocean: Largest survey count (17,446) but third-lowest mean bleaching (6.1%), reflecting surveys spread across many non-event years. Home to the Great Barrier Reef, which lost ~50% of its shallow corals during the 2014–2017 global bleaching event. 38.2% of Pacific surveys detected any bleaching. Peak mean in 1986 (81.2%) — only 3 surveys that year.`, "Red Sea": `Red Sea: Lowest mean bleaching (0.7%) despite sitting in one of the world's warmest ocean regions. Red Sea corals have evolved remarkable heat tolerance. Only 10.9% of surveys detected any bleaching at all. Peak mean in 1998 (48.3%).`, "Arabian Gulf": `Arabian Gulf: The most thermally extreme reef environment on Earth — summer temperatures reach 36°C. Mean bleaching is moderate (6.7%) with 6.8% of surveys showing severe bleaching. Corals here have evolved unusual thermal tolerance. Peak mean in 1996 (78.5%).` }; function updateInsight() { if (!selectedOcean || !INSIGHTS[selectedOcean]) { insightBox.style.display = "none"; return; } insightBox.style.display = "block"; insightBox.innerHTML = INSIGHTS[selectedOcean]; } // ════════════════ // YEAR BRUSH // ════════════════ function drawBrush() { const brushW = 860; const brushH = 44; const barsH = 26; const bsvg = d3.select(brushDiv.querySelector("#brushSvg")) .attr("viewBox", `0 0 ${brushW} ${brushH}`) .attr("height", 50) .attr("preserveAspectRatio", "none"); bsvg.selectAll("*").remove(); const bx = d3.scaleLinear() .domain([d3.min(allYears), d3.max(allYears)]) .range([10, brushW - 10]); const yearCounts = d3.rollups(cleanData, v => v.length, d => d.year) .map(([year, count]) => ({ year, count })) .sort((a, b) => d3.ascending(a.year, b.year)); const byH = d3.scaleLinear() .domain([0, d3.max(yearCounts, d => d.count)]) .range([barsH - 4, 2]); const barW = Math.max(1, (brushW - 20) / yearCounts.length - 1); bsvg.selectAll("rect.spark").data(yearCounts).join("rect") .attr("class", "spark") .attr("x", d => bx(d.year) - barW / 2) .attr("width", barW) .attr("y", d => byH(d.count)) .attr("height", d => (barsH - 4) - byH(d.count)) .attr("fill", d => d.year >= yearRange[0] && d.year <= yearRange[1] ? "rgba(78,155,220,0.55)" : "rgba(78,155,220,0.12)" ) .attr("rx", 1); const tickYears = allYears.filter(y => y % 5 === 0); const minTick = d3.min(tickYears); const maxTick = d3.max(tickYears); bsvg.selectAll("line.ytick").data(tickYears).join("line") .attr("class", "ytick") .attr("x1", d => bx(d)).attr("x2", d => bx(d)) .attr("y1", barsH).attr("y2", barsH + 4) .attr("stroke", "#2a4a6a").attr("stroke-width", 0.5); bsvg.selectAll("text.ytick").data(tickYears).join("text") .attr("class", "ytick") .attr("x", d => bx(d)) .attr("y", barsH + 13) .attr("text-anchor", d => d === maxTick ? "end" : d === minTick ? "start" : "middle" ) .attr("fill", "#4a6a8a").attr("font-size", 9) .attr("font-family", "IBM Plex Mono, monospace") .text(d => d); const brush = d3.brushX() .extent([[0, 0], [brushW, barsH]]) .on("end", (event) => { if (!event.selection) return; const [x0, x1] = event.selection; yearRange = [Math.round(bx.invert(x0)), Math.round(bx.invert(x1))]; brushDiv.querySelector("#yearRangeLabel").textContent = `${yearRange[0]} – ${yearRange[1]}`; drawBars(); if (selectedOcean) showDetailPanel(selectedOcean); }); const brushG = bsvg.append("g").call(brush); brushG.call(brush.move, [bx(yearRange[0]), bx(yearRange[1])]); brushG.select(".selection") .attr("fill", "rgba(232,213,163,0.15)") .attr("stroke", "#e8d5a3").attr("stroke-width", 0.5); brushG.selectAll(".handle").attr("fill", "#e8d5a3").attr("rx", 2); } // ════════════════ // BUTTONS // ════════════════ function styleButtons(activeId, ids) { ids.forEach(id => { const btn = controls.querySelector(`#${id}`); if (!btn) return; const on = id === activeId; btn.style.background = on ? "#1a3a5c" : "transparent"; btn.style.color = on ? "#e8d5a3" : "#a8b8c8"; btn.style.borderColor = on ? "#a8b8c8" : "rgba(168,184,200,0.3)"; }); } ["sortCount","sortMean","sortSevere"].forEach(id => { controls.querySelector(`#${id}`).addEventListener("click", () => { sortMetric = id === "sortCount" ? "count" : id === "sortMean" ? "mean" : "pctSevere"; styleButtons(id, ["sortCount","sortMean","sortSevere"]); drawBars(); }); }); ["metricMean","metricSevere","metricAny"].forEach(id => { controls.querySelector(`#${id}`).addEventListener("click", () => { rightMetric = id === "metricMean" ? "mean" : id === "metricSevere" ? "pctSevere" : "pctAny"; styleButtons(id, ["metricMean","metricSevere","metricAny"]); drawBars(); }); }); controls.querySelector("#clearFilter").addEventListener("click", () => { selectedOcean = null; controls.querySelector("#clearFilter").style.display = "none"; detailPanel.style.maxHeight = "0"; insightBox.style.display = "none"; clickHint.style.display = "block"; drawBars(); }); // ── Init ── drawBrush(); drawBars(); return html` ${tooltip}

${header} ${controls} ${brushDiv} ${chartSvg.node()} ${clickHint} ${detailPanel} ${insightBox}

`; }32:[{"id":"8f601a6aca2589e1b44a033c20bed22ab342d2b0dd246104903dc8a9c8f5627ddf37fb73bca700b5849ff2623e4fa61353b8ed9c5d39d60425912678091d8250","href":"https://static.observableusercontent.com/files/8f601a6aca2589e1b44a033c20bed22ab342d2b0dd246104903dc8a9c8f5627ddf37fb73bca700b5849ff2623e4fa61353b8ed9c5d39d60425912678091d8250","name":"global_bleaching_environmental.csv","type":"text/csv","lastModified":1775696875237.475,"size":16772400}] 2d:{"title":"","cells":[{"id":0,"value":"Exploratory Data Analysis\n","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"data = FileAttachment(\"global_bleaching_environmental.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"cleanData = data\n .map((d) => ({\n year: +d.Date_Year,\n bleaching: +d.Percent_Bleaching,\n latitude: +d.Latitude_Degrees,\n longitude: +d.Longitude_Degrees,\n ocean: d.Ocean_Name || \"Unknown\",\n realm: d.Realm_Name || \"Unknown\",\n ecoregion: d.Ecoregion_Name || \"Unknown\",\n country: d.Country_Name || \"Unknown\",\n depth: d.Depth_m !== \"nd\" ? +d.Depth_m : null\n }))\n .filter(\n (d) =>\n !isNaN(d.year) &&\n !isNaN(d.bleaching) &&\n !isNaN(d.latitude) &&\n !isNaN(d.longitude)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"world110m = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"countries = topojson.feature(world110m, world110m.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}