Making waterlines in locator maps move: an experiment

This is Hans, a software engineer at Datawrapper, and the person who works a lot on our locator map feature. For this week’s edition of the Weekly Chart, I made an animated locator map.

A few days ago, I came across a tweet by data visualization designer Olivia Vane about animated waterlines – or as we call them at Datawrapper: vignettes. As a mapmaker who also has a background in animation, I was immediately intrigued by their aesthetics.

So I tried to animate our locator maps vignettes using Datawrapper.

Here is another take on the animated vignettes:

If you want to know more about showing water in maps and how to animate it, have a look at Olivia’s Observable notbook.

How I did it

First, I created the vignettes (here we explain how that works). I experimented with creating several vignettes with different opacity and widths. For each animation frame, I took a screenshot which I later stitched together using the command line tool ImageMagick, like so:

convert -fuzz 1% -delay 20 -layers Optimize -loop 0 *.png vignettes.gif

This ImageMagick command will create a GIF called vignettes.gif out of all the png files in the folder you are in.

How it went

Although Datwrapper is not an animation tool, I was quite pleased with the results. Making screenshots is a bit of a pain. But the ease of creating vignettes in our tool made up for it.

---

That’s it from me for this week! Do let me know if you have feedback, suggestions, or questions: I am looking forward to hearing from you at Twitter. We’ll see you next week!