Species Exposure Dashboard

Species exposure atlas loading, please be patient.

Species Exposure Dashboard

This dashboard tracks how much of each species' geographic range has been exposed to extreme climate events — temperatures and precipitation outside the historical baseline — using ERA5 reanalysis data from 1940 to the present.

What you can explore

Species Explorer — select any species to view its historical exposure time series, a polar summary of which climate variables have affected it most, and a map of its geographic range.
Hotspot Explorer — click any grid cell on the global map to see all species present there and how many are currently exposed to extreme conditions.
Shiny app — for more flexible filtering and custom data exploration, download and run the full interactive Shiny app from github.com/SpeciesExposure/exposureApp.

Climate variables tracked

Eight ERA5-derived extremes, covering both tails of temperature and precipitation at annual and seasonal timescales:

High temperature (annual)
Low temperature (annual)
High temperature (warmest 3 months)
Low temperature (coldest 3 months)
High precipitation (annual)
Low precipitation (annual)
High precipitation (wettest 3 months)
Low precipitation (driest 3 months)

Data sources

ERA5 reanalysis (ECMWF) — climate variables on a 0.25° global grid
IUCN Red List — species range polygons and conservation status

Source code: https://github.com/SpeciesExposure

2,662

species with >25% range exposed

years of ERA5 data (1941–2025)

climate extreme variables

0.25°

spatial resolution (~28 km)

{
  const meta = transpose(species_meta_data).filter(row => row.Species === selected_species)[0];
  if (!meta) return html`<div></div>`;
  const sp = (meta.Species || "").replace(/_/g, " ");
  return html`<div style="padding:6px 16px;display:flex;align-items:center;gap:24px;">
    <h4 style="margin:0;font-style:italic;">${sp}</h4>
    <span style="color:#555;">Order: <strong>${meta.Order ?? "\u2014"}</strong></span>
    <span style="color:#555;">Family: <strong>${meta.Family ?? "\u2014"}</strong></span>
    <span style="color:#555;">IUCN: <strong>${meta["IUCN status"] ?? "\u2014"}</strong></span>
  </div>`;
}

