River Runner: drop a raindrop anywhere in the USA, watch where it ends up | Hacker News Reader

River Runner: drop a raindrop anywhere in the USA, watch where it ends up

river-runner.samlearner.com

877 pointsprawn127 comments

At a high level, I really like this. Some UX concerns are all that stop it from being amazing:

- The mouse should be a pointer, not a hand. Not only is that the expectation when an element is interactive, but it helps with precision clicking.

- The map almost made me sick when it starting moving. It needs to be slower and smoother. You already let people speed it up, but start slower.

- Dragging the map should be possible. I wanted to scroll back to something that had moved off-screen, and the map dragged a few pixels, then snapped back. If it is supposed to be draggable, let it drag. If not, don't let a drag start and then snap it back.

But really, those concerns aside, this is a nice tool.

Hey, thanks for the feedback. I actually struggled on what to do with the cursor, since the map is draggable (when not at min zoom level) prior to a click and the default mapbox cursor is denoting that. On balance, I think you're right that a default cursor might be better.

Re: interaction during the run, I thought about allowing you to interact and just pausing the run while you do, but thought that too many people would interact accidentally, pause the run and then not understand that they had to click somewhere to resume. It's a feature that would technically be ideal, but practically would throw a lot of people off-track with incidental interaction I think (I had this same issue with the decision to start the run right away instead of giving the user and overview at the beginning. Technically, I think it would be ideal, practically, I think a lot of people could miss the main feature of the site altogether).

Speed-wise, I've already slowed it down a good amount from the original iteration, if you can believe that, but I could take it down a little more. There's a weird kind of balance in perceptual speed between camera height and true speed, so I've tried to not give a user full control over speed/zoom, because most options are very bad. I can, at least, take the base speed down a little, and maybe give more precise speed control than what's there. Fundamentally, though, I don't want the default setting to take ten minutes for a run, and I also want you to really be able to see the mountains and canyons.

You could make it pause the run when moving the map around, the automatically continue if it's left alone for N seconds, where N is probably around 5.

Google Maps uses pointer by default and "move" when dragging.

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

Just wanted to say thank you for this tool! I hope you keep it online as I want to use this for my kids as they grow up to teach them this when they reach it in school.

Also, as it stands right now as of this post I found the UI to be fine, the speed was decent and did a good job of following the path without taking too long or being too fast, I think its at a good balance right now.

A friend of mine has a house set on one of the boundaries, the west half of his roof empties into the Mississippi, the east half into Lake Michigan.

He could call his house "the Watershed".

That is pretty cool to visualize in your head

Waukesha?

It's actually an interesting regional issue, because the allocation of Great Lakes water is ultimately governed by a treaty with Canada. Taking water out of the Great Lakes watershed is prohibited without being granted by an exception.

This became a local issue in Waukesha, because the town is on the boundary, so they have two water systems, and the one on the Mississippi side got contaminated. They eventually got permission to connect the whole town to the Lake Michigan side, by agreeing to return all of the drain water back to that side.

Accolades!

Since no one else has done it I will ask for features: sometimes it takes a while for it to determine the route, there is no way to cancel that to go back to trying a new raindrop location

Wish there was a different way to get back to raindrop location instead of closing the existing route. Would prefer some kind of click/tap-state or gesture. More easily noticeable of an inconvenience on an ultrawide screen.

I love it. Another feature request would be to not fly the path but just show the plotted flow.

You can cancel the animation part by clicking the close button on the top right panel.

I struggled with this a lot. Originally set that ending overview at the beginning, but was worried that practically a lot of users might miss the main feature. I've heard from a lot of people that they were surprised it went into the 3D view, and I think some people might see the plot and just assume that's it.

The 3D view is cool, but it would be great if you could turn it off. After a few goes, all I wanted to do was quickly look at a bunch of different places - I ended up closing the 3D view and going back to the map view anyway.

Hmm ok, there's a fix here and it's probably something to do with a timer and a way to opt out, I'll work on this.

Why not simply let users click on the map route preview window and have it expand into the full 2D route view?

The 3D route was truly a delightful experience and exceeded my expectations quite a bit so please don’t add any hurdles in front of this seamless 3D experience or it will lose the magic a lot of us are experiencing! …my 2 cents

