[data]storm Data Animations

Last year I was commissioned by Genevieve Smith-Nunes of readysaltedcode to produce some data visualisations/animations for their dance piece [arra]stre that premiered at the Brighton Dome. I was asked to do the same again this year for their new dance piece [data]storm and I was glad to accept!

[data]storm is a data driven dance performance that uses data and computer science theory as its inspiration. Themes include data transmission, signal processing, security, protocols, networks and, not surprisingly, weather data.

I created a few data-driven animations that are projected onto a screen behind the dancers and a few of them are described in this article.


'Rain' takes monthly rainfall from the UK Met Office and animates a rain ripple for each month's data, starting from January 1910. The more rainfall there was, the larger the ripple...

See the code and animation on Codepen.


'Audiostorm' was my attempt to create a data-driven animation that combines signal processing with the recurring storm theme. I found that if we take the waveform of a single audio sample and reduce its fidelity, it starts to resemble lightning. Using JavaScript's WebAudio API the music is sampled at regular intervals then drawn at various levels of fidelity.

See the code and animation on Codepen.


We wanted a data-driven animation of network data, be it internet routing data, social network data or anything else network related. I found it difficult to find suitable data for this, so I ended up writing a rudimentary social network simulator.

At random time intervals, 'users' are added to the network, and depending on factors such as friendliness, chattiness and interests, users make connections with each other.

The basic rules stay the same throughout the animation and it's interesting to watch the network slowly develop.

See the code and animation on Codepen.


'Virus' takes the network animation a step further by adding messaging between users. At random time intervals a user can create a message (similar to tweeting), represented by their circle being coloured. The user's followers may then choose to repeat the message (similar to retweeting).

What we find is that in the early stages of the network, the message doesn't tend to propagate throughout the network. However, as more and more connections are made, messages can quickly repeat throughout the network. In other words, they go viral. This probably approximates how viruses spread through networks, be they a population or a network of computers.

This ended up being my favourite animation and it's something that I'm planning on experimenting further with.

See the code and animation on Codepen.

Implementation details

Each of the visualisations was coded in JavaScript to run in a web browser. The Canvas element was used in all cases and D3's force-directed layout was used for Network and Virus.