How did I create the spiral chart?

Jump, Darn Dolt!

My latest visualisation is the spiralling chart below this paragraph, showing all the tweets of a certain dolt in anagram form who I don’t want to give any more publicity than he already craves, part of the Makeover Monday project. I’ve been toying with a spiral chart for a while (for example, I created one for my 80s pop data featured in this post, but it didn’t really show anything other than to achieve the goal of producing a spiral, so I never published it). But this time I decided to take the plunge. Uncharacteristically, this time I’ve had a few requests asking how this was done in Tableau. I hadn’t really planned technical posts on this blog – I tend to think that if I’ve come up with something new it must be simple, and if I haven’t it’s because I’ve usually nicked the idea and code from elsewhere (like an artist, of course!) But in this case I’ll make an exception – I’ll try and explain the thought processes behind the visualisation rather than just the instructions to replicate it.

As usual, you can click through to the online version – there’s some interactivity inasmuch as the instructions for reading the chart are behind the question mark if you hover.

dashboard-1-66

 

So, before going into the nuts and bolts, perhaps a quick thought process as to why on earth you might produce a spiral chart. What kind of things would I put in this post if I’d phrased it “When might you use a spiral chart?” or “Is there ever a place for spiral charts in data visualisation?” There’s not really a good answer, other than it is a legitimate way of saving space showing data on a very long timeline. If each turn means something (such as a year) then you have a potentially space-saving way of showing, say, nine years of information rather than a very long line, and you can see information from the same time of each year in the same area of the chart. You can’t read information off it particularly easily, but as a simple, fun, visualisation, it has its merits. In my case, I was able to marry the chart to the analysis (using the term loosely) that the tweets are “spiralling out of control” and if you add up each of these factors I think I have at least a few scraps of justification.

Moving on to the chart itself, the first thing to note is that it’s just a scatter plot. There is no connecting line being drawn or path being followed. It just looks that way because all of the circles are so close together (a consequence of this particular dolt tweeting almost every day). So, this is just a plot of Y versus X for every tweet, where X and Y are determined by the date. With 30000+ tweets in the dataset, and 2800 or so days elapsed since tweet one, it’s just 30000+ circles plotted on one of 2800+ possible locations.

The key to this visualisation is obviously the spiral. We’ll design the spiral so that each turn of the spiral is one year (this aligns days/months together and nothing else would really make sense). Spiral plots are like circle/radial plots, except the distance away from the centre of the circle increases the further round the circle you go, and this distance continues to increase with each revolution.

In order to plot the spiral we need to know two things for each date:

  • (1) How far through the year is the given day? This will determine the angle of the plot and how far round the circle we want to plot the data.
  • (2) How far away from the start (first tweet) is the given day? This determines the distance of the plot from the centre (without this, all the plots from each year would overlap).

So we use the datepart function to get the day of year from 0 to 365

grab1

 

Then we can calculate the number of years since the start of the year 2009 and use this to work out which day of the whole dataset each date represents. First tweet was actually in May 09, but that doesn’t matter, it just means that the lowest value isn’t as low as zero. It’ll still give a sequential number of all the possible dates.

grab2

 

Next, the angle. We know that each day is 1/365th of the way round the circle. Tableau uses radians, but all you need to know is that there are (2 x π) radians in a circle. So the angle is however many 365ths of the year have elapsed, times (2 x π)

grab3

 

I should mention, I should strictly be a bit cuter here for 2012 and 2016 which were leap years, so in theory there two days (1/1/13 and 1/1/17) where we might have two days’ data on top of each other, where they coincide with 366/365ths of the way round the circle from the previous year. But for the purposes of this makeover visualisation, I’m OK with that. Just putting out there that I know this should be tweaked for 100% pedantic accuracy. But I don’t intend this visualisation to be used for analytical purposes. To be fair, I didn’t expect it to be open to scrutiny on this blog!

Now, we have enough to calculate X and Y using a bit of schoolboy trigonometry, see below for X:

grab4

Ignore the left hand sides for a minute, but first we want to start by plotting X and Y at the correct place on a unit circle based on the angle value we’ve worked out, with day zero (angle=0) at the 12 o’clock position (X=0, Y=1 (maximum)). Best simple explanation I can see of how to use cos/sin is here:

https://en.wikipedia.org/wiki/Unit_circle

… though note in the Wikipedia example that the angle starts at the horizontal (x-axis). We want to start at the vertical (y-axis) for our zero point. But cock your head and it makes sense – the sin or cos function will give you the correct point on the circle!

Calculation for Y is below …

grab5

 

 

For the left hand side of either the X or Y calculation we are controlling the multiplying factor which relates to distance away from the middle. This is based on the overall number of the day in the full timeline, which is what we want. The larger the “day of whole” figure, the more the sin/cos value is multiplied, therefore the further away from the centre it gets. It’s additionally controlled by two parameters: “Inner” and the imaginatively titled “parameter”. Without “Inner” the spiral would start at the origin, but tweaking “Inner” until you are happy with it will affect the size of the central area. “Parameter” controls the spacing of the spiral layers – again, try increasing or decreasing this number to get the lines closer together or further apart.

All you need to do now is plot Y vs X with the tweet ID on the detail shelf, and your spiral is in place. The key thing is that the values of X and Y don’t actually mean anything as such per se, they have just been calculated to put everything in roughly the right place on the screen, and to show your spiral you’ll remove all axes, headers and grid lines. Tableau will essentially plot all points as a ratio, in other words if X is, say, 200 it’ll be twice as far away from the x-axis as if X were 100. And the chart will automatically centre at X=0, Y=0. I settled on values of 50 for Inner and 4 for Parameter, which gives the spiral below. Note how it starts on the inside at about the 5 o’clock position (for the first tweet, May 2009) and spirals out to just after the 12 o’clock position on the outermost ring (since there are 12 days’ worth of Jan 2017 data).

grab-6

 

The rest is all formatting – I decided to go with the number of retweets determining the size, and the tweet method determining the colour. I’ve given the circles a small amount of transparency and a light grey border to allow for the overlapping effect, but obviously the nuances of the visualisation are up to the individual.

I think this was quite an easy one, though I say that as a closet mathematician! Perhaps it’s more accurate to describe as “easy when you know how”. No tricky Tableau functions to be aware of (apart from the favourite trig functions we all remember from school: SIN/COS), main visualisation on one sheet, no dual axes, only a few calculations and no level of details or data densification required. As mentioned above, I might struggle to think of a particular use case where a spiral chart is a perfect choice over and above anything else, but for me it’s just something a bit different which does its job visually but not in an over-analytical way, and given the subject matter of the visualisation, that’s fine by me.

Though if anyone can recreate it using wild spiralling strands of his hair, then I would be seriously impressed!

4 Comments

  1. Hi!
    I love the visualisation of a spiral plot and would like to use one for some research i am doing. Is there a particular software which enables someone to create their own spiral plot?

    Like

Leave a comment