Beyond the Sea, flowing and exploding edition
Last year I took a whack at mapping what you’d “see” if you looked straight across the ocean from coastlines around the world. Since then, an interactive version of that has been a back-burner idea. Well, finally, here we go.
To recap, these arcs represent straight-line paths out to sea, perpendicular to the coastline at a sample of locations (around 16,000 points). These “views” often lead to surprising destinations, given the flat maps we’re accustomed to seeing.
This interactive map is just a toy that I hope looks nice—there’s nothing especially marvelous on the technical end. The paths were all calculated beforehand the same way as before; while it’s certainly possible to calculate them on the fly, my method isn’t quite fast enough to keep up with rapid interaction. (And I’m too lazy to solve a few other challenges that would come with it.)
The short technical summary is this. Coastline sample points are drawn (invisibly) as SVG circles, and when you mouse over them their associated path is drawn (again, invisibly) as an SVG path via d3. That SVG path is handy because we can get locations incrementally along it with the getPointAtLength method, which is used for drawing the path on a canvas bit by bit in an animation. There is a constantly-running function that draws any active paths, preceded by a barely-opaque fill across the board, which is how the fading trail effect is achieved. Source code is a bit messy at the moment, but is up on GitHub.
One bit of magic is that d3’s geoPath uses adaptive resampling to draw lines as curves appropriate to a map projection. This means that, for the most part, I only had to include the start and end points in my line data, and d3 would draw the curved great circle path that I was looking for. (I did, however, sometimes have to include extra vertices to convince it to go the longer way around the world when necessary.) As you may be able to see in the QGIS screenshot below, it’s all made up of straight lines.
Anyway, poke around at the map and enjoy the light show!