One thing which I suppose isn't surprising, but still was amazing to see at scale, is I put a drop in Colorado that ended up in the Gulf of Mexico. As the camera followed the path, it's nothing but farms, with the odd city sprinkled in. I got bored and left in Nebraska, but I imagine it's like that the whole way.

It's obvious it takes a lot of land to feed everyone, but to see it like that really drove it home.

Another neat thing about the eastern half of Colorado is the division between the Platte/Missouri and the Arkansas. A small difference in starting point has a huge impact on the route you travel to get to the Mississippi.

Depending on where you placed that drop in Colorado it also could've ended up in the Pacific. The continental divide is in Colorado and all water west of the divide will eventually drain into the Pacific and all water east will drain to the Atlantic.

https://en.wikipedia.org/wiki/Continental_Divide_of_the_Amer...

I've been enjoying placing a drop right along the divide and seeing which way it goes. For example, up near Lenawee Mountain (aka A-basin). I've also noticed that up there, sometimes there is no route to either ocean. I guess it ends up in a high-alpine catchment and stays on the divide.

Another fun, if more subtle divide is right around Hibbing, MN -- step west and water flows down the Mississippi to the Gulf of Mexico, step north and water flows up to Hudson Bay, step southeast and water flows through the Great Lakes to the Atlantic Ocean. https://www.google.com/maps/@47.4206243,-93.0430116,12.7z

The Great Basin is an endorheic basin (no outflow) located west of the Rockies, so not quite all the water.

From Wikipedia: “ The hydrographic Great Basin is a 209,162-square-mile (541,730 km2) area that drains internally. All precipitation in the region evaporates, sinks underground or flows into lakes (mostly saline). As observed by Fremont, creeks, streams, or rivers find no outlet to either the Gulf of Mexico or the Pacific Ocean. ”

This is amazing, outstanding project! Interestingly, I got it "stuck" when I clicked somewhere random in California (Pope Valley, apparently): https://i.imgur.com/deOsIt2.png

Is there a lake there in real life?

Is that within The Great Basin[^1]?

[1]: https://en.wikipedia.org/wiki/Watersheds_of_North_America

The path, having almost reached the mouth of the Sacramento River, seems to have been captured by the very artificial Mallard Reservoir in Concord, Contra Costa. As to be expected, it seems that anything draining into the Sacramento will do the same.

https://goo.gl/maps/s9Gep775ZLDgddzz7

This should be fixed now!

Really nice work. However, I would really love to have a no animation option. Just show me the route from the continental view. I pretty much have to reload to get it back to the starting point reliably. Fun to click into the animation, but not every time. Thanks for putting this up!

+1 for the no-animation option. It takes me at least 10 seconds between each attempt.

Love the visualization!

There's a small part of North Dakota (and a teeny part of Montana) that drain into Hudson Bay. This led to the odd fact that these parts of the Midwest USA were for a while British territory (until 1818). https://en.wikipedia.org/wiki/Pembina_Region

Which part is that? I can't find it on the map. Just want to see the twisty windy path.

I think it must be northern?

Yes, anywhere that drains to the Red River, which flows north. The Louisiana Purchase you'll recall only covers land that drains into the Mississippi.

Northeastern North Dakota. The website just shows it stopping at Canada since it's based on USGS data.

See: https://en.m.wikipedia.org/wiki/Selkirk_Concession

And in Montana it's Triple Divide Peak https://en.m.wikipedia.org/wiki/Triple_Divide_Peak_(Montana)

It would be an interesting problem to see / solve where in this map would a drop travel the most. By just clicking, I got one that travels from Cavour, South Dakota to Gulf of Mexico over a 3523 Kms journey. I am sure there must be something that is longer!

Edit - some of the routes stop at border of Canada - is this due to lack of dataset?

The longest route in this dataset is almost certainly from Northwest Montana to the Gulf of Mexico; see, eg. the beautiful illustration of watersheds in North America at [1]. Example: [2]

[1] https://www.visualcapitalist.com/maps-worlds-watersheds/

[2] https://river-runner.samlearner.com/?lng=-113.26136901231438...

The source of the Missouri River - Brower's Spring apparently - is probably close to the point where it's longest. I can't find it exactly on this map, but have got up to 5790km, from a point just by Yellowstone Airport.

The code is at https://github.com/sdl60660/river-runner/, it would be quite possible to base a solver on that.

Ha I appreciate you sharing the repo, but if someone is interested in finding a longest route, they should probably just go straight to the data source (USGS NHDPlus data/NLDI API)

You can click in Northern Montana for longer routes, e.g. Browning, Montana gives about 5587km.

This is cool! Did you have some info on this or use some data to find this? I was randomly clicking points on center of US and many were just ending in a nearby lake. I only found a few that ended up in the sea..

Cool project - and I like that it uses USGS hydrography data.

They publish all kinds of terrain survey information about the entire USA for free. There's probably enough data to make your own GPS mapping device/app.

https://www.usgs.gov/products/maps/gis-data

And here's a USGS site that delineates a watershed from any point on a stream:

https://www.usgs.gov/mission-areas/water-resources/science/s...

Really neat tool. Reminds me of a favorite quote:

Eventually, all things merge into one, and a river runs through it. The river was cut by the world's great flood and runs over rocks from the basement of time. On some of the rocks are timeless raindrops. Under the rocks are the words, and some of the words are theirs. - A River Runs Through It - Norman Maclean

Unconsciously I expected that the drop would always end up in larger bodies of water. So I was surprised when it went from a creek to a river and to a lake, and then back to a creek. We're probably missing some groundwater visualization :)

It could have been an endorheic basin, where the next step would be evaporation.

The Great Basin area is the first thing I checked, to see if that worked well, and it does.

Allow me to present Triple Divide Peak, from whence you may urinate simultaneously into the Atlantic, Pacific, and Arctic oceans. https://en.wikipedia.org/wiki/Triple_Divide_Peak_(Montana)

Neat.. I was just in that park last week for a wedding, it was too bad that a lot of the roads were still closed, but it was still amazingly beautiful. Think I've driven over the continental divide about 6 times in the past week, the one east of glacier national park twice and three times when driving through yellowstone to get to teton national forest today. It's just ridiculous up here.

I was curious to see what happens to rain in Death Valley (below sea level). https://river-runner.samlearner.com/?lng=-116.84629411503326...

This is a lot of fun. As a resident of Maryland, I was mildly surprised to find that the Chesapeake Bay is treated as part of the Atlantic Ocean, instead of an individual waterway in its own right. I suppose this is probably due to the underlying data set, but it doesn't seem right to me.

Yeah, ecologically the Chesapeake is very distinct.

You're the second person to mention this now! The stopping feature stuff is very tricky and not in the original USGS data, but I can block out Chesapeake Bay the same way that I blocked or the Gulf of Mexico

This has been added a stopping feature as of the last update.

It's pretty nuts to me that a raindrop that falls in Crow Agency, Montana will drain into the Gulf of Mexico!!! :p :) xx

I wonder how long that journey takes? Assuming no evaporation of our sample drop.

Napkin math.

Longest run I've seen (posted in another comment above) starting in NW Montana: https://river-runner.samlearner.com/?lng=-113.26136901231438...

5570 km (3461 miles)

Rivers fluctuate between 3 to 15 mph on average (quick Googling).

At an average of 3mph: ~48 days

15mph: ~9.6 days

7mph: ~20.6 days

I'm sure the time of year you decide to run the experiment would change the results pretty drastically.

This is outstanding. Great job. Can't wait to show the kids when they wake up to better explain the continental divide here in Colorado.

Having it always start with a 'city' is a bit weird in places in the west. I tested it east of Lake Abert in Oregon and it calls it 'Lakeview'. The random location is easily an hour drive from Lakeview.

For a scenic trip, start it near the 'headwaters' of the Owyhee river in SE Oregon, SW Idaho or Northern Nevada, which gets you the Owyhee, Snake and Columbia rivers.

The Great Basin is interesting to explore. I clicked in Eureka, Utah, and the route ended 23km away in a tiny lake called Gadwall Pool.

Wow I clicked thinking the concept was neat enough on its own but the execution was engaging and informative. This is great

