Drawing and animating 'waterlines'—an old technique for showing water in maps—in JavaScript

What does water look like? What is its shape? How can you draw it? Spanning design, history, coding, and maths, I explored these questions in a collection of four Observable notebooks about drawing and animating 'waterlines': https://observablehq.com/collection/@oliviafvane/watermarks.

Waterlines are a beautiful feature of 19th Century western maps. They look like ripples or waves radiating out from the coastline. Across these notebooks, I look at the many different graphics you use to draw water in maps — taking examples from historical maps.

Though they aren't the only way to draw water. The first of these notebooks collects together lots of examples of the different graphics used in maps of the past for water.

In Notebook II, I demonstrate drawing waterlines using JavaScript and D3.js.

I encounter some curiosities with smoothing functions:

And create some wilder versions:

Notebooks III and IV cover making waterlines move like real water, by transitioning SVG paths:

Or generating image frames with HTML Canvas:

Waterlines on a map of The Isles of Scilly, Ordnance Survey, 1896. From National Library of Scotland.

Le Choléra, 1884. Carte du choléra en Europe / dressée par L. Carvin. From Bibliotheque Nationale de France.

Deforming waterlines with map projection

See the notebooks for the code, more visualisations, and thoughts and reflections about waterlining on maps—especially, which direction should waterlines move: inwards or outwards?

I did a live code walkthrough and discussion with Observable about the waterlines project: