Musical map

CREATED BY: John Tibbutt (@tibbuttj)


Animated map of sign ups over time. Each time a dot lands on the map a note is played. The notes vary in pitch according to the longitude of the sign up. Time speeds up and slows down to keep the rate of sign ups relatively constant.


I reused an existing script that animated patient flow around hospital wards, to drop the dots into the map according to timestamps. I then thought about adding sound effects and came across tone.js and specifically a jsfiddle that had nice synthy sounds: After a bit of experimetation with varying the pitch of the notes according to the longitude of the data point I ended up with a pleasing result.

Data load and wrangling in Qlikview, csv to json data file conversion via, animation in d3.js.