4 notebooks about drawing and animating 'waterlines'—an old technique for showing water in maps—in JavaScript.

Olivia Vane

I: Drawing water (in old maps)

II: Drawing waterlines on maps

III: Animating waterlines - SVG morphing

IV: Animating waterlines - Canvas strokes

IV: Animating waterlines - Canvas strokes [no web worker]

Waterlines collection

Is the Isle of Man not included in the source json?

Adam Roberts

well spotted - yes it's missing. Data from https://bost.ocks.org/mike/map/uk.json

Oct 2022 Update
The problem I was describing here is no longer visible. I assume there has been an update to D3's path or curve functions which solves it.
Olivia

Oct 2022 Update (as above)
The problem I was describing here is no longer visible. I assume there has been an update to D3's path or curve functions which solves it.
Olivia

1 (1).json

Screenshot 2021-01-25 at 11.30.44@1.png

Screenshot 2021-01-25 at 23.53.11 copy@1.png

Orkney.json

custom.json

buffered_lines.jpg

14-7906-5565.png

14-7907-5566.png

14-7908-5565.png

14-7898-5566.png

14-7907-5565.png

14-7905-5565.png

14-7908-5564.png

14-7906-5566.png

14-7908-5566.png

14-7908-5562.png

14-7898-5561.png

14-7908-5563.png

14-7898-5557.png

14-7905-5566.png

14-7898-5558.png

14-7907-5564.png

14-7898-5560.png

14-7900-5557.png

14-7899-5558.png

14-7904-5566.png

14-7899-5557.png

14-7898-5559.png

14-7901-5557.png

14-7908-5557.png

14-7903-5566.png

14-7907-5563.png

14-7904-5565.png

14-7906-5564.png

14-7907-5557.png

14-7908-5561.png

14-7899-5561.png

14-7902-5566.png

14-7900-5558.png

14-7899-5559.png

14-7898-5562.png

14-7899-5562.png

14-7899-5560.png

14-7900-5566.png

14-7905-5564.png

14-7903-5565.png

14-7899-5566.png

14-7901-5558.png

14-7902-5557.png

14-7907-5562.png

14-7902-5565.png

14-7901-5566.png

14-7898-5564.png

14-7908-5558.png

14-7903-5557.png

14-7906-5557.png

14-7899-5564.png

14-7906-5563.png

14-7903-5563.png

14-7900-5562.png

14-7902-5562.png

14-7901-5562.png

14-7900-5563.png

14-7907-5561.png

14-7908-5560.png

14-7908-5559.png

14-7904-5564.png

14-7898-5565.png

14-7902-5558.png

14-7904-5557.png

14-7905-5557.png

14-7907-5558.png

14-7905-5563.png

14-7901-5564.png

14-7901-5565.png

14-7904-5563.png

14-7898-5563.png

14-7899-5563.png

14-7900-5559.png

14-7902-5563.png

14-7899-5565.png

14-7900-5564.png

14-7901-5563.png

14-7905-5562.png

14-7906-5561.png

14-7900-5561.png

14-7904-5561.png

14-7905-5561.png

14-7903-5561.png

14-7907-5560.png

14-7906-5560.png

14-7905-5560.png

14-7903-5562.png

14-7900-5560.png

14-7900-5565.png

14-7906-5559.png

14-7906-5558.png

14-7905-5559.png

14-7901-5560.png

14-7902-5561.png