I'm not a programmer, but as an environmental engineering student that was an astonishing work. Congratulations :)

Is the map loading initially ok then suddenly distorting to become unreadable after a second or two for anyone else? I'm on Firefox, with lots of about:config hacking, particularly preventing canvas being used for fingerprinting, so the website maybe can't handle unavailability of certain features.

For me this worked on Firefox without issue.

Same setup, lots of weird glitches.

Yes, it looks like this: https://i.imgur.com/3ec9zpj.jpg ... I don't have a whole lot of custom about:config settings and I tried to disable no-script and ublock origin but no luck.

Allow "extract canvas data". It breaks a lot of graphics visualizations within FF.

Pretty nice. I know the hydrology of my area pretty well. I'm not sure if they're using USGS hydrology maps because a water droplet on either side of two water sheds flows to the nearest river by distance, not how things actually flow, but it's pretty close.

I chose a spot in Colorado, the result was rather disappointing: https://river-runner.samlearner.com/?lng=-105.56967021444078...

Beautiful idea - unfortunately it does load forever for the calculation to compelete on the website(at the moment). Found out about the city of Sibley, Minnesota now by Wikipedia and it seems pretty flat xD

This is great! I got a chuckle though that this is for the US only, but it shows distance in km instead of miles. I'd love it if we changed to metric but I don't see that happening any time soon.

The United States was one of the original signatories of the Metre Convention [1]. The metric system has been the foundation of all US measures since 1893 [2,3]. School children in the United States have learned both systems for decades. Ford trucks have metric bolts. The US military uses the metric system.

[1]: https://en.wikipedia.org/wiki/Metrication_in_the_United_Stat...

[2]: https://en.wikipedia.org/wiki/United_States_customary_units

[3]: https://en.wikipedia.org/wiki/Mendenhall_Order

It will happen if we keep making new things (like this tool) that use km instead of miles.

That's the form the data came in and when it came time to convert it, I figured it might be better not to.

Hey this is really awesome. I think I found an edge case though https://river-runner.samlearner.com/?lng=-122.10358604021484... :)

> There are no rivers flowing into or out of the lake; the evaporation is compensated for by rain and snowfall at a rate such that the total amount of water is replaced every 250 years.

Wow! I dropped a raindrop in Seneca Nebraska and it travels 3300 km to the Gulf of Mexico. I believe my raindrop will never reach the ocean What an incredible journey! I wonder if any human has actually traveled this path?

https://river-runner.samlearner.com/?lng=-100.85192070321573...

I think you’ll get more traction with this if you speed up the analysis. Probably easiest done by determining an interpolation grid, fill it with values, and return nearest neighbor as the result.

Strictly speaking it could still be just as accurate as the uninterpolated approach, since when a raindrop falls, winds could place the drop on the ground some distance away from its release point.

Saw some "BLM" forests along the The Tongue River. For the curious that's acronym for "Bureau of Land Management".

That's was pretty cool.

I had a weird thing going on at first where the map data seemed really old, especially when I was at about "city" level. Interchanges and neighborhoods that I know that have been there since at least 2002 were nowhere to be found. It wasn't until I zoomed way in and then back out again did the map change and they showed up.

Hm, I can no longer reproduce this, but my first click ended 22km away in a reservoir somewhere in the midwestern United States. Colorado maybe? But it wasn't Dillon; everything running into Dillon just passed through. I only mention it because I can't find any references to reservoirs acting as endorheic basins in the midwest.

Really impressive!

Feature suggestion 1: Maybe you could pre-render a grid of rain drops to get a nice overview of the flow paths and how they converge. Would be cool and interesting.

Feature suggestion 2: It might be possible to include man-made structures along the path, and to include a small delay when the water is halted by dams/power stations/whatevers.

I remember seeing tools like this in the past, used by governments for flood modelling and other activities, but one of the interesting things at the time(not sure about now) was that the elevation data wasn't granular enough in some cases water went uphill. Still good for modelling but you needed humans to interpret.

This really illustrates to me how important the artificially colored overlays are. As river names change, I assume the river I'm tracking is merging with a larger river. And yet even when I know it's coming, I'm really struggling to spot the other river before we merge.

