How does larval dispersal connect MPAs and OECMs in the seascape?
Marine connectivity can be visualized in many ways—from complex mathematical matrices and graph theory metrics to interactive spatial maps. Here, we’ll dive deeper into how these visual tools work together to tell a story about ocean life.
In this hypothetical case, we will see the connections between 3 Marine Protected Areas (MPAs) and 3 Other Effective area-based Conservation Measures (OECMs) using a simulated dispersal model. Adjust the biological parameters to see how ocean currents bind these conservation zones together!
Simulate Dispersal
Adjust the Pelagic Larval Duration (PLD) to simulate different species. Watch how the spatial network connections (lines) react on the map.
10d (Local)
60d (Widespread)
Species Reference (Click to apply)
* Scientific Note: These PLD values are general approximations derived from literature for illustrative purposes. In reality, larval duration and actual dispersal networks vary significantly depending on localized oceanographic currents, water temperature, seasonal spawning dynamics, and active larval swimming behavior.
Initializing simulation…
MPA
OECM
Larval Flow
Spatial Network Map
Hypothetical Spatial Layout
🤔 How to read this map: This visualization helps us instantly spot the physical pathways created by ocean currents.
- Watch the lines: Notice how they change when you adjust the slider? Thicker, darker lines mean a stronger flow of larvae between two locations. Do you see the connections bridging the strictly protected MPAs (teal) to the sustainably managed OECMs (orange)?
- Watch the circles: A larger circle means more larvae stay at their home reef (local retention). Short PLDs create large circles because babies settle quickly, while long PLDs shrink them as larvae drift far away.
Probability Matrix
The raw data driving the map. Rows show where larvae start (Source), columns show where they settle (Destination). Darker blues indicate a higher probability of connection. The diagonal line shows larvae staying at their home reef.
Avg Self-Recruitment
–%
Active Corridors
—
Strongest Link
—
🤔 How to read this matrix: Reading a matrix might look intimidating, but it’s just a grid of probabilities! Look at the row on the left (where larvae start) and follow it to a column (where they settle). A darker blue square means a higher chance of connection.
See the diagonal line of squares going from top-left to bottom-right? That represents larvae staying at their home reef (‘self-recruitment’). Try setting the slider to 10 days: this diagonal will turn dark blue because most babies stay home. Now slide it to 60 days: watch how that diagonal fades to white as larvae are swept away to other reefs!
See the diagonal line of squares going from top-left to bottom-right? That represents larvae staying at their home reef (‘self-recruitment’). Try setting the slider to 10 days: this diagonal will turn dark blue because most babies stay home. Now slide it to 60 days: watch how that diagonal fades to white as larvae are swept away to other reefs!
Graph Theory: Node Roles
Source / Sink Balance
Total probability export vs import
🤔 How to read this chart: Think of ‘Sources’ (light blue) as the givers and ‘Sinks’ (purple) as the receivers of the seascape. Which location has the tallest light blue bar? That’s your champion exporter! A healthy network needs strong sources to supply larvae to the sinks, ensuring vulnerable reefs can recover after storms or bleaching events.
Individual Profile
Select a location to view its specific graph theory metrics.
🤔 How to read this profile: This ‘spider web’ chart gives you a quick snapshot of a single location’s personality. Is the shape pulled heavily towards ‘Export Potential’? Then it’s a vital nursery! Try changing the species slider: what happens to a node’s ‘Network Bridge’ score when you switch from a Giant Clam to a Spiny Lobster?
💡 Spatial Planning Implications
MPA Seeding Efficiency
Analyzing how well MPA 1, MPA 2, and MPA 3 supply larvae to surrounding areas. At the currently selected PLD, we evaluate if these strictly protected zones are effectively acting as demographic sources for the broader network, exporting more larvae than they import.
OECM Connectivity Integration
Evaluating if OECM 1, OECM 2, and OECM 3 function as vital stepping stones. Ensuring fisheries in these areas are managed sustainably is crucial, especially if graph analysis shows they receive heavy larval subsidies from the upstream MPAs.
Dest: %{x}
Prob: %{z:.3f}’ }]; const layout = { margin: { t: 20, b: 60, l: 80, r: 10 }, xaxis: { tickangle: -45, title: { text: ‘Destination Node’, font: {size: 11, color: ‘#64748b’} } }, yaxis: { title: { text: ‘Source Node’, font: {size: 11, color: ‘#64748b’} }, autorange: ‘reversed’ }, paper_bgcolor: ‘transparent’, plot_bgcolor: ‘transparent’ }; Plotly.newPlot(‘matrixChart’, dataTrace, layout, {responsive: true, displayModeBar: false}); // 5. Update KPI Numbers const totalConnections = currentMatrix.flat().filter(x => x > 0.05).length; const avgRetention = (metrics.reduce((acc, m) => acc + m.retention, 0) / locations.length * 100).toFixed(1); let maxVal = 0; let maxLink = “–“; currentMatrix.forEach((row, r) => { row.forEach((val, c) => { if (r !== c && val > maxVal) { maxVal = val; maxLink = `${locations[r].name} → ${locations[c].name}`; } }); }); document.getElementById(‘metric-connections’).innerText = totalConnections; document.getElementById(‘metric-retention’).innerText = avgRetention + “%”; document.getElementById(‘metric-link’).innerText = maxLink; // 6. Update Bar Chart sourceSinkChart.data.datasets[0].data = metrics.map(m => m.exportVal); sourceSinkChart.data.datasets[1].data = metrics.map(m => m.importVal); sourceSinkChart.data.datasets[2].data = metrics.map(m => m.retention); sourceSinkChart.update(); // 7. Update Radar & Description updateRadar(selectedRegionIndex, metrics); } function updateRadar(index, metrics) { const m = metrics[index]; const loc = locations[index]; // Normalize for visual radar layout const data = [ m.retention, m.exportVal * 1.5, // Scaled for visibility m.importVal * 1.5, Math.min(1, m.betweenness) ]; radarChart.data.datasets[0].data = data; radarChart.data.datasets[0].label = loc.name; radarChart.data.datasets[0].borderColor = loc.color; radarChart.data.datasets[0].backgroundColor = loc.type === ‘MPA’ ? ‘rgba(20, 184, 166, 0.2)’ : ‘rgba(251, 146, 60, 0.2)’; radarChart.data.datasets[0].pointBackgroundColor = loc.color; radarChart.update(); // Dynamic Description tailored to MPA/OECM const roleDesc = document.getElementById(‘role-description’); let text = `
${loc.name} (${loc.type})
`;
if (m.exportVal > m.importVal + 0.05) {
text += `Functions strongly as a Source. `;
if(loc.type === ‘MPA’) text += `This means its strict protection is successfully subsidizing other areas with larvae.`;
else text += `Despite being an OECM, it’s vital for seeding the network.`;
}
else if (m.importVal > m.exportVal + 0.05) {
text += `Functions heavily as a Sink. `;
if(loc.type === ‘OECM’) text += `Its fisheries likely depend on larvae floating in from the MPAs.`;
else text += `As an MPA, it serves to protect imported populations.`;
}
else {
text += `A balanced node. `;
}
if (m.betweenness > 0.4) {
text += `High Betweenness: Critical stepping-stone. If degraded, network connectivity drops sharply.`; } roleDesc.innerHTML = text; // Highlight selected node on the map drawNetworkMap(); } // — 6. BOOTSTRAP — document.addEventListener(‘DOMContentLoaded’, () => { initMapCanvas(); initCharts(); // Populate Dropdown const select = document.getElementById(‘region-selector’); locations.forEach((l, i) => { const opt = document.createElement(‘option’); opt.value = i; opt.innerText = `${l.name} (${l.type})`; select.appendChild(opt); }); // Initial Draw updateAll(30); // Event Listeners document.getElementById(‘pld-slider’).addEventListener(‘input’, (e) => { currentPLD = parseInt(e.target.value); updateAll(currentPLD); }); document.getElementById(‘region-selector’).addEventListener(‘change’, (e) => { selectedRegionIndex = parseInt(e.target.value); const metrics = calculateMetrics(currentMatrix); updateRadar(selectedRegionIndex, metrics); }); }); function scrollToSection(id) { document.getElementById(id).scrollIntoView({ behavior: ‘smooth’ }); }