In my Open Source animated pie chart code, AnimPie.js, I introduced a visual effect where the segments of the pie expand out so they can rotate between each other.
However, I was just extending the radius which meant equivalent pie slices become disproportionate. The effect can be extreme, where larger values appear tiny in comparison to smaller ones.
Here’s how I applied basic trigonometry and Pythagoras to solve the problem – keeping the arcs proportional.
Basic circle mathematics
First the standard equation of a circle and chord distance came in handy. I knew the radius, and I knew the angle of existing pie slices, but to keep the arc the same, I needed to know I’ve achieved it by measuring the chord ‘d’.
The effect of just increasing R
Here’s what’s happening when we just increase R by 10, without reducing the angle. The chord is growing.
How to calculate a reduced angle
My teacher taught me the following rhyme – I’ve never forgotten. Silly Old Harry Caught A Herring Trawling Off Alaska.
I took the problem out of it’s context – away from my pie example. This helped simplify what I was trying to achieve. I just wanted to get an angle knowing a radius and distance of chord.
Math.atan() takes the (opposite divided by adjacent) value and returns the angle in radians – which we can then use.
How does this help?
Good question – obviously I do not have a right angle in my pie.
BUT I CAN MAKE ONE!
The angle I’m looking for is twice alpha. Apologies for the lines not meeting up!
There you go kids – pay attention in mathematics lessons. Here’s the end result of the same pie we started with.