Steal Like a Data Visualiser

How I recreated a particle orbit in Clojure and improved my animation skills in the process

Thomas Sojka
Jul 3, 2020 · 10 min read
Image for post
Image for post
Original Picture by bgs_digital_creator on Pixabay

Improving your data visualisation skills through theft may sound vicious at first, but it is a very effective learning method and hopefully a great tribute to the original creator.

Why did I steal?

If we’re free from the burden of trying to be completely original, we can stop trying to make something out of nothing, and we can embrace influence instead of running away from it.

So I thought, if that works for art, then it can work for data visualisation as well. I checked my list of favourite data visualisations and decided to steal one. This article is about how I stole a viz from ‘The Unlikely Odds Of Making It Big’ by The Pudding.

Note: I’m not actually encouraging you to steal someone else’s work. This article explains how useful recreating other people’s ideas can be, to practise and enhance your own skills.

What did I steal?

The visualisation is split into three parts: a particle orbit introducing all bands, a bubble chart about the bands who made it big and a filterable list with information about all bands who tried.

The particle orbit is the most impressive part of the article, and what I wanted to recreate. The journey of each band plays out in front of you as you scroll through the article. Initially you see 3000 white particles moving in a circle; each represents a band. While scrolling, you’re effectively applying filters on those bands as you move through time from 2013–2016. The more success a band had, the closer it moves to the middle. When looking at this visualisation, many details stand out e.g. the colour-coding and the embedded music players - these enable the reader to listen to a sample of all bands who made it big. Ultimately, the sheer number of particles illustrates really well just how few bands make it big in New York City.

What did I learn?

I think the “sweet spot” in learning is finding a task that builds on your existing skills. Don’t try to build on too many skills at once, or you’ll just get frustrated. Try to find a task that will challenge you just enough. Recreating the particle orbit was a “sweet spot” task for me as I could build upon the following skills: Processing, Trigonometry, Vector math, Particles, Flow fields and use of Autonomous agents.

I also learned some new skills: Creating dashed circles and curved text, and Managing multiple transition stages with Multi-dispatch and ad-hoc inheritance.

Now you have a good overview about what I stole, let’s get into the nitty-gritty detail and see how I stole the particle orbit.

How did I steal?

Data

In the orbit you can see three major groups of bands, those who gigged at small, medium or big capacity venues in NYC from 2013-2016. Each medium band used to be a small band and each big band used to be a medium one. This creates a hierarchy within the data, and in the “Visualisation” section below you’ll see how this hierarchy minimises the amount of code we have to write. But first, let’s take a deeper look at the design.

Design

- In the initial orbit there are 15 lanes of particles.

- It seems that the particles randomly switch lanes but actually each particle stays at the same lane. The switching effect is created by using different speeds for the particles.

- When you pass a scroll point a short transition kicks off to get into the next state.

- It’s possible to go backwards and the particles will slowly find their old position in the outer orbits.

Writing down those details helped me to gather all requirements for the visualisation, so I could start working.

Visualisation

Creating my circular flow fields

Example of an autonomous agent moving through a flow field
Example of an autonomous agent moving through a flow field
Example of an autonomous agent moving through a flow field

My idea was to create a flow field where the arrow directions form a circle. Each particle in the orbit would be represented by an autonomous agent. In order to do this I had to learn how to calculate the correct angle for each arrow. I have recently improved my knowledge about trigonometry from reading The Nature of Code and working with Khan Academy. But there is a big difference between learning about different math concepts and applying them when needed.

The basic circular flow field. Arrows point in a clockwise direction
The basic circular flow field. Arrows point in a clockwise direction
First circle with arrows pointing in circular direction

I did not make any progress in rotating the force arrows for my circular flow field for many hours, which was pretty frustrating. In order to improve my understanding of the problem I created a debugging tool which showed me how trigonometric functions change when the angle of one agent is adjusted. I was able to find a solution to re-compute arccosine based on the y-position of an agent when it is moved.

Being able to interact with my problem helped me a lot. However, this approach is a really complicated solution! Some days later I learned about the trig. function atan2 which solved everything in one line of code. So on the one hand I spent several hours coming up with a solution I would later throw away, but on the other hand I improved my understanding of trigonometric functions along the way. I had learnt something, so it wasn’t a total waste of time.

After the flow field was in place I was thrilled to place my particles in the flow field and let them loose. By now I had added the second and third circle fields and the whole orbit looked like this:

Particles in a flow field: particles in three circular orbits rotate clockwise and flow out to the edge of the picture
Particles in a flow field: particles in three circular orbits rotate clockwise and flow out to the edge of the picture
Particles in a flow field

Adding a steering behaviour to the autonomous agents

I remembered reading about autonomous agents with steering behaviours in The Nature of Code: I knew it was possible to move an agent to a specified target point, so the solution I ended up with was to constantly update the specified target point to move the particles along a circular path.

Autonomous agent particles moving along a circular path
Autonomous agent particles moving along a circular path
Autonomous agent particles moving along a circular path

It was great to see my particles now moving in a circle and not escaping. But once again it meant I had to delete everything I’d done so far with the flow fields. On the plus side, at least taking a wrong turn in the beginning turned into a great opportunity to improve my flow field knowledge :-)

Animating transitions

Scrolling through my first “Small Venue” orbit
Scrolling through my first “Small Venue” orbit
Scrolling through my first “Small Venue” orbit

This involved learning how to draw a dashed circle and curved text, since none of those functionalities are provided out of the box by Quil, the library I used to draw the visualisation. In addition I marked the band Sylvan Esso, just as in the original visualisation.

The next step was to add another scroll transition so that medium bands move into a second orbit after a certain scroll position is passed. Once again, this is done by updating the steering behaviour. In addition, the colour and opacity of the particles change based on the scroll position, and the “MEDIUM” label appears.

Transitioning to the “Medium” orbit
Transitioning to the “Medium” orbit
Transitioning to the “Medium” orbit

Once the first and second particle orbits were done, creating the third orbit was straightforward. All bands who made it big now change their colour to pink and steer towards a predefined position in the middle of the “BIG” orbit circle.

I still remember when I saw this visualisation for the first time and thought how one day I want to create something great like that, so you might guess how immensely proud I was after my recreation was finally done :D

Tidying up

Conclusion

My version of The Unlikely Odds Of Making It Big orbit
My version of The Unlikely Odds Of Making It Big orbit
My version of The Unlikely Odds Of Making It Big orbit

The complete code for the visualisation can be found here: https://github.com/rollacaster/steal-like-a-data-visualizer

Bloopers

Image for post
Image for post
At some point the bands started celebrating
Image for post
Image for post
There’s a party on the right but not all bands are invited!
Image for post
Image for post
Finally, the bands get together for a really huge concert
Image for post
Image for post

Nightingale

The Journal of the Data Visualization Society

Sign up for The 'Gale

By Nightingale

Keep up with the latest from Nightingale, the journal of the Data Visualization Society Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Clare Harvey

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store