Just the thought of spiders, fills me with fear. The same can be said when I was at client site and I was asked to make a spider chart. It’s one of those charts I thought, yes it looks kinda cool, I don’t personally find it the best way to represent data and really, is it really worth the effort?

Well, this time I just had to do it. And you know what, I actually really enjoyed the challenge!

And a challenge it was. I know a few people have blogged about how to make a spider/radar chart or other round kinds of charts, but because I knew it wasn’t going to be easy, my mind went on a serious mental block and I couldn’t even read the posts. Eventually after going through the process in baby steps, I got the gist of it. If you are anything like me, this may be helpful. I’m going to break my process down into baby steps if you want to follow along.

The Data

I can’t seem to upload files here, so here is a screen shot of the sample data I used to create the Spider:

the samples data

The Data Prep/Alteryx Part

steps 1 to 8

1. The data is split into streams. The ‘current’ (apples sold) and the ‘ambition’ (target number) scores.

2. The first row (in both cases) is replicated and repeated at the end of the data set in order to form a full circle.

3. Create a path ID with will give direction to the lines between the points for each set of scores.

4. Name these sets of scores! I called them ‘current’ and ‘ambition’.

5. Bring both sets of scores back together using a union.

6. Find out what the highest score and the highest path number is.
The highest score will be used to draw the outline of the web and the highest path number is used later to calculate which values will be positive and which will be negative (because it’s a circular format, we will need negative numbers to make a full circle).

7. Append the highest score and the highest path number to the rest of the data as new fields.

8. Because I decided to make an outline for my chart, we now have to generate an extra set of rows (to one of the data streams, I chose the ‘current’ steam). This just creates a duplicate of what you already have, with an indication of if it’s the first or the second row.

steps 9 on

9. Sort these just to make life a little easier to follow.

10. Name and define the radar outline.
Since we have created a second lot of rows for the outline,
IF row count = 2 THEN Call it radar outline
and IF row count = 2 THEN fill in the max number for all values
(please see the formulae in the workflow)

11. Bring the ‘current’, ‘radar outline’ and the ‘ambition’ streams all together.

12. Create a copy of the value that you want to plot. Save it for later (this is really just so you can use them as labels in Tableau).

13. OK, this is where it started to bend my brain. Bring on the math.

To create the circluar effect, the first thing we need to do is make the latter half of the data negative. Luckily we we already have the max path so we can just use these  formulae to update the ‘value’:

IF [Path] > ([Max_Path]/2)
THEN -[Value]
ELSE [Value]
ENDIF
IF [Path] = [Max_Path]
THEN -[Value]
ELSE [Value]
ENDIF

14. Next we have to work out angles

– Work out the number of dimensions:
[Max_Path]-1

– Break the circle into segments:
360/[Number of Dimensions]

– Angles through the circle:
[Angles]*([Path]-1)

– Work out the radians (for some reason this just works better for calculating the SIN and COS than degrees)
[Angle Through Circle] * (PI()/180)

15. Now we have to calculate the adjustment for the X and Y coordinates and then apply this adjustment:

X adjustment: SIN([Radians])
Y adjustment: COS([Radians])

And then multiply X and Y by those adjustments. These are the values you will be plotting.

Again, unfortunately I can’t seem to upload the Alteryx file, but if you need it, feel free to  leave a comment or tweet me @amanda_patist.

The Tableau Part

 

The tableau bit isn’t hard, you just need to know what the tricks are. This frustrated me to no end.

The dotsCreating the dots: 

  1. plot the avgerage x and y.
  2. Bring day to detail and status to colour.

the lines

Creating the lines: 

  1. Duplicate your Y axis.
  2. Move path to the dimensions.
  3. Change the marks to a line.
  4. Bring Path to the line path.
  5. Remove day from detail if it’s there.
  6. Dual and synchronise the Y axis.

Now you can format to your heart’s content and then… TADAAAA…

Finished product

Feel free to have a peak at the workbook here:

blog 2

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s