I’ve shared a collection of 4 @observablehq notebooks about drawing and animating 'waterlines'—an old technique for showing water in maps—in JavaScript

Old + new #dataviz #maps mash-up: a thread

observablehq.com/collection/@ol…
Waterlines are a beautiful feature of western 19th Century maps – ripples or waves radiating out from the coastline

maps.nls.uk/view/101169311

gallica.bnf.fr/ark:/12148/btv…
Though they aren’t the only way to draw water – water appears as *so many* different kinds of graphics in maps of the past

observablehq.com/@oliviafvane/i…
You can draw waterlines using JavaScript + @d3js_org

See the code in this notebook: observablehq.com/@oliviafvane/i…
I encounter some curiosities with smoothing functions…
…and create some wilder versions
Notebooks 3 and 4 cover making the waterlines move, like real water

By transitioning SVG paths observablehq.com/@oliviafvane/i…

Or generating image frames with HTML Canvas observablehq.com/@oliviafvane/i…
I run into why transitioning SVG paths is fiddlier than expected 😬

observablehq.com/@oliviafvane/i…
Check out the notebooks for more #map images, code, #dataviz, thoughts and reflections
#culturalHeritage #digitalhumanities

observablehq.com/collection/@ol…

On a closing note — Which way should waterlines move: inwards or outwards? What looks better - what do you think?

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Olivia Vane

Olivia Vane Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!