Making waves with Fourier Series, Part 3

Making waves with Fourier Series, Part 3

This is the third in my series about how I built my animated dashboard about Fourier Series:

Making waves with Fourier Series, Part 1: The text boxes, why so difficult?

Making waves with Fourier Series, Part 2: The SIN graph, the waterfall graph and data densification

Making waves with Fourier Series, Part 3: The circle graphs and table calculations

By the end of the last post, I had built up the SIN wave graph (bottom-right in the dashboard) and the waterfall chart (not visible above). In this post, I’ll go through the steps for creating all of the elements in the main graph at the bottom of the dashboard, which I simply called “Circles”. The components of this can individually be turned on and off in the dashboard. They are:

  • Spokes: These represent the size and direction of each harmonic
  • Outline: This represents the path that the end of the very last spoke takes going through the whole cycle
  • Circles: At the end of each spoke, a circle is drawn whose radius is the size of the next spoke
  • Connector: This connects the end of the last spoke to the SIN diagram to reinforce the relationship of what is going on in the two diagrams

Here’s the description from the dashboard itself:

If you imagine the minute hand going around a clock, then the height of the end of the hand will look like a SIN wave if you plot it over time. Try setting the number of harmonics to 1 and running the animation to see this in action.

Now imagine a second clock, centred on the end of the minute hand, which is a different size (different radius) and goes round at a different speed. This is like adding the next harmonic. Set the number of harmonics to 2 an try again. The more of these clocks you attach to each other, the more harmonics you have and the closer the path of the end of the very last minute hand traces the shape that you are looking to plot, e.g. a square wave.

The coloured “spokes” in the circle diagram below are like the minute hands in the clock analogy and the circles are like the clock faces. The length of each spoke, the size of each circle and the speed at which the spoke goes round are calculated from the equations for each harmonic. See the equations by clicking on the tab at the left for the specific wave. For example the second harmonic (second “clock”) for a square wave has a size of 1/3 and goes round at three times the speed of the first clock.

Putting a spoke in the wheel

The spokes are the starting point for all of the other graphs.

The calculations are very similar to those for the SIN graph with two exceptions:

  1. Whereas the SIN graph calculates the expression for each value of N for a particular value of t, giving a one-dimensional movement (up and down) for the spoke, I need two dimensions, so the SIN calculation is duplicated as a COS calculation for movement left to right.
  2. I wanted the spoke diagram to start from the middle of the plot (0,0), so I needed one more “dummy harmonic”. The index for values of n therefore started at a value of 0 instead of 1.

The calculation for the left-right coordinates of the ends of each spoke therefore look like this:

This simply replaces all SIN calculations that I used before with COS calculations. I also added the case for the central point for the dummy 0 harmonic.

This is naturally a nested table calculation:

For the calculations to work, I need my binned values for n, [Harmonics, binned (extra step)] and the index of this for use in calculations, [n – harmonic factor along index (spokes)] in details so that the calculations work correctly. See the previous post for details about binning and data densification.

When I drag my SIN and COS calculations to the viz and set the mark type to circles, I get:

This is correct, but I want lines. Changing the mark type to lines gives me:

Close, but not quite there. I need to tell Tableau that I want the line to go along the values of n from 0 to 1, 2, 3, etc., so I change [n – harmonic factor along index (spokes)] from Details to Path and get the desired output:

Like the circles that you find in the windmills of your mind

For each circle, I need two new elements:

  1. The centre of each circle. This is based on a running sum of the ends of each spoke
  2. A new set of binned values for the circle itself

The x value of the centre of the circle for particular values of n and t is calculated by:

Note that I have set the default basis for the table calculation to save effort and errors later.

I set up my new binned values as 0 to 360° in steps of 5°:

In practice, the above values just make it easier to understand as I’ll be using an index value, which goes from 1 to 72 and multiplying it by 5 to get my degrees.

The x-coordinates around the sub circle for a given value of n is given by:

Note that Tableau works by default with radians The radius value above is taken directly from the original Fourier series. For a square wave:

The radii are therefore 4/π x 1, ⅓, ⅕ etc.:

The five-deep nesting of table calculations for [x for sub-circles] looks like this:

This is truly not for the feint of heart, but it’s good practice!

Looking good:

Don’t worry about the distortion. I’ll come back to that in the next post.

The path less travelled

The outline of the curve is simply the path traced by the last point in the spoke diagram. The only problem here is that I needed to use a rather rough granularity for the animated visualisation to work and I needed a much finer grain for the outline diagram.

I therefore had to rebuild most of the bins and calculations that I used for the spokes.

Once I’ve done that dragged my new x and y calculations to the viz and set the mark type to line, I get:

This has drawn the paths for each of the values of n (harmonics), including my dummy 0 harmonic. I therefore created a calculation to see if the mark is for the last harmonic as given by the parameter set by the user:

Dragging this boolean calculation to the filters shelf and selecting only true values gives me the desired result:

Please connect me

The left-hand end of the connecting line is simply given by the end point of the last spoke. The right-hand end always has the same y value as the left and this is given by the existing value I have, [Spoke y running sum]

To create the line, I need a path. And to create the path, I need yet another bin, this time with just two values. I can use this to calculate my two x-values:

I’ll discuss that Max x calculation in the next blog. It’s used for alignment purposes and similar values have been in all of the graphs detailed here.

Comments are closed.