Tableau Beyond "Show Me" Part 2: Trigonometry

This is part 2 of a 3 part series on going beyond the charts available in the “Show Me” panel in Tableau. See the first part of the series: Beyond “Show Me” Part 1: It’s All About the X & Y

Note: I had originally only planned to write 2 posts, but have since decided to do one more after this. For more details on that final blog, see the end of this one. 

In my last post, I talked about the starting point for creating custom charts. In this post, we’re going to discuss how we can introduce some mathematics, mostly trigonometry, but also a little geometry (these two areas of math are very closely related) to take our custom charts to the next level.

Before we do that, I’ll share with you what started this series. I had recently posted a data visualization called The Beauty of Pi. Here’s a sample visualization I created based on Pi (this was not in the original Beauty of Pi visualization, but uses the same basic concept).

After the post, I received a lot of comments about how difficult it must be to create these charts. Ultimately, they weren’t that hard—all they required is a little math!! Those comments inspired me to write this series of posts, specifically this one. I’ll start with a brief lesson on the most critical elements of trigonometry, then we’ll circle back to this visualization and work through creating some of its key elements.

Intro to Trig

Trig is all about triangles. “What’s that?” you say. Yes, that’s correct, it’s all about triangles. It might not seem possible to create an circular visualization like the one above based solely on triangles, but that’s exactly what I intend to show you today. So please bear with me as we go through this explanation. I promise it will start to make sense after while.

Consider this triangle.

This is a right triangle because two of the sides are perpendicular, forming a 90° angle.

Each piece of this triangle has a name, as follows:

The longest side of the triangle and the side that does not form part of the right angle is known as the Hypotenuse. One of the non-right angles is typically labeled with the Greek letter θ (Theta). The side that shares the angle θ with the hypotenuse is called the Adjacent. And the side opposite θ (and the only side left) is called the Opposite.

So, we have four different variables here: θ, h, a, and o. Right triangles are quite special because, if you know two of these variables, you can solve for the other two with some relatively simple math. So, let’s say we know θ and h, as shown below:

With the following formulas, we can solve for the values of a and o:

a = COS(θ) x h

o = SIN(θ) x h

So, if we solve for these, we’ll get a = 7.66 and o = 6.43. I’m guessing that you remember Cosine and Sine from school. How they work internally isn’t really all that critical to doing the math, but I’ll just note that these functions are just one side of the triangle divided by another:

COS(θ) = a ÷ h

SIN(θ) = o ÷ h

There’s also a Tangent function which is defined as o÷ a, but we won’t be using that at all here. Again, it’s not important to know what they mean because we’ll just be using the formulas.

How is this Applicable?

If you’ve read this far, you are likely asking how this has anything to do with plotting the points for that fancy Pi visualization above. Just hang on a moment...we’re getting there.

Let’s place our triangle on a Cartesian plane (a simple x/y graph) with the point between the hypotenuse and the adjacent placed on (0, 0).

We can see that the value of a corresponds to our x-axis and the value of ocorresponds to our y-axis.

So, let’s say that you wanted to find the point where oand h meet. We’ll call this point p as shown below.

In this situation, being able to calculate the lengths of a and o would come in quite handy as a would be the x component of our point and o would be the y component. So, based on the math we did earlier, point p would be plotted at (7.66, 6.43).

What About Circles?

Now you’re still wondering what on earth this has to do with plotting points on a circle. Well, let me explain. Let’s start with a circle with a center point at (0, 0).

We can draw a right triangle to any point on the circle as shown below.

The above shows just a single triangle, but every single point on the circle would generate its own unique right triangle, with its own values for θ, a, and o. You may be saying that I forgot about h, but with a circle, its h will be the length of the radius. And the very definition of a circle is that it has the same radius all the way around. So h will always have the same value.

So, in order to plot the points on a circle, we just need to figure out how many points we wish to plot, figure out the angle of each triangle formed by those points and then do the math. We’ll do that in the next section.

Plotting in Tableau

