-
-
2025
-
2100, CO2 increase
-
2100
-
2025
-
1980, CO2 increase
-
1980, CO2
Inspiration
Ocean acidification is one of the most underreported consequences of climate change. Since the Industrial Revolution, the ocean has absorbed over 30% of all human-produced CO₂ — and in doing so, has become 26% more acidic. That single number hides an enormous amount of suffering: dissolving coral skeletons, collapsing shellfish fisheries, and disrupted marine food chains that billions of people depend on.
The problem we kept running into was not a lack of data — NOAA, the IPCC, and dozens of research institutions publish exhaustive datasets on ocean pH. The problem is that the data is invisible. It lives in spreadsheets and research papers behind paywalls, formatted for scientists, not for students, policymakers, or the general public.
We wanted to build something that makes you feel the timeline. Not read about it — feel it. When you drag a slider and watch the ocean bleed from blue to red in real time, the abstraction collapses. It stops being a statistic and starts being a crisis.
What it does
AcidWatch 3D is a live interactive web application centered around a 3D WebGL globe where the ocean surface is painted as a real-time pH heatmap — deep blue where the ocean is healthy, shifting through teal and orange, all the way to blood red where acidification is critical.
The core experience
1. 3D pH globe The ocean surface is color-mapped to real pH values sourced from NOAA SOCAT measurements. The globe spins on load, is fully draggable and zoomable, and has 10 animated severity pins marking the world's most critically acidified zones — including the Great Barrier Reef, the Arctic Ocean, and the California Current.
2. Year scrubber (1980 to 2100) A slider below the globe lets users travel through time. Dragging forward from 1980 to 2100 recolors the entire ocean in real time as pH values change. The color scale runs from pH 8.2 (healthy, deep blue) to pH 7.7 (critical, blood red).
3. Click-to-dive depth panel Clicking any ocean region opens a side panel showing a vertical pH cross-section from the surface down to 4,000 m. Each depth slice shows the pH value and aragonite saturation level (Ω), the chemical measure of how corrosive the water is to shells and coral skeletons.
4. Live CO₂ to pH calculator A slider lets users input any atmospheric CO₂ concentration in ppm. The app runs Henry's Law and carbonate chemistry equations client-side and outputs the predicted surface ocean pH in real time — showing exactly which species are now at risk at that concentration.
How we built it
Frontend
The application is built with React and Vite. The 3D globe is powered by Globe.GL, a library built on Three.js that renders a WebGL Earth and accepts lat/lng color data to paint the ocean surface. Each ocean tile's color is linearly interpolated between deep blue at pH 8.2 and blood red at pH 7.7 based on its current pH value.
Data pipeline
Historical pH data comes from NOAA SOCAT (Surface Ocean CO₂ Atlas), cleaned and formatted as a JSON array keyed by year and geographic coordinate. Future projections follow IPCC AR6 SSP scenarios, parameterized as pH decline curves from 2023 to 2100.
Chemistry model
The live CO₂ calculator uses Henry's Law to relate atmospheric CO₂ concentration to the amount dissolved in the ocean:
Dissolved CO₂ = Henry's Law constant (Kh) × atmospheric CO₂ pressure (pCO₂)
That dissolved CO₂ reacts with seawater to form carbonic acid, which dissociates into hydrogen ions — and the concentration of those hydrogen ions gives us pH:
pH = −log₁₀ [H⁺]
The depth panel calculates aragonite saturation (Ω), the ratio of calcium and carbonate ion concentrations to the solubility product constant (Ksp). When Ω drops below 1.0, the water actively dissolves aragonite-based shells and coral skeletons.
We validated the calculator against known reference points: 280 ppm CO₂ produces pH 8.19 (pre-industrial baseline), and today's 420 ppm produces pH 8.04.
Deployment
The app is deployed on Vercel with a Vite build pipeline. All data files are served as static JSON — no backend required.
Challenges we ran into
Getting Globe.GL to recolor in real time without frame drops was our biggest technical hurdle. Repainting thousands of ocean tiles on every slider tick caused significant frame rate issues on mid-range hardware. We solved this by debouncing slider input, pre-computing color arrays for each year at load time, and swapping pre-built arrays rather than recalculating on every tick.
Aligning historical NOAA data with IPCC projection curves required careful boundary handling. The SOCAT dataset ends at 2023 and the IPCC projections begin at 2023 — but the two datasets use slightly different baseline assumptions. We normalized both to a common pre-industrial reference of pH 8.179 to ensure a seamless transition at the 2023 boundary.
Scope management under time pressure was the human challenge. Building a 3D data application in a hackathon environment meant making hard calls about what to cut and what to keep. We kept the features that told the core story and cut the ones that were decorative.
Accomplishments that we're proud of
We are most proud of the fact that it works — a fully deployed, interactive 3D application running on real scientific data that any person can open in a browser right now.
The emissions scenario toggle is the feature we are proudest of technically. Watching the ocean shift from near-total red under Business as Usual to largely blue under the Best Case scenario — in real time, on a spinning globe — communicates the stakes of climate policy more viscerally than any chart or table could.
The CO₂ calculator is the feature we are proudest of scientifically. Running Henry's Law and the carbonate equilibrium equations client-side, validated against known reference data points (280 ppm produces pH 8.2, 420 ppm produces pH 8.05), means the model is doing real chemistry — not approximations.
What we learned
We learned that the hardest part of data science is the last mile — getting clean, validated, correctly-formatted data from a scientific source into a live user interface. The chemistry is well-understood. The IPCC data is publicly available. Making it render smoothly on a spinning 3D globe in a browser, keyed to a slider, updating in real time, required solving a dozen small engineering problems that had nothing to do with the science.
We learned that scope discipline wins hackathons. The features we shipped are clean and complete. The features we cut would have been half-finished and broken. A working globe that does five things well is more compelling to a judge than a broken globe that promises ten.
We also learned that ocean acidification is significantly more alarming than we expected going in. The pH scale is logarithmic — a drop of 0.1 represents a 26% increase in acidity, not a 10% increase. By 2100 under Business as Usual, projected pH values of 7.8 or below would represent ocean conditions not seen in over 20 million years. Building this tool made that real for us in a way that reading about it never had.
What's next for AcidWatch 3D
Real-time data feed — replace the static NOAA SOCAT snapshots with a live API connection to NOAA's current pH monitoring buoy network, so the globe always reflects the most recent measurements.
Shell dissolution animation — a planned SVG animation of a pteropod shell visibly eroding when aragonite saturation drops below Ω = 1.0 at the selected location. This was our highest-priority cut feature and the first thing we build post-hackathon.
Species impact cascade — a panel showing the six most pH-sensitive marine species graying out in real time as pH drops: oysters at pH 8.0, pteropods at pH 7.9, cold coral at pH 7.8, warm coral at pH 7.75, sea urchins at pH 7.7, and fish larvae at pH 7.6.
Mobile application — a native iOS and Android version for use as a classroom tool and aquarium kiosk display.
Integration into NC school curricula — starting here in North Carolina, we want to work with the Department of Public Instruction to embed AcidWatch 3D into high school ocean science and environmental studies units.
API for researchers — a public JSON API that lets researchers and journalists query pH projections by location, year, and emissions scenario — making the underlying data model accessible beyond the visualization layer.
Log in or sign up for Devpost to join the conversation.