Dreamflows Map

For the Nevada City Hackathon last weekend I built a map of river flows. Just in time for the torrential rains! All of the data comes from DreamFlows, a kayaker site. They collect real time river flow data from other sites, then process it and present it in a handy table format showing where the rivers are running high for good kayaking. Great site. What I couldn’t find at DreamFlows was a map of all the gauges, showing a picture of the whole state. So I made one!

Screen Shot 2012-12-03 at 9.22.56 AM

DreamFlows is kind enough to publish a CSV file of the aggregated real time data. My code takes that CSV data and draws it on the map via Leaflet. There’s a bit of extra work in geocoding the station IDs; I had to scrape station locations out of the site pages and put them in a JSON database. As is my way these days all my code runs client side; the only code on my server is a tiny shim working around Same Origin policy for the CSV file.

The resulting map isn’t bad for just a few hours work, but there’s a lot of things I’d like to do better. Some ideas:

  • Get data directly from the sources at CDEC and USGS. Mostly for historical data; DreamFlows only publishes current readings. Nick Santos at the Hackathon just wrote a USGS access library which could come in handy.
  • Visualize flows on the map. Right now I’m just drawing dots colored by DreamFlows’ classification. I’d like a more dynamic view, one that conveys the volume of water moving at each site more viscerally. I’m not sure whether to try to put a little historical graph right in the map, or maybe go for an animated presentation so you can watch flows come and go like a little movie.
  • Highlight rivers on the map. It’s hard to follow the courses of rivers on the terrain map I’m using. My thought is to produce a GeoJSON file of river flowlines and draw it with vectors on top of the map to highlight rivers. NHD is the canonical source for river map data in the US but it’s a hard site to work with. Nick pointed me to NHD Plus which augments the NHD data and makes it easier to work with.

Update: Chris at DreamFlows was kind enough to point out that his site has a Google Map like this too. It’s available under the Custom flows options and requires a login and a little setup, but you can end up with a dots-on-a-map almost exactly like mine.

Screen Shot 2012-12-04 at 6.16.25 PM