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:
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.
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.