Species Trends by LME

Instructions:

1. Click on any LME region on the map to view species trends.
2. Appearing species and reappearing species will be displayed in tables below the map.

d3 = require("d3@7")
L = require("leaflet@1.9.4")

// Add Leaflet CSS
html`<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />`

lme_geojson = d3.json("data/lme_polygons.geojson")

// Load species data from emtrends repository
appearing_species_data = d3.csv("https://raw.githubusercontent.com/guardias-eu/emtrends/main/data/output/appearing_species.csv")
reappearing_species_data = d3.csv("https://raw.githubusercontent.com/guardias-eu/emtrends/main/data/output/reappearing_species.csv")

// Mutable selected LME state
mutable selected_lme_id = null

Species Trends Dashboard

Map – Click on a region to view species trends

// Create map container
map_container = html`<div id="trends-map" style="height: 500px; width: 100%;"></div>`

// Initialise Leaflet map centred on European seas
map = {
  const m = L.map(map_container).setView([55.0, 15.0], 4);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors"
  }).addTo(m);

  return m;
}

// Feature group that holds the LME polygons
lme_layer = L.featureGroup().addTo(map)

// Add LME polygons to the map
add_lme_polygons = {
  lme_layer.clearLayers();

  lme_geojson.features.forEach(feature => {
    const lme_id   = feature.properties.lme_id;
    const lme_name = feature.properties.lme_name;

    const style = {
      fillColor:   selected_lme_id === lme_id ? "#3388ff" : "#cccccc",
      weight:      2,
      opacity:     1,
      color:       selected_lme_id === lme_id ? "#0066cc" : "#999999",
      fillOpacity: selected_lme_id === lme_id ? 0.8 : 0.3
    };

    const layer = L.geoJSON(feature, {
      style,
      onEachFeature: (feat, lyr) => {
        // Tooltip showing LME name
        lyr.bindTooltip(lme_name, { permanent: false, direction: "center" });

        // Click handler to select LME
        lyr.on("click", () => {
          mutable selected_lme_id = lme_id;
          // Update styles for all layers
          lme_layer.eachLayer(l => {
            const fid = l.feature.properties.lme_id;
            l.setStyle({
              fillColor:   fid === lme_id ? "#3388ff" : "#cccccc",
              color:       fid === lme_id ? "#0066cc" : "#999999",
              fillOpacity: fid === lme_id ? 0.8 : 0.3
            });
          });
        });

        // Hover effects
        lyr.on("mouseover", () => {
          if (selected_lme_id !== lme_id) {
            lyr.setStyle({ fillOpacity: 0.5 });
          }
        });
        lyr.on("mouseout", () => {
          if (selected_lme_id !== lme_id) {
            lyr.setStyle({ fillOpacity: 0.3 });
          }
        });
      }
    });

    layer.addTo(lme_layer);
  });
}

filtered_appearing = selected_lme_id !== null
  ? appearing_species_data.filter(d => +d.lme_id === selected_lme_id)
  : []

filtered_reappearing = selected_lme_id !== null
  ? reappearing_species_data.filter(d => +d.lme_id === selected_lme_id)
  : []

// Get selected LME name
selected_lme_name = selected_lme_id !== null
  ? lme_geojson.features.find(f => f.properties.lme_id === selected_lme_id)?.properties.lme_name || "Unknown"
  : null

Appearing Species

selected_lme_id !== null ? html`<h4 style="margin-top: 0;">${selected_lme_name}</h4>` : html`<p style="text-align: center; color: #999; padding: 20px;">Click on a region to view species trends</p>`

// Display appearing species table
appearing_table = selected_lme_id !== null && filtered_appearing.length > 0
  ? Inputs.table(filtered_appearing, {
      columns: ["specieskey", "species", "first_year"],
      header: {
        specieskey: "Species Key",
        species: "Species",
        first_year: "First Year"
      },
      width: {
        specieskey: 150,
        species: 350,
        first_year: 150
      },
      sort: "first_year",
      reverse: true
    })
  : selected_lme_id !== null
    ? html`<p style="text-align: center; color: #999; padding: 20px;">No appearing species data available for this LME</p>`
    : html``

Reappearing Species

selected_lme_id !== null ? html`<h4 style="margin-top: 0;">${selected_lme_name}</h4>` : html``

// Display reappearing species table
reappearing_table = selected_lme_id !== null && filtered_reappearing.length > 0
  ? Inputs.table(filtered_reappearing, {
      columns: ["specieskey", "species", "reappearance_year", "years_without_occurrences"],
      header: {
        specieskey: "Species Key",
        species: "Species",
        reappearance_year: "Reappearance Year",
        years_without_occurrences: "Years Without Occurrences"
      },
      width: {
        specieskey: 150,
        species: 250,
        reappearance_year: 150,
        years_without_occurrences: 200
      },
      sort: "reappearance_year",
      reverse: true
    })
  : selected_lme_id !== null
    ? html`<p style="text-align: center; color: #999; padding: 20px;">No reappearing species data available for this LME</p>`
    : html``

---

Funding: This dashboard is being developed in the framework of the GuardIAS project. GuardIAS receives funding from the European Union’s Horizon Europe Research and Innovation Programme (ID No 101181413).