How To: Coxcomb Charts in Tableau

In my earlier post, I mentioned how I decided to use Coxcomb charts in my latest viz. Before I go any further, I want to give credit to Bora Beran for his original post on creating these chart types in Tableau as well as providing a sample workbook. All of the custom formulas used in creating the charts are to his credit.

At the request of several members of the community, here is a step-by-step guide (although there may be a better way, but oh well) on how to create them in Tableau.

For this tutorial, we will be using the following file: 2016_Clemson_Yards_by_Game. This file represents Clemson’s  total passing and rushing yards per game for the 2016-17 season. The goal for our visualization will be to create a coxcomb chart that shows the comparison between passing yards and total yards by opponent (by design, it will show us the Clemson’s disparity between passing and rushing offense by opponent for the 2016 season).

The dataset looks like this:

Date
Site
Opponent
Result
Passing Yards
Rushing Yards
Total Yards
9/3/16
Away
Auburn
W (19-13)
248
151
399
9/10/16
Home
Troy
W (30-24)
292
122
414
9/17/16
Home
South Carolina State
W (59-0)
328
227
555
9/22/16
Away
Georgia Tech
W (26-7)
304
138
442
10/1/16
Home
Louisville
W (42-36)
306
201
507
10/7/16
Away
Boston College
W (56-10)
278
230
508
10/15/16
Home
North Carolina State
W (24-17)
378
126
504
10/29/16
Away
Florida State
W (37-34)
378
133
511
11/5/16
Home
Syracuse
W (54-0)
370
195
565
11/12/16
Home
Pittsburgh
L (42-43)
580
50
630
11/19/16
Away
Wake Forest
W (35-13)
202
254
456
11/26/16
Home
South Carolina
W (56-7)
372
250
622
12/3/16
Neutral Site
Virginia Tech
W (42-35)
288
182
470
12/31/16
Neutral Site
Ohio State
W (31-0)
265
205
470
1/9/17
Neutral Site
Alabama
W (35-31)
420
91
511

Part 1: Data Prep 

After downloading Bora’s workbook, I began the process by investigating the data architecture behind his viz. What I found is that there are only a few fields needed to get this to work.

Now that we have our data, we need to get it in the right format. There are two ways to do this: using Tableau Prep or by Custom SQL (both to pivot and union the data). For this tutorial, I will be preparing the data using Tableau Prep.

Tableau Prep Flow:

Once you have the dataset downloaded, we will begin the process by opening a new flow in Tableau Prep and connecting to the workbook. Once it is open, make sure to uncheck the box beside Rushing Yards as we do not want this field to be included in the next steps. We will then want to drag a second instance of the dataset into the flow for the future union step.

ezgif.com-resize

Once we get the initial connections out of the way, we will then focus on pivoting each dataset. To do this, simply select the plus sign to the right of the first connection and select pivot. We will be pivoting this dataset on the two yardage types: Passing Yards and Total Yards. Tableau Prep should automatically name the PivotFieldValues “Yards”, but in case it doesn’t, make sure to rename it that. The PivotFieldNames field should be renamed to “Type”. This step will then be repeated for the second instance of the connection.

step 2gif

After both pivots have been created, you will need to then create a field called “Path” in each of the instances. This field will be used to draw the polygons (slices) for each opponent and yardage type in the coxcomb chart. In our case, we will be using paths of 1 and 102 (recommended from Bora’s workbook). The reason we will be using these values is because we want the edges of each ‘slice’ to be rounded, and not squared off. The calculated fields we will be creating further down, will take these paths and assign a total of 102 X and Y points to draw each slice.

step 3 clean

We are now ready to union our two instances together and remove the Table Names field from it.

Step 4 clean gif

The last step is to output the results in a format of your choosing. Save the file wherever you would like. Next, we will be moving on to actually creating the chart in Tableau Desktop.

Step 5 clean gif

Part 2: Creating the Charts

Now that we have a nice, clean dataset to work with, the next step is to open Tableau Desktop and connect to the file. Before we begin creating the viz, we will need to move the ‘Path’ field into the dimensions shelf, create a bin of it (bin size: 1), and change its data type back to continuous. The ‘Path (bin)’ field will be used as the path to draw the polygons as well as basis of several key table calcuations.

TD 1 clean

Next, there are several calculated fields that need to be created:

 

Now that these calculated fields have been created, we can begin constructing the chart. The first thing we need to do is drag both the ‘Opponent’ and ‘Type’ fields into the Colors shelf. Changing the mark type to Polygon, then drag the Path(bin) field into the ‘Path’ mark. We will then be sorting ‘Opponent’ by date (descending), minimum. By sorting the ‘Opponent’ this way, it ensures that the games will appear in the right order in the chart; they will follow a clockwise pattern, starting at around the 3:00 position.

TD Step 2 Clean

The next step is to drag the ‘X’ field we created into the Columns shelf and also drag the ‘Y’ field into the Rows shelf. To begin with, the worksheet will still be blank. We are now ready to begin editing all of the nested table calculations for both the ‘X’ and ‘Y’ fields. This step is imperative. Starting with ‘X’, click the drop down on the right of the pill and select ‘Edit Table Calculations’. These same steps will be repeated for the ‘Y’ table calculations. Here is the breakdown of how the table calculations should be set:

  • ‘X’ and ‘Y’ should be calculated using ‘Path(bin)’
  • ‘Index’ should be calculated using ‘Path(bin)’
  • ‘Angle’ should be calculated using ‘Opponent’
  • ‘Edges’ should be calculated using ‘Opponent’
  • ‘Number of Slices’ should be calculated using ‘Opponent’ and ‘Path(bin)’
  • ‘Count’ should be calculated using ‘Opponent’

Table Calculations for ‘X’ and ‘Y’ (the chart will start taking shape):

table calcs clean

The first thing you will notice is that the colors do not make sense. Here is where you choose a color palette that suits you. Unfortunately, you will have to color each of the different ‘Types’ by ‘Opponent’ manually. This isn’t a big deal since you can control or command-click each ‘Opponent’ and ‘Type’ and color them all at once. I’m choosing to use purple for “Passing” and orange for “Total” (for obvious reasons).

colors clean

We have made it to the last step; setting up the tooltip! This is relatively straightforward as there are only a few pieces of information that I want to show on the tooltip: Date, Opponent, Type, and Yards. To get the tooltip to work correctly, we will need to create two table calculations: ‘Date for Tooltip’ and ‘Yards for Tooltip’. Here are the formulas you will need to use:

Screen Shot 2018-11-09 at 8.43.51 AMScreen Shot 2018-11-09 at 8.44.13 AM

We can now use the two calculated fields to set up our tooltips. Start by dragging them both into the tooltips shelf and then edit each of the table calculations to calculate across ‘Path(bin)’. We will then edit our tooltip to just show the fields that we are interested in. It is important to make sure we calculate across ‘Path(bin)’ for each of these fields because if not, it will only show the values on the maximum ‘X’ and ‘Y’ coordinates. Adjusting the table calculations will apply the max yardage values across all points based on ‘Opponent’ and ‘Type’.

 

That’s it! You have now successfully created a Coxcomb chart in Tableau. The great thing is that these steps can be repeated for various types of data. As long as you follow the same steps, maybe substituting sales for yards, product category for type and month for opponent, the results would be the same. I hope you find this tutorial useful! Now, somebody needs to figure out how to get labels to work properly…

Here is the final version of my workbook which can be downloaded from Tableau Public:

Coxcomb Chart Tutorial Clemson's Breakdown of Passing and Total Yards by Opponent for 2016

Stay tuned for more…

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.