*Belgian Beach Litter Dashboard
Built with Observable Framework, OpenAPI Webservices, OpenLayers, D3, and multi-format data pipelines
Hi everyone! 
We’d like to share our new Beach Litter (Macro-Litter) Dashboard, built using Observable Framework and a set of supporting data-engineering and geospatial tools.
Live app: https://dataviz.naturalsciences.be/dashboard/bl/
The dashboard visualizes long-term macro-litter surveys along the Belgian coast, collected by citizen scientists and curated by RBINS/BMDC. All data is openly available and accessible through both the UI and a documented API layer.
Architecture Overview
The dashboard is a static site generated with Observable Framework.
Data is not bundled into the build: all datasets are fetched at runtime through our own API layer, allowing updates without redeploying the site.
Data Layer — OpenAPI Webservices
All data (surveys, beach metadata, J-code taxonomy, time series, and spatial layers) is served through OpenAPI-described webservices.
The API exposes:
-
CSV endpoints for bulk access
-
JSON endpoints for UI components
-
GeoJSON for mapping
-
Metadata endpoints for classification and temporal grouping
Because everything is described via OpenAPI, external users can integrate programmatically, and the documentation remains consistent with the backend.
Visualization Stack
We combine several libraries:
-
Observable Plot for time series, distributions, and categorical comparisons
-
D3 (d3-dsv + d3-time-format) for lightweight parsing, preprocessing, and date formatting before passing data into Plot
This keeps the client-side bundle small while still offering flexibility for transforming streamed data.
Geospatial Mapping
Maps are built with OpenLayers and ol-ext, rendering beach geometries, coastal basemaps, and interactions such as hover, click, and filtering.
All spatial overlays come directly from GeoJSON API endpoints.
Data Standards & Processing
The dataset uses the Joint List of Litter Categories (J-codes), enabling consistent classification across surveys and facilitating reliable trend analysis. Temporal grouping (e.g., quadrimesters) and category normalization are handled server-side so the client receives clean, analysis-ready data.
Build & Deployment
The project builds into a static dist/ directory. Media assets are integrated into the Framework _file/ pipeline. Deployment is handled using Observable’s native tools and institutional hosting, making the site easy to update, version, and archive.
Happy to answer architecture or design questions!
ystojanov@naturalsciences.be / yvan.stojanov@yahoo.fr
fstrobbe@naturalsciences.be / bedic@naturalsciences.be