AnimPie – HighSchool Trigonometry comes in handy.

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’.

Math 101

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.



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.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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