{
  const sp  = encodeURIComponent(selected_species);

  // Outer wrapper holds the image + expand button
  const outer = DOM.element("div");
  outer.style.cssText = "position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;";

  const img = DOM.element("img");
  img.src = `${figure_base_url}/species_figs/${sp}_polar.png`;
  img.style.cssText = "max-width:100%;max-height:160px;object-fit:contain;display:block;";
  img.onerror = () => {
    const msg = DOM.element("p");
    msg.textContent = "Polar figure not yet built \u2014 run the build step.";
    msg.style.cssText = "color:#999;font-size:12px;text-align:center;margin-top:2em;";
    img.replaceWith(msg);
  };
  outer.appendChild(img);

  // Expand button — opens a modal lightbox with the full-size image
  const btn = DOM.element("button");
  btn.title = "Expand";
  btn.innerHTML = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`;
  btn.style.cssText = "position:absolute;top:4px;right:4px;padding:3px 5px;background:rgba(255,255,255,0.88);border:1px solid #bbb;border-radius:4px;cursor:pointer;line-height:1;color:#555;z-index:10;";
  btn.addEventListener("click", () => {
    const overlay = DOM.element("div");
    overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;";
    const panel = DOM.element("div");
    panel.style.cssText = "background:#fff;border-radius:8px;padding:16px;box-shadow:0 6px 32px rgba(0,0,0,0.6);cursor:default;";
    panel.addEventListener("click", e => e.stopPropagation());
    const full = DOM.element("img");
    full.src = img.src;
    full.style.cssText = "max-width:calc(90vw - 32px);max-height:calc(90vh - 32px);object-fit:contain;display:block;";
    panel.appendChild(full);
    overlay.appendChild(panel);
    const close = () => { if (document.body.contains(overlay)) document.body.removeChild(overlay); };
    overlay.addEventListener("click", close);
    document.addEventListener("keydown", function esc(e) {
      if (e.key === "Escape") { close(); document.removeEventListener("keydown", esc); }
    });
    document.body.appendChild(overlay);
  });
  outer.appendChild(btn);

  yield outer;
  // After two rAF ticks, measure the card and update the image max-height.
  await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
  const _card = outer.closest('.bslib-card');
  const _hdr  = _card?.querySelector('.card-header');
  const _availH = (_card?.getBoundingClientRect().height ?? 0)
                - (_hdr?.getBoundingClientRect().height  ?? 0);
  if (_availH > 20) img.style.maxHeight = _availH + 'px';
}

species_range_map = {
  // Outer wrapper: initial height is a fallback; a ResizeObserver resizes it
  // to fill the card body after yield (.observablehq parent has no height).
  const outer = DOM.element("div");
  outer.style.cssText = "width:100%;height:280px;";
  const container = DOM.element("div");
  container.style.cssText = "width:100%;height:100%;";
  outer.appendChild(container);
  yield outer;

  // Size outer to fill the card body (wait two rAF ticks for layout to settle)
  await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
  const _card = outer.closest('.bslib-card');
  const _hdr  = _card?.querySelector('.card-header');
  const _availH = (_card?.getBoundingClientRect().height ?? 0)
                - (_hdr?.getBoundingClientRect().height  ?? 0);
  if (_availH > 50) outer.style.height = _availH + 'px';

  let map = null;

  // IUCN terms of use prohibit redistribution of reptile and amphibian range data.
  const RESTRICTED_ORDERS = new Set([
    "SQUAMATA","TESTUDINES","CROCODYLIA","RHYNCHOCEPHALIA", // reptiles
    "ANURA","CAUDATA","GYMNOPHIONA"                         // amphibians
  ]);
  const spMeta = transpose(species_meta_data).filter(row => row.Species === selected_species)[0];
  if (RESTRICTED_ORDERS.has(spMeta?.Order)) {
    const msg = DOM.element("p");
    msg.innerHTML = `Sorry, the IUCN data use agreement does not permit showing the range of this species &mdash; see <a href="https://www.iucnredlist.org/terms/terms-of-use" target="_blank" rel="noopener">IUCN terms of use (§ No Reposting or Redistribution)</a>.`;
    msg.style.cssText = "color:#666;font-size:13px;text-align:center;margin-top:3em;padding:0 1.5em;line-height:1.5;";
    container.appendChild(msg);
    return;
  }

  // Use the Leaflet already loaded by the R leaflet package (site_libs/leaflet-1.3.1).
  // Loading a separate CDN copy would overwrite window.L and break the Hotspot
  // Explorer's addProviderTiles call.
  const L = window.L;

  const sp = encodeURIComponent(selected_species);
  let mapData;
  try {
    const resp = await fetch(`data/species_maps/${sp}_map.json`);
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
    mapData = await resp.json();
  } catch(e) {
    const msg = DOM.element("p");
    msg.textContent = "Range map not yet built \u2014 run the build step.";
    msg.style.cssText = "color:#999;font-size:12px;text-align:center;margin-top:2em;";
    container.appendChild(msg);
    return;
  }

  map = L.map(container, { preferCanvas: true });
  L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}", {
    attribution: "Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ",
    maxZoom: 19
  }).addTo(map);

  const renderer = L.canvas({ padding: 0.5 });
  const bounds = [];

  // Bit i matches data/species_maps/var_bits.json (hotspot VAR_COLORS).
  // A mask of 0 is range with no recorded exposure.
  let varBits = [];
  try {
    const bitResp = await fetch("data/species_maps/var_bits.json");
    if (bitResp.ok) varBits = await bitResp.json();
  } catch (e) {
    varBits = [];
  }
  const RANGE_FILL = "#e8e8e8";

  const usedBits = new Set();
  for (const [, mask] of mapData) {
    varBits.forEach((_, i) => {
      if (mask & (1 << i)) usedBits.add(i);
    });
  }

  for (const [c, mask] of mapData) {
    const col = (c - 1) % rast_ncols + 1;
    const row = Math.floor((c - 1) / rast_ncols) + 1;
    const lon = rast_xmin + (col - 0.5) * rast_xres;
    const lat = rast_ymax - (row - 0.5) * rast_yres;
    const half_x = rast_xres / 2;
    const half_y = rast_yres / 2;
    const south = lat - half_y;
    const north = lat + half_y;
    const west = lon - half_x;
    const east = lon + half_x;
    const exposed = varBits.filter((_, i) => mask & (1 << i));
    if (!exposed.length) {
      L.rectangle(
        [[south, west], [north, east]],
        { fillColor: RANGE_FILL, color: "none", weight: 0, fillOpacity: 0.4, renderer }
      ).addTo(map);
    } else {
      // One hotspot colour per variable. Several variables split the cell
      // into horizontal bands instead of blending into a new colour.
      const band = (north - south) / exposed.length;
      exposed.forEach((bit, i) => {
        const top = north - i * band;
        L.rectangle(
          [[top - band, west], [top, east]],
          { fillColor: bit.color, color: "none", weight: 0, fillOpacity: 0.55, renderer }
        ).addTo(map);
      });
    }
    bounds.push([lat, lon]);
  }

  const legend = L.control({ position: "bottomleft" });
  legend.onAdd = () => {
    const div = L.DomUtil.create("div", "species-range-legend");
    div.style.cssText = "background:rgba(255,255,255,0.94);padding:6px 8px;border-radius:4px;font:11px/1.35 sans-serif;color:#222;max-width:210px;";
    const row = (color, label) =>
      `<div style="display:flex;gap:6px;align-items:flex-start;margin:2px 0;"><span style="flex:0 0 12px;height:12px;margin-top:2px;background:${color};border:1px solid rgba(0,0,0,0.15);"></span><span>${label}</span></div>`;
    div.innerHTML = row(RANGE_FILL, "Range, no recorded exposure") +
      varBits.filter((_, i) => usedBits.has(i)).map(bit => row(bit.color, bit.label)).join("");
    L.DomEvent.disableClickPropagation(div);
    return div;
  };
  legend.addTo(map);

  if (bounds.length)
    map.fitBounds(L.latLngBounds(bounds), { padding: [10, 10], maxZoom: 5 });

  // Sync Leaflet to the resized container (height was set after map init)
  map.invalidateSize();

  // Add minimap using the same plugin bundled by the R leaflet package.
  if (!window.L?.Control?.MiniMap) {
    if (!document.querySelector('link[href*="Control.MiniMap"]')) {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'site_libs/leaflet-minimap-3.3.1/Control.MiniMap.min.css';
      document.head.appendChild(link);
    }
    await new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.src = 'site_libs/leaflet-minimap-3.3.1/Control.MiniMap.min.js';
      s.onload = resolve; s.onerror = reject;
      document.head.appendChild(s);
    });
  }
  new L.Control.MiniMap(
    L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}", { maxZoom: 19 }),
    { toggleDisplay: true, position: "topright", minimized: false }
  ).addTo(map);

  invalidation.then(() => map.remove());
}

{
  const sp     = encodeURIComponent(selected_species);
  const panels = transpose(panel_matrix);
  const slugToLabel = new Map(panels.map(p => [p.slug, `${p.family} \u2014 ${p.agg}`]));

  const wrapper = DOM.element("div");
  wrapper.style.cssText = "display:flex;flex-direction:column;width:100%;";

  const stack = DOM.element("div");
  stack.className = "panel-figure-stack";
  wrapper.appendChild(stack);

  if (!selected_panels || selected_panels.length === 0) {
    const msg = DOM.element("p");
    msg.textContent = "Select one or more figures from the sidebar.";
    msg.style.cssText = "color:#999;font-size:12px;text-align:center;margin:1.5em 0;";
    stack.appendChild(msg);
  }

  // Lightbox helper (modal full-size image on click)
  const openLightbox = (src, alt) => {
    const overlay = DOM.element("div");
    overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px;";
    const big = DOM.element("img");
    big.src = src; big.alt = alt;
    big.style.cssText = "max-width:95vw;max-height:90vh;background:#fff;padding:12px;border-radius:8px;box-shadow:0 6px 32px rgba(0,0,0,0.6);";
    overlay.appendChild(big);
    overlay.addEventListener("click", () => overlay.remove());
    document.body.appendChild(overlay);
  };

  for (const slug of selected_panels) {
    const figure = DOM.element("figure");
    figure.style.cssText = "margin:0;width:100%;";

    const img = DOM.element("img");
    const src = `${figure_base_url}/species_figs/${sp}__${slug}.png`;
    img.src = src;
    img.alt = `${selected_species.replace(/_/g, " ")} \u2014 ${slugToLabel.get(slug) ?? slug}`;
    img.title = "Click to enlarge";
    img.style.cssText = "max-width:100%;height:auto;display:block;margin:0 auto;cursor:zoom-in;";
    img.onerror = () => {
      const msg = DOM.element("p");
      msg.textContent = `No figure built for ${slugToLabel.get(slug) ?? slug}.`;
      msg.style.cssText = "color:#999;font-size:12px;text-align:center;margin:1em 0;";
      img.replaceWith(msg);
    };
    img.addEventListener("click", () => openLightbox(src, img.alt));

    figure.appendChild(img);
    stack.appendChild(figure);
  }

  const cap = DOM.element("div");
  cap.style.cssText = "flex:0 0 auto;font-size:0.78rem;line-height:1.55;color:#444;padding:0.6rem 1rem 0.4rem;border-top:1px solid #dee2e6;margin-top:4px;";
  cap.innerHTML = `<strong>Figure.</strong>
Per-cell climate exposure across the geographic range of the selected species, 1941\u20132025.
Each selected panel shows one ERA5-derived variable (temperature or precipitation) at one temporal aggregation (annual or warmest/coldest 3-month season).
<strong>Left sub-panel \u2014 Value \u00d7 time heatmap.</strong>
Year (x-axis) vs. the per-cell variable value (y-axis); tile fill encodes the percentile of that value under the historical empirical CDF (1941\u20132022), pooled across all range cells.
Translucent lines trace year-to-year trajectories for a random subsample of range cells; segments are coloured when the cell\u2019s value exceeds the species-level upper threshold (99th-of-99th-percentiles) or falls below the lower threshold (1st-of-1st-percentiles).
Dashed horizontal lines mark these thresholds.
<strong>Right sub-panel \u2014 Kernel density estimates.</strong>
Normalized KDEs of the variable, pooled across range cells, for the historical baseline period (grey) and the most recent year (purple); vertical dashed lines repeat the exposure thresholds.`;
  wrapper.appendChild(cap);

  return wrapper;
}

Species Explorer

Select a species to see how much of its range has been exposed to extreme climate events through time.

viewof selected_species = {
  // Load Tom Select CSS once (can't use require() for CSS)
  if (!document.querySelector('link[href*="tom-select"]')) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.bootstrap5.min.css';
    document.head.appendChild(link);
  }
  // OJS require() wraps CommonJS exports as { default: ... }
  const TomSelectModule = await require("https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js");
  const TomSelect = TomSelectModule.default ?? TomSelectModule;

  const metaRows = transpose(species_meta_data);
  const metadataBySpecies = new Map(metaRows.map(row => [row.Species, row]));
  const normalizeTaxon = value => value == null || String(value).trim() === ""
    ? "Unknown"
    : String(value);
  const formatPct = (prop) => {
    if (prop == null || Number.isNaN(prop)) return "\u2014";
    const rounded = Math.round(prop * 10) / 10;
    const text = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1);
    return `${text}%`;
  };

  const asNumber = (raw) => {
    if (raw == null || raw === "" || Number.isNaN(Number(raw))) return null;
    return Number(raw);
  };
  const formatCells = (n) => {
    if (n == null || Number.isNaN(n)) return "\u2014";
    const cells = Math.round(n);
    return `${cells} ${cells === 1 ? "cell" : "cells"}`;
  };

  const catalogue = species_list.map(species => {
    const metadata = metadataBySpecies.get(species) ?? {};
    return {
      value: species,
      text: species.replace(/_/g, " "),
      order: normalizeTaxon(metadata.Order),
      family: normalizeTaxon(metadata.Family),
      prop: asNumber(metadata.prop_range),
      rangeCells: asNumber(metadata.range_cells)
    };
  });
  const knownSizes = catalogue
    .map(row => row.rangeCells)
    .filter(size => size != null && Number.isFinite(size));
  const sizeFloor = knownSizes.length ? Math.min(...knownSizes) : 1;
  const sizeCeil = knownSizes.length ? Math.max(...knownSizes) : sizeFloor;

  const makeLabel = (text, marginTop = "0") => {
    const label = document.createElement("label");
    label.textContent = text;
    label.style.cssText = `display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;margin:${marginTop} 0 4px;color:#495057;`;
    return label;
  };
  const addChoice = (select, value, text) => {
    const option = document.createElement("option");
    option.value = value;
    option.textContent = text;
    select.appendChild(option);
  };

  // Wrapper that OJS viewof reads .value from and listens to for input events
  const wrapper = document.createElement("div");
  const orderSelect = document.createElement("select");
  const familySelect = document.createElement("select");
  const sortSelect = document.createElement("select");
  const speciesSelect = document.createElement("select");
  orderSelect.style.width = "100%";
  familySelect.style.width = "100%";
  sortSelect.style.width = "100%";

  addChoice(orderSelect, "", "All orders");
  addChoice(familySelect, "", "All families");
  addChoice(sortSelect, "alpha", "Alphabetical");
  addChoice(sortSelect, "prop", "Proportion of range exposed");

  const makeDualSlider = ({ lo, hi, step, format, ariaMin, ariaMax }) => {
    const box = document.createElement("div");
    box.className = "dual-range";
    const track = document.createElement("div");
    track.className = "dual-range-track";
    const fill = document.createElement("div");
    fill.className = "dual-range-fill";
    const minInput = document.createElement("input");
    const maxInput = document.createElement("input");
    for (const input of [minInput, maxInput]) {
      input.type = "range";
      input.min = String(lo);
      input.max = String(hi);
      input.step = String(step);
    }
    minInput.value = String(lo);
    maxInput.value = String(hi);
    minInput.setAttribute("aria-label", ariaMin);
    maxInput.setAttribute("aria-label", ariaMax);
    box.append(track, fill, minInput, maxInput);
    const readout = document.createElement("div");
    readout.className = "dual-range-readout";

    const bounds = () => ({
      min: Number(minInput.value),
      max: Number(maxInput.value)
    });
    const update = (source) => {
      let min = Number(minInput.value);
      let max = Number(maxInput.value);
      if (min > max) {
        if (source === minInput) {
          max = min;
          maxInput.value = String(max);
        } else {
          min = max;
          minInput.value = String(min);
        }
      }
      const span = hi - lo;
      const left = span === 0 ? 0 : (min - lo) / span * 100;
      const width = span === 0 ? 100 : (max - min) / span * 100;
      fill.style.left = `${left}%`;
      fill.style.width = `${width}%`;
      readout.textContent = format(min, max);
      const nearEnd = span === 0 || min >= max - Math.max(span * 0.05, step);
      minInput.style.zIndex = nearEnd ? "5" : "3";
      maxInput.style.zIndex = "4";
    };
    const includes = (value) => {
      const { min, max } = bounds();
      if (value == null || Number.isNaN(value)) return min <= lo && max >= hi;
      return value >= min && value <= max;
    };
    return { box, readout, minInput, maxInput, update, includes };
  };

  const exposureSlider = makeDualSlider({
    lo: 0,
    hi: 100,
    step: 1,
    format: (min, max) => `${min}% \u2013 ${max}%`,
    ariaMin: "Minimum proportion of range exposed",
    ariaMax: "Maximum proportion of range exposed"
  });
  const sizeSlider = makeDualSlider({
    lo: sizeFloor,
    hi: sizeCeil,
    step: 1,
    format: (min, max) => `${formatCells(min)} \u2013 ${formatCells(max)}`,
    ariaMin: "Minimum range size in cells",
    ariaMax: "Maximum range size in cells"
  });

  const rangeHint = document.createElement("div");
  rangeHint.className = "dual-range-readout";
  rangeHint.textContent = "Largest share of the range exposed to one climate variable.";
  const sizeHint = document.createElement("div");
  sizeHint.className = "dual-range-readout";
  sizeHint.textContent = "Number of grid cells in the geographic range.";
  const speciesCount = document.createElement("div");
  speciesCount.className = "species-count";

  wrapper.appendChild(makeLabel("Order"));
  wrapper.appendChild(orderSelect);
  wrapper.appendChild(makeLabel("Family", "8px"));
  wrapper.appendChild(familySelect);
  wrapper.appendChild(makeLabel("Proportion of range exposed", "8px"));
  wrapper.appendChild(exposureSlider.box);
  wrapper.appendChild(exposureSlider.readout);
  wrapper.appendChild(rangeHint);
  wrapper.appendChild(makeLabel("Range size", "8px"));
  wrapper.appendChild(sizeSlider.box);
  wrapper.appendChild(sizeSlider.readout);
  wrapper.appendChild(sizeHint);
  wrapper.appendChild(makeLabel("Sort", "8px"));
  wrapper.appendChild(sortSelect);
  wrapper.appendChild(makeLabel("Species", "8px"));
  wrapper.appendChild(speciesSelect);
  wrapper.appendChild(speciesCount);
  Object.defineProperty(wrapper, "value", { get: () => speciesSelect.value });
  yield wrapper;

  const speciesControl = new TomSelect(speciesSelect, {
    valueField: "value",
    labelField: "text",
    searchField: ["text"],
    optgroupField: "order",
    optgroupValueField: "value",
    optgroupLabelField: "label",
    lockOptgroupOrder: true,
    maxOptions: 100,
    placeholder: "Type to search species...",
    dropdownParent: "body",
    render: {
      option: (data, escape) => `<div style="display:flex;justify-content:space-between;gap:12px;">
          <span>${escape(data.text)}</span>
          <span style="color:#6c757d;font-variant-numeric:tabular-nums;">${formatPct(data.prop)} \u00b7 ${formatCells(data.rangeCells)}</span>
        </div>`,
      item: (data, escape) => `<div>${escape(data.text)}</div>`,
      no_results: () => '<div class="no-results">No matching species</div>'
    },
    onChange: () => wrapper.dispatchEvent(new Event("input", { bubbles: true }))
  });

  const passesFilters = (row) =>
    exposureSlider.includes(row.prop) && sizeSlider.includes(row.rangeCells);

  const rebuildOrders = () => {
    const previous = orderSelect.value;
    const orders = [...new Set(catalogue.filter(passesFilters).map(row => row.order))]
      .sort((a, b) => a.localeCompare(b));
    orderSelect.replaceChildren();
    addChoice(orderSelect, "", "All orders");
    orders.forEach(order => addChoice(orderSelect, order, order));
    orderSelect.value = orders.includes(previous) ? previous : "";
  };

  const rebuildFamilies = () => {
    const selectedOrder = orderSelect.value;
    const previousFamily = familySelect.value;
    const families = new Map();
    for (const row of catalogue) {
      if (!passesFilters(row)) continue;
      if (selectedOrder && row.order !== selectedOrder) continue;
      const key = `${row.order}\u001f${row.family}`;
      const label = selectedOrder ? row.family : `${row.family} — ${row.order}`;
      families.set(key, label);
    }

    familySelect.replaceChildren();
    addChoice(familySelect, "", "All families");
    [...families.entries()]
      .sort(([, a], [, b]) => a.localeCompare(b))
      .forEach(([value, label]) => addChoice(familySelect, value, label));
    familySelect.value = families.has(previousFamily) ? previousFamily : "";
  };

  const rebuildSpecies = () => {
    const selectedOrder = orderSelect.value;
    const selectedFamily = familySelect.value;
    const sortByProp = sortSelect.value === "prop";
    const previousSpecies = speciesControl.getValue();
    const filtered = catalogue.filter(row => {
      const familyKey = `${row.order}\u001f${row.family}`;
      return passesFilters(row) &&
        (!selectedOrder || row.order === selectedOrder) &&
        (!selectedFamily || familyKey === selectedFamily);
    });
    const ranked = sortByProp
      ? [...filtered].sort((a, b) => (b.prop ?? -1) - (a.prop ?? -1) || a.text.localeCompare(b.text))
      : filtered;

    speciesControl.settings.sortField = sortByProp
      ? [{ field: "$score", direction: "desc" }, { field: "prop", direction: "desc" }, { field: "text", direction: "asc" }]
      : [{ field: "$score", direction: "desc" }, { field: "text", direction: "asc" }];

    speciesControl.clear(true);
    speciesControl.clearOptions();
    speciesControl.clearOptionGroups();
    if (!sortByProp) {
      [...new Set(ranked.map(row => row.order))]
        .sort((a, b) => a.localeCompare(b))
        .forEach(order => speciesControl.addOptionGroup(order, { value: order, label: order }));
      speciesControl.addOptions(ranked);
    } else {
      // Flat list so the exposure ranking is not broken up by taxonomic order.
      speciesControl.addOptions(ranked.map(({ order, ...row }) => row));
    }

    const nextSpecies = ranked.some(row => row.value === previousSpecies)
      ? previousSpecies
      : ranked[0]?.value ?? "";
    speciesControl.setValue(nextSpecies, true);
    speciesControl.refreshOptions(false);
    speciesCount.textContent = filtered.length
      ? `${filtered.length} species`
      : "No species match these filters";
    if (nextSpecies !== previousSpecies) {
      wrapper.dispatchEvent(new Event("input", { bubbles: true }));
    }
  };

  let filterTimer = 0;
  const applyFilters = (slider, source) => {
    slider.update(source);
    clearTimeout(filterTimer);
    filterTimer = setTimeout(() => {
      rebuildOrders();
      rebuildFamilies();
      rebuildSpecies();
    }, 60);
  };

  orderSelect.addEventListener("change", () => {
    rebuildFamilies();
    rebuildSpecies();
  });
  familySelect.addEventListener("change", rebuildSpecies);
  sortSelect.addEventListener("change", rebuildSpecies);
  exposureSlider.minInput.addEventListener("input", () => applyFilters(exposureSlider, exposureSlider.minInput));
  exposureSlider.maxInput.addEventListener("input", () => applyFilters(exposureSlider, exposureSlider.maxInput));
  sizeSlider.minInput.addEventListener("input", () => applyFilters(sizeSlider, sizeSlider.minInput));
  sizeSlider.maxInput.addEventListener("input", () => applyFilters(sizeSlider, sizeSlider.maxInput));

  exposureSlider.update();
  sizeSlider.update();
  rebuildOrders();
  rebuildFamilies();
  rebuildSpecies();

  invalidation.then(() => speciesControl.destroy());
}

