This uses USGS NHDPlus data and their NLDI API to visualize the path of a rain droplet from any point in the contiguous United States to its end point (usually the ocean, sometimes the Great Lakes, Canada/Mexico, or another inland water feature). It'll find the closest river/stream flowline coordinate to a click/search and then animate along that flowline's downstream path.
I've used mapbox to animate the downstream path, but needed to make all sorts of adjustments for elevation and bearing changes to prevent jerkiness/nausea (just moving from point to point feels a little like flying through turbulence while shaking your head side-to-side).
I've hosted a dataset with NHDPlus Value Added Attributes on Firebase, which allows me to group flowlines into their parent features and determine distances quickly.
Here are a couple of examples of what it looks like in action.
This is a section of the path from Yellowstone National Park out to the Atlantic Ocean:
Here's part of the path from Southwest Arizona down to the Mexican border:
If you'd like to run this locally and play around with it, just run the following commands in your terminal (assuming you have npm installed):
git clone https://github.com/sdl60660/river-runner.gitcd river-runnernpm installnpm run dev(then follow the link to the local server, probablyhttp://localhost:5000).- If you're running this on your own or forking into a new app, please replace the Mapbox Access Token strings in
src/access_tokens.jswith your own. You can generate a couple of tokens (for free), by creating a Mapbox account and visiting this page. You'll need to generate two separate tokens to replace the ones in the existing file, but it does not matter which serves as the primary token and which serves as the secondary token.