So, how do we plot this in Tableau? My Pi visualization plotted 5,000 values of Pi on a circle, then connected them via lines or curves. We’re not going to address the lines and curves in this post, but I do want to demonstrate plotting the circle points. For simplicity sake, let’s plot 36 equidistant points on the circle. To do that, I’m going to start with a simple Excel spreadsheet with one record for each point as shown below (the spreadsheet actually has a total of 36 records). Note: Strictly speaking, you don’t need a row for every point as you could use bins, but for simplicity, we’ll just do it this way.

First, of course, we’ll connect Tableau to our spreadsheet. We then need to establish our circle’s radius. For our purposes, I’m just going to create a calculated field called Radius and set the value to 10 (you could make this any value you wish, use a parameter, or use some outside data).

This give us one piece of the puzzle for calculating the x & y coordinates of our points, so we need to get the second, the angle. To do this, we’ll use a little geometry. A circle covers a full 360°, so if we have 36 points (now you’re realizing why I chose that number), we can simply divide 360 by 36. This equals 10 so we now know that each of our points will be 10° apart from each other. So let’s create another calculated field called Point Spacingand set it to 360/36. Of course, this will always evaluate to 10, so we could just put 10. If you had a different number of points, say 5000 like in my Pi visualization, then the math would be the same—360/5000, which would result in a 0.072° difference between each point.

We’ll place point # 1 at 0° then point # 2 at 10° then point # 3 at 20°, etc. all that way through point 36 at 350°, as shown below. It’s  important to note here that, in trigonometry, 0° always starts on the rightmost point of the circle. In terms of a clock, it would be at the 3 o’clock position.

So, let’s create a calculated field for this called Angle with the formula, ([Point]-1)*[Point Spacing]

Now we have both the radius (h) and the angle (θ), so we can use our formulas to calculate x and y.

x = COS(θ) x h

y = SIN(θ) x h

But, before we go there, we need to briefly discuss Degrees and Radians. I won’t go into a ton of detail on this, but angles can be measured in either degrees or radians. That’s why your calculator gives you the ability to switch between degrees and radians (and I have no idea what “Grads” are, sorry!).

In the right mode, your calculator can perform cosine and sine operations with degrees, but many tools, including both Tableau and Excel, require you to convert your angle to radians first. So, let’s create a calculated field called Angle in Radians with the formula “RADIANS(Angle)”.

Then, finally, we can use our cosine and sine equations to create calculated fields, X and Y.

X = COS([Angle in Radians])*[Radius]

Y = SIN([Angle in Radians])*[Radius]

From here, we plot our coordinates. We’ll place Xon the rows shelf and Y on the columns shelf, then drop Point onto the Detail card (and change it to a dimension).

And viola, you have points on a circle. From here you can do lots of different things. You can change it to a polygon, then drop Pointon the Path card and you’ll get a filled circle. Or you can change it to a Line and get a closed circle.

Drawing a circle is fairly simple, but with these basic trigonometric equations, you can create lots of other charts, be it a radial column chart, a radial treemap, etc. or something completely custom. And, just to get you thinking about what you can do, here are a few examples from Rody Zakovich, Adam McCann, Alexander Waleczek, and myself. And, of course, you can always check out my Pi visualizations which inspired this post. Click on the images below to see the full visualizations.

Wrap-Up

Before I wrap this up, I do want to say that I’ve always been fairly good at math. Trigonometry was one of my favorite classes in high school. But, while I used some trig throughout college, I can honestly say I haven’t used it at all in the last 20 years. That is, until I started working with Tableau. My point here is that you don’t have to be a math expert to leverage these formulas. You don’t have to use them on a daily basis. And, quite frankly, you don’t have to understand how they work under the covers. You just need to understand how to leverage them to get the results you’re looking for. I hope that I’ve conveyed this information in a way that helps you to do that.

Next Post

As I noted above, I had originally planned to finish up this series with this post, but I’ve decided to do one more. In the next week or two, I’ll be posting third and final blog in this series which will deal with the use of parametric equations. Full disclosure: We’ll be using trig in that one as well!
(See the next in the series: Beyond "Show Me" Part 3: Parametric Equations).

Header Image: Wikipedia

Ken Flerlage, November 18, 2017

Twitter | LinkedIn | Tableau Public