Rivers of the World

Click here to launch the World Rivers visualization

For quite a while I have been fascinated by maps that show the underlying structure of a geography without directly describing it. Maps like All Streets. Animated maps like the wind map. I decided to try out this form of visualization using all the waters of the world: the oceans, lakes, glaciers, and rivers. Could viewers see a passable human globe, recognize continents and important areas of the world?

I started with data from Natural Earth Data, and created a straight forward map of all the water on the globe. Then I tried a simple globe:

Once I got a reasonable round rendering using a combination of topojson and d3, I decided to make the map interactive. I thought, d3 can do anything! I’ll make an spinning globe!

I quickly came to the realize that, d3 might be able to do “anything”. But, how quickly? Animating a data visualization built on SVG is one thing, and rendering all rivers, lakes, and oceans mapped onto a sphere, and then animating (or, repeating the same render forever!) is an entirely different.

To overcome the speed problem, I used a combination of d3 and threeJS. D3 rendered my basemap on an HTML canvas one time. ThreeJS then wrapped the canvas around a sphere, and animated it.

Finally, I thought it would be nice to allow the user to control the globe: spin it around themselves, click on lakes and rivers. In whole I thought of this as an interactive screen saver.

To add interactivity, I built on top of my rotating globe. Mouse clicks are converted from the XY of the page’s coordinate system to a point to a latitude and longitude. The closest river to the mouse click is determined by constructing a Voronoi diagram of a sampled set of points for all rivers.

Once the selected river is found, I used D3 to re-render the selected river with a ‘highlight’ style, which is then overlaid above the globe.

Finally, to keep things ‘active’ I added an idleness routine. Whenever the user hasn’t interacted with the visualization for a while, a river is randomly selected, and brought into focus.

First attempt

See the final product.

© Dane Summers 2019