2f:T4496,{ const width = 920; const height = 560; // ── Color categories ── 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"; } // ── Active categories (all on by default) ── const activeCategories = new Set(bleachCategories.map((_, i) => i)); // ── Projection ── const projection = d3.geoNaturalEarth1() .scale(160) .translate([width / 2, height / 2]); const path = d3.geoPath(projection); // ── Header (before controls) ── 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. Scroll to zoom; drag to pan.

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

      
      All years

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

`; // ── SVG ── 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"); // ── Zoom + Pan ── const zoom = d3.zoom() .scaleExtent([1, 14]) .wheelDelta((event) => -event.deltaY * 0.008) .on("zoom", (event) => mapG.attr("transform", event.transform)); svg.call(zoom); svg.on("dblclick.zoom", () => svg.transition().duration(200).call(zoom.transform, d3.zoomIdentity) ); // ── Sphere ── mapG.append("path") .datum({ type: "Sphere" }) .attr("d", path) .attr("fill", "#04111e"); // ── Graticule ── 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); // ── Countries ── mapG.append("g") .selectAll("path") .data(countries.features) .join("path") .attr("d", path) .attr("fill", "#1a3248") .attr("stroke", "#253d52") .attr("stroke-width", 0.4); // ── Ocean labels ── [ { name: "Pacific Ocean", lon: -150, 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); }); // ── Dots layer ── const dotsG = mapG.append("g"); // ── Dot tooltip ── const tooltip = html``; // ── Legend tooltip ── const legendTooltip = html``; // ── Site count label ── 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"); // ── Hints ── 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 · drag to pan"); 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"); // ── Show all link ── 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") .on("click", () => { activeCategories.clear(); bleachCategories.forEach((_, i) => activeCategories.add(i)); updateLegendState(); render(animYear, +bleachSlider.value, modeSelect.value); }); // ── Legend ── 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) { if (activeCategories.has(i)) { activeCategories.delete(i); } else { 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

`; legendTooltip.style.left = (event.clientX + 14) + "px"; legendTooltip.style.top = (event.clientY - 120) + "px"; }) .on("mousemove", (event) => { legendTooltip.style.left = (event.clientX + 14) + "px"; legendTooltip.style.top = (event.clientY - 120) + "px"; }) .on("mouseout", () => { legendTooltip.style.display = "none"; }); const circle = lgG.append("circle") .attr("cx", gx + 5).attr("cy", 0).attr("r", 5) .attr("fill", color) .attr("pointer-events", "none"); const lbl = 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); legendCircles.push(circle); legendLabels.push(lbl); }); // ── Update legend visual state ── function updateLegendState() { const allActive = activeCategories.size === bleachCategories.length; showAllText.attr("opacity", allActive ? 0 : 1); bleachCategories.forEach(({ color }, i) => { const isActive = activeCategories.has(i); legendCircles[i] .attr("fill", isActive ? color : "#2a3a4a") .attr("r", isActive ? 5 : 4); legendLabels[i] .attr("fill", isActive ? "#a8b8c8" : "#3a4a5a"); }); } // ── Render function ── function render(yearVal, bleachVal, mode) { let filtered; if (mode === "all") { filtered = cleanData; } else if (mode === "cumulative") { filtered = cleanData.filter((d) => d.year <= yearVal); } else { filtered = cleanData.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 dots = dotsG.selectAll("circle") .data(filtered, (d) => `${d.year}-${d.latitude}-${d.longitude}`); dots.enter() .append("circle") .attr("cx", (d) => { const p = projection([d.longitude, d.latitude]); return p ? p[0] : -999; }) .attr("cy", (d) => { const p = projection([d.longitude, d.latitude]); return p ? p[1] : -999; }) .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) .on("mouseover", function (event, d) { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 1.4).attr("opacity", 1); tooltip.style.display = "block"; tooltip.innerHTML = ` YEAR
${d.year}
BLEACHING
${d.bleaching.toFixed(1)}%
OCEAN
${d.ocean}
REALM
${d.realm} `; tooltip.style.left = (event.clientX + 14) + "px"; tooltip.style.top = (event.clientY - 10) + "px"; }) .on("mousemove", (event) => { tooltip.style.left = (event.clientX + 14) + "px"; tooltip.style.top = (event.clientY - 10) + "px"; }) .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(); countLabel.text(`${filtered.length.toLocaleString()} sites`); } // ── Wire up controls ── 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; let animTimer = null; let 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", () => { if (playing) { stopAnim(); return; } 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(); render(animYear, 0, "all"); }); bleachSlider.addEventListener("input", () => { bleachLabel.textContent = bleachSlider.value + "%"; render(animYear, +bleachSlider.value, modeSelect.value); }); modeSelect.addEventListener("change", () => { const mode = modeSelect.value; yearDisplay.textContent = mode === "all" ? "All years" : animYear; render(animYear, +bleachSlider.value, mode); }); // ── Initial render ── render(animYear, 0, "all"); return html`${header}${controls}${tooltip}${legendTooltip}${svg.node()}`; }30:T635e,{ 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; // ── Ocean colors ── 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)); } // ── State ── 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 a 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"); // ── 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]); // Grid 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)"); // Title 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 this ocean

`; tooltip.style.left = (event.clientX + 14) + "px"; tooltip.style.top = (event.clientY - 110) + "px"; }) .on("mousemove", event => { tooltip.style.left = (event.clientX + 14) + "px"; tooltip.style.top = (event.clientY - 110) + "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"; } else { selectedOcean = d.ocean; controls.querySelector("#clearFilter").style.display = "inline"; 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 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) + "%"; return (d * 100).toFixed(0) + "%"; }) ) .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 CHARTS // ════════════════════════════════════════ function drawBars() { chartSvg.selectAll("*").remove(); const activeData = getFilteredData(); const stats = computeOceanStats(activeData); // Left: survey count 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" ); // Right: selected metric 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%) of any ocean basin 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 — padded scale + smart label anchors // ════════════════════════════════════════ 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(); // ← 10px padding each side so 1980 and 2020 never clip 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); // Bars 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); // Tick marks every 5 years 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); // Year labels — smart anchor so first/last never clip 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); // Brush 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); } // ════════════════════════════════════════ // BUTTON STYLING // ════════════════════════════════════════ 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"; drawBars(); }); // ════════════════════════════════════════ // INIT // ════════════════════════════════════════ drawBrush(); drawBars(); return html` ${tooltip}

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

`; }31:[{"id":"8f601a6aca2589e1b44a033c20bed22ab342d2b0dd246104903dc8a9c8f5627ddf37fb73bca700b5849ff2623e4fa61353b8ed9c5d39d60425912678091d8250","href":"https://static.observableusercontent.com/files/8f601a6aca2589e1b44a033c20bed22ab342d2b0dd246104903dc8a9c8f5627ddf37fb73bca700b5849ff2623e4fa61353b8ed9c5d39d60425912678091d8250","name":"global_bleaching_environmental.csv","type":"text/csv","lastModified":1775675479084.158,"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":true,"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":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"countries = topojson.feature(world110m, world110m.objects.countries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}