// Reusable factory for the 2 (families) x 3 (aggregations) panel-selection
// checkbox grid. Returns a DOM element that satisfies the viewof contract
// (exposes `.value` as the array of selected slug strings and dispatches
// `input` events on change).
makePanelCheckboxGrid = function({ defaults = [], label = "Figures" } = {}) {
  const rows = transpose(panel_matrix);
  const families = ["Temperature", "Precipitation"];
  const aggs     = ["Seasonal max", "Annual", "Seasonal min"];
  const defaultSet = new Set(defaults);

  const wrapper = document.createElement("div");
  const lbl = document.createElement("label");
  lbl.textContent = label;
  lbl.style.cssText = "display:block;font-size:0.75rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;margin:8px 0 4px;color:#495057;";
  wrapper.appendChild(lbl);

  const table = document.createElement("table");
  table.className = "panel-checkbox-grid";

  // Header row
  const thead = document.createElement("thead");
  const hr = document.createElement("tr");
  hr.appendChild(document.createElement("th"));
  for (const a of aggs) {
    const th = document.createElement("th");
    th.textContent = a;
    hr.appendChild(th);
  }
  thead.appendChild(hr);
  table.appendChild(thead);

  // Body rows
  const tbody = document.createElement("tbody");
  const checkboxes = [];
  for (const fam of families) {
    const tr = document.createElement("tr");
    const rh = document.createElement("th");
    rh.scope = "row";
    rh.textContent = fam;
    tr.appendChild(rh);
    for (const a of aggs) {
      const td = document.createElement("td");
      td.setAttribute("data-agg", a);
      const cell = rows.find(r => r.family === fam && r.agg === a);
      if (cell) {
        const cb = document.createElement("input");
        cb.type = "checkbox";
        cb.value = cell.slug;
        cb.checked = defaultSet.has(cell.slug);
        cb.setAttribute("aria-label", `${fam} ${a}`);
        td.appendChild(cb);
        checkboxes.push(cb);
      }
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  table.appendChild(tbody);
  wrapper.appendChild(table);

  Object.defineProperty(wrapper, "value", {
    get: () => checkboxes.filter(c => c.checked).map(c => c.value)
  });
  for (const cb of checkboxes) {
    cb.addEventListener("change", () => {
      wrapper.dispatchEvent(new Event("input", { bubbles: true }));
    });
  }
  return wrapper;
}

viewof selected_panels = makePanelCheckboxGrid({
  defaults: ["temperature__annual"],
  label: "Figures"
})

Data: historical observations up to 2025

// Listen for leaflet_mapclick events dispatched by the onRender handler.
// Converts lat/lng to a terra cell index (row-major, 1-indexed).
clicked_cell = Generators.observe(notify => {
  function handler(e) {
    const { lat, lng } = e.detail;
    if (e.detail.cell) {
      notify(String(e.detail.cell));
      return;
    }
    if (lng < rast_xmin || lng > (rast_xmin + rast_ncols * rast_xres) ||
        lat > rast_ymax || lat <= (rast_ymax - rast_nrows * rast_yres)) {
      return; // outside raster extent — ignore
    }
    const col  = Math.floor((lng - rast_xmin) / rast_xres) + 1;
    const row  = Math.floor((rast_ymax - lat)  / rast_yres) + 1;
    const cell = (row - 1) * rast_ncols + col;
    notify(String(cell));
  }
  window.addEventListener('leaflet_mapclick', handler);
  notify(""); // initial: nothing selected
  return () => window.removeEventListener('leaflet_mapclick', handler);
})

cell_trend_filtered = {
  if (clicked_cell === "") return [];
  const raw = transpose(cell_trend_data)
    .filter(d => d.cell === Number(clicked_cell))
    .filter(d => hotspot_vars.includes(d.var));
  // Build lookup: "year|var" -> n_species_exposed
  const lookup = new Map(raw.map(d => [`${d.year}|${d.var}`, d.n_species_exposed]));
  // Cross-join recent years (>2010) × selected vars, filling missing with 0
  const allYears = years_list.map(Number).filter(y => y > 2010);
  const rows = [];
  for (const year of allYears) {
    for (const v of hotspot_vars) {
      rows.push({ year, var: v, n_species_exposed: lookup.get(`${year}|${v}`) ?? 0 });
    }
  }
  return rows;
}

{
  if (clicked_cell === "" || cell_trend_filtered.every(d => d.n_species_exposed === 0))
    return html`<p style="color:#888;font-style:italic">Click any location on the map to see which species are exposed there.</p>`;
  const c = Number(clicked_cell);
  const col = (c - 1) % rast_ncols + 1;
  const row = Math.floor((c - 1) / rast_ncols) + 1;
  const lonRaw = rast_xmin + (col - 0.5) * rast_xres;
  const latRaw = rast_ymax - (row - 0.5) * rast_yres;
  const lon = Math.abs(lonRaw).toFixed(2) + "\u00b0" + (lonRaw >= 0 ? "E" : "W");
  const lat = Math.abs(latRaw).toFixed(2) + "\u00b0" + (latRaw >= 0 ? "N" : "S");
  const colorDomain = hotspot_vars;
  const colorRange  = hotspot_vars.map(v => var_label_colors[v] ?? "#cccccc");
  const legendWidth = 210;
  const containerW  = document.querySelectorAll('#hotspot-explorer .bslib-card')[1]
                        ?.querySelector('.card-body')?.clientWidth ?? 800;
  const chartWidth  = Math.max(150, containerW - legendWidth - 26);
  const chart = Plot.plot({
        width: chartWidth,
        height: 175,
        marginTop: 8,
        marginBottom: 40,
        style: { fontSize: "12px" },
        fx: { label: "Year", tickFormat: d => d },
        x:  { axis: null },
        y:  { label: "↑ Species", grid: true },
        color: { domain: colorDomain, range: colorRange, legend: false },
        marks: [
          Plot.barY(cell_trend_filtered, {
            fx: d => String(d.year),
            x: "var",
            y: "n_species_exposed",
            fill: "var",
            tip: true
          }),
          Plot.ruleY([0])
        ]
      });
  const legendEl = html`<div style="font-size:11px;line-height:1.3;padding-top:8px">${
    colorDomain.map((v, i) => html`<div style="display:flex;align-items:center;gap:5px;margin-bottom:5px">
      <span style="display:inline-block;width:11px;height:11px;flex-shrink:0;background:${colorRange[i]}"></span>
      <span>${v}</span>
    </div>`)
  }</div>`;
  return html`<div style="display:flex;gap:8px;align-items:flex-start;overflow:hidden">
    <div style="flex-shrink:0">${chart}</div>
    <div style="flex-shrink:0;width:${legendWidth}px">${legendEl}</div>
  </div>`;
}

// Compute formatted lat/lon from clicked cell index
click_latlon = {
  if (clicked_cell === "") return "";
  const c = Number(clicked_cell);
  const col = (c - 1) % rast_ncols + 1;
  const row = Math.floor((c - 1) / rast_ncols) + 1;
  const lonRaw = rast_xmin + (col - 0.5) * rast_xres;
  const latRaw = rast_ymax - (row - 0.5) * rast_yres;
  const lon = Math.abs(lonRaw).toFixed(2) + "\u00b0" + (lonRaw >= 0 ? "E" : "W");
  const lat = Math.abs(latRaw).toFixed(2) + "\u00b0" + (latRaw >= 0 ? "N" : "S");
  return `${lat}, ${lon}`;
}

// Load the three small lookup files once (not re-fetched when year changes).
cell_species_lookups = Promise.all([
  fetch("data/cell_species/var_codes.json").then(r => r.json()),
  fetch("data/cell_species/redlist_codes.json").then(r => r.json()),
  fetch("data/cell_species/species_attrs.json").then(r => r.json()),
])

// Fetch the species exposure JSON for the selected year lazily.
// Only the current year's compact file is loaded; others are fetched on demand.
cell_species = {
  const raw = await fetch(`data/cell_species/species_${hotspot_year}.json`).then(r => r.json());
  const [varCodes, redlistCodes, spAttrs] = await cell_species_lookups;
  return raw.map(d => ({
    cell:            d.c,
    spName:          d.s,
    var:             varCodes[d.v],
    propExposed:     d.p,
    redlistCategory: redlistCodes[d.r] ?? "—",
    orderName:       spAttrs[d.s]?.o   ?? "—",
    familyName:      spAttrs[d.s]?.f   ?? "—"
  }));
}

cell_filtered = clicked_cell === ""
  ? []
  : Array.from(cell_species
      .filter(d => d.cell === Number(clicked_cell))
      .filter(d => hotspot_vars.includes(d.var))
      .filter(d => !hotspot_threatened_only || ["CR", "EN", "VU"].includes(d.redlistCategory))
      .reduce((bySpecies, row) => {
        const existing = bySpecies.get(row.spName);
        if (existing) {
          existing.variables.push(row.var);
          existing.maxPropExposed = Math.max(existing.maxPropExposed, row.propExposed ?? 0);
        } else {
          bySpecies.set(row.spName, {
            ...row,
            variables: [row.var],
            maxPropExposed: row.propExposed ?? 0
          });
        }
        return bySpecies;
      }, new Map())
      .values())
      .map(row => ({
        ...row,
        variables: hotspot_vars.filter(variable => row.variables.includes(variable)),
        propExposed: row.maxPropExposed
      }))

clicked_cell === ""
  ? html`<p style="color:#888;font-style:italic">Click any location on the map to see which species are exposed there.</p>`
  : html`<div>
    <h6 style="margin:0 0 6px">Species exposed in the selected grid cell in ${hotspot_year} (centre: ${click_latlon})</h6>
    ${cell_filtered.length === 0
      ? html`<p style="color:#888;font-style:italic">No species match the selected filters.</p>`
      : Inputs.table(
          cell_filtered.map(({ spName, variables, propExposed, orderName, familyName, redlistCategory }) => ({
            Species:           spName,
            "Exposed variables": variables.join("; "),
            "Max. range exposed": propExposed ? (propExposed * 100).toFixed(2) + "%" : "—",
            Order:             orderName   ?? "—",
            Family:            familyName  ?? "—",
            "IUCN status":     redlistCategory ?? "—"
          })),
          { width: "100%", sort: "Max. range exposed", reverse: true }
        )}
    </div>`

Hotspot Explorer

Click any cell on the map to see which species are exposed there.

viewof hotspot_year = Inputs.select(
  hotspot_years_list.map(String),
  { value: String(default_year), label: "Year" }
)

Select which variables appear in the pixel-level exposure time series below the map.

viewof selected_hotspot_panels = makePanelCheckboxGrid({
  defaults: ["temperature__seasonal_max", "temperature__annual", "temperature__seasonal_min",
             "precipitation__seasonal_max", "precipitation__annual", "precipitation__seasonal_min"],
  label: "Variables"
})

// Translate the selected panel slugs into the underlying variable *labels*
// that the hotspot cell-trend and cell-species filters expect.
// Keeps the existing `.includes(d.var)` filtering logic working unchanged.
hotspot_vars = (selected_hotspot_panels ?? [])
  .flatMap(slug => [panel_var_labels[slug]].flat().filter(Boolean))

viewof hotspot_threatened_only = Inputs.toggle({
  label: "Only threatened species (CR / EN / VU)",
  value: false
})