Citizen Science Site

The core screen is an interactive Leaflet map of water-quality sample sites, each marker color-coded to a site's letter grade (A–F) computed from its underlying measurements. Clicking a marker opens a detail panel with the full measurement set for that sample — pH, temperature, dissolved oxygen, nitrate, phosphate, biological oxygen demand, salinity, flow rate and turbidity — each shown against its healthy range, plus the site/region/watershed grade breakdown and any field photo and notes attached to the sample.

A second visualization mode renders the same data as a heatmap (via leaflet.heat) with a per-parameter color scale, and a trends section (Recharts) adds time-series charts, a metric gauge, and dedicated regional, water-source and grade comparison charts, all driven by a shared filter panel — grade, region/watershed, date range and parameter — and a custom time-range slider.

This web app is the public, read-only data portal: samples are collected through a separate mobile app, and every data hook here only reads from Firestore. It is the public-facing analysis layer of a citizen-science field-data pipeline.

An education section (beginner/advanced toggle, a metric glossary, and plain-language explanations of each water-quality parameter) targets a non-technical audience — schools and community volunteers — and a landing page computes a small set of live summary stats (total monitoring sites, average pH, percentage of A/B-grade sites, distinct contributing schools) directly from the same Firestore data at render time rather than hardcoding them.