Hover the map: the whole drainage basin lights up in yellow, and a blue river traces the path a raindrop falling on the cursor takes downstream to where it ends up. Red is everything upstream, all the land that drains through that point.
This is a remake of Upstream/Downstream: Discovering and Displaying Watershed Topology! (slides), Mark Phillips's talk at !!Con 2016. I was in the audience that day and loved it so much it stuck with me for ten years, and this project is my excuse to finally rebuild it for the whole world.
How it works: basin polygons come from
HydroBASINS; each polygon's NEXT_DOWN attribute forms a DAG, so
up/downstream is graph traversal. The 9 HydroBASINS regions are
self-contained (no cross-region links), so each is fetched lazily the
first time the cursor enters its bounding box, at the currently
selected level. Highlight regions are merged into single perimeters at
runtime with topojson.merge and drawn on a canvas
overlay.
Toggle watershed boundaries to outline the major drainage basins in view — every basin sharing a final sink is merged into one watershed. HydroBASINS carries no river names, so the labels come from a small hand-curated list of major fleuves, each placed on the watershed it drains.
Basins: HydroBASINS v1.c — Lehner & Grill (2013). Basemap: © OpenStreetMap contributors, © CARTO.