Very nicely done. What would be cool is the ability to switch from the terrain view to one showing height contours. Is overland runoff path hydrologically correct or are you essentially following stream flow. In any case, this would be a great exhibit in a first hydrology class.

I live near the Continental Divide. I dropped a drop in Datil, NM, which is a few miles east of the divide, and it went west. But isn't the Continental Divide defined as the line at which water drains east or west? Is the app mistaken, is my definition wrong, or what?

There are multiple places where the divide forks and then joins back together, and even then there are other exceptions. If you live near it, I wouldn't visualize it as a single point, but as a general shift in overall trends.

I guess check and see which way the water flows next time you get a big rainstorm :)

Very cool!

Is there a way to put down a grid of raindrops in an area and display their paths from above? It'd be a great way to visualize watersheds.

Another (probably huge?) enhancement might be to calculate and display typical travel times along those routes.

Nice work - keep it up!

Very cool stuff! I saw talk regarding a similar idea several years back at Strangeloop - check it out!

https://www.youtube.com/watch?v=C4z-uSMhvVM

Cool but doesn't a large amount get absorbed and end up in ground water pools etc?

Yes and some evaporates, but I think the tool is mapping the path of water that doesn't leave the water system that way and flows out into a larger body.

Water goes through the water cycle. Even if it's absorbed by the ground, it eventually leads to collection, evaporation, and precipitation again.

If most of the water collected in underground pools, then eventually we'd have no oceans.

Request for enhancement. Add the flow of the Great Lakes. Modeling Lake Michigan near Chicago may be difficult, but everything else should eventually flow over Niagara Falls and through the St. Lawrence into the Atlantic.

Fun, even shows you the short rivers that drain into the Great Salt Lake of Utah

This is simply amazing. I expect to spend hours on this with the kids. Thanks!

I can't see anyone else commenting this here yet - I just get a blank white screen, both on Firefox and Chromium. And no, I haven't disabled Javascript for it. Any ideas?

I'd love to see something like this for the rest of the world

Very cool, and feel more real than I expected. A raindrop often ends up to the real "river" and goes down to the sea with it. It revived my appreciation to the physics.

Wow. Place a drop in central Wyoming, watch that one!

What does it mean when it says "Unable to find a flow path for [city, state]"? I've gotten this a few times in New Mexico.

It means the drop hits the ground and evaporates or soaks into the sand, I guess?

It says my lawn is 5230km from the Gulf of Mexico. Not quite the furthest you can go though -- that's 200km east of here, I think.

This is very cool. It would be nice if it showed how long the path is, so you could play a mini game to try and find the longest path.

It shows the total length in the top right corner.

Very cool! Now let's find 2 drops, no more than 1 meter apart, one going to the atlantic, the other on the pacific.

It seems like it hangs or fails when processing the Genessee River watershed path.

No clue one the true value of this aside from scratching an interest. Either way very cool.

Educational. The thing that strikes me is that the reasons why we're in an extinction event are not what most people think. I used to think it was due to cities or suburban sprawl. Not true. This tool shows it's farmland. A high percentage of the land you pass through on this tool is farmland. There are no wilderness areas anymore.

Thats true however the reason we have a lot of farmland is to feed people in the cities. It's a collective system that is putting pressure everywhere on all of the global resources...

Error code on your page! Oh no. Looks like you hit some limit on vercel

That's cool. I didn't know MapBox had 3D like Google Earth

This has to be one of the coolest things I've seen on HN :)

Palisade, Minnesota to Gulf of Mexico is quite the trip!

Cut Bank, Montana to Gulf of Mexico is also quite a ride!

This is so cool. Wow. Thank you for building this!

What is web traffic like? Do you pay mapbox?

This is cool, i like this, its made my lunch

- A Brit

Wow! Very cool use of Svelte JS.

ok but most rain ends up evaporated or as ground water..

This is awesome.

this is brilliant

cool

Great piece of work. But what struck me the most is how little of the real America is left. Everything is basically covered by plowed-under farmland. All it takes is Google earth and a bit sensitivity to what you are looking at. Humanity has really left a giant scar on the face of the earth.

Reply on news.ycombinator.com