# 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*o*corresponds to our y-axis.
So, let’s say
that you wanted to find the point where

*o*and*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 Spacing**and 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

**X**on 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

**Point**on 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).

(See the next in the series: Beyond "Show Me" Part 3: Parametric Equations).

Header Image: Wikipedia

Ken Flerlage, November
18, 2017

Ken,

ReplyDeleteThis is fantastic - thank you for making it easy to understand. I just discovered your site today, thanks to Patrick Byrne's update in the Tableau Community Digest. Your visualizations are fascinating, and I really appreciate that you make your Tableau workbooks available for download so I can understand your methodologies.

-Brent

Thanks for the kind words, Brent!!

DeleteKen,

ReplyDeleteThank you for taking the time to create these posts! I've been wondering how to get beyond the "show me" charts. I've tried to deconstruct some of the charts in the community and ended up confused if not a little bewildered. I appreciate your clear explanations and you absolutely had me at "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."

Best,

Eric

Thanks Eric. So glad you found the series helpful!

DeleteYou are the king, Ken. Was puttering along doing block maps, as in http://bit.ly/2ClVzbl , and feeling very proud of myself. And now I can pretend to be Adam McCann.

ReplyDeleteI want to do a chart that looks like a binomial tree, showing how survey takers progress through a survey. This gives me a good start.

Thanks also for the Red Sox viz. (I'm about 15 miles north of you: http://bit.ly/2ChILm5)

Glad this is helpful!! You're 15 miles north of me?

DeleteHi Ken. Fascinating posts. I've worked through (without cheating) the red socks example and I can say I understand that all. But now I'm trying to understand the data source behind the game of thrones example. I don't really understand how you've come up with those coordinates to plot everything. I think the angle θ is relating to the episode? But how did you approach getting data for the pre season one coordinates that lose conformation to the circle post season 1 start? And how did you approach the spacing between characters please?

ReplyDeleteThree of the examples at the end were by other authors. The Game of Thrones viz is by Adam McCann and he wrote a fantastic blog post on it, which you can find here: http://duelingdata.blogspot.com/2016/05/how-to-game-of-thrones-analysis-viz.html

Delete