Channel Islands Explorer

A simulation of the Channel Islands coral reefs: dive through a 3D ocean, catalog marine species, and witness the effects of climate change. It turns 12 years of survey data into something real.

Comment

DeepBlue

Try it out!!: link

Inspiration

The ocean is the world's largest carbon sink, yet its health is often "out of sight, out of mind." While working with the CalCOFI (California Cooperative Oceanic Fisheries Investigations) dataset, we realized the data was too dense for the average person to grasp. We saw a data disconnect: the numbers showed a staggering 90% decline in certain ecosystem markers between 2014 and 2026, but static charts failed to capture the urgency of the specific climate events driving those drops.

We asked: what if instead of reading about coral bleaching, you could swim through it?

The Design Philosophy: Sensory Storytelling

To bridge the gap between abstract numbers and emotional urgency, we moved beyond visualization toward Data-Physicalization. Our UI/UX strategy is built on three pillars of "Reactive Immersion":

Environmental Degradation as UI: We transformed the "Visibility" variable into a primary feedback loop. As the dataset records rising temperatures and dropping pH, the 3D environment physically degrades. The water shifts from a vibrant, clear blue to a murky, desaturated grey—mimicking the "suffocation" of a dying reef.

The "Bingo Book" Mechanic: To solve the problem of "dense text," we implemented a high-stakes Search-and-Rescue interaction. Users must identify and "log" marine species before the 30-second year-cycle ends. This transforms a decade of oceanographic decline into a haunting race against time.

The UX of Loss: We intentionally utilized the "Leaking Bucket" culling logic. Seeing individual data points (cones) physically shrink and vanish one-by-one—rather than disappearing in a bulk refresh—instills a genuine sense of hopelessness and urgency that no static chart can replicate.

"Beyond the Screen"

By replacing traditional dashboards with reactive environmental cues—such as high-contrast "Event Glows" for climate anomalies and dynamic fog density for acidification—we have turned a decade of scientific data into an intuitive, inescapable journey through a collapsing ecosystem.

What It Does

DeepBlue is an interactive 3D underwater simulation that drops users into the Channel Islands ecosystem and lets them experience 12 years of real oceanographic data firsthand.

  • Immersive Exploration: Navigate a fully realized deep-sea environment using WASD + mouse controls, with dynamic fog representing harmful pH, and a procedurally generated reef built from real habitat data.

  • Living Ecosystem: Fish schools and coral colonies are populated directly from NOAA Deep Sea Coral survey counts. As you advance through years, species disappear in real time.

  • Field Bingo Book: A species catalog that players fill by finding organisms in the world before going extinct, emphasizing the need for urgency. Discovered species are logged with population trend data, scan location, and ecological context.

  • Mission Complete Dashboard: An endgame stats screen showing per-species and total ecosystem population trends from 2014–2026, with clickable alert circles tied to real historical climate events.

How We Built It

DeepBlue is a full-stack data-to-experience pipeline built for real-time 3D visualization.

  • Data Pipeline: Built with Python and Pandas, processing raw CalCOFI bottle and cast CSV samples. Custom aggregation logic converts chemical readings (pH, temperature) and biological counts into per-year ecosystem health scores and species population arrays.

  • 3D Engine: Built with Three.js and TypeScript (Vite). The world uses 'InstancedMesh' for high-performance fish schools, a custom 'MeshStandardMaterial' shader patch ('onBeforeCompile') to make each fish emit its own species color, and a procedural reef geometry merged via 'BufferGeometryUtils'. Post-processing uses 'EffectComposer' with 'UnrealBloomPass' and a custom radial blur shader.

  • Data Visualization: Chart.js with a custom Canvas API plugin that draws a layered "Super-Glow" effect on alert data points using shadowBlur and strokeStyle to highlight critical climate years without cluttering the aesthetic.

Challenges

The Dirty Data Wall: Scientific CSVs are notoriously hard to parse. We faced 'UnicodeDecodeError' issues from non-standard character encodings and inconsistent column formats across survey years. We solved this with a robust encoding-detection strategy and a data-coercion layer in our Pandas pipeline.

Takeaways

We learned that data is only as powerful as its presentation. Moving from raw CSV to a living, explorable world taught us that the next frontier of climate communication is embodied data — where you don't just read about ecosystem collapse, you watch it happen around you in real time. The most powerful moment in our project isn't a number on a chart. It's swimming through a reef full of glowing coral in 2014, and returning in 2026 to find it grey and empty.

Share this project:

Updates