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.

extendradiusarcgrows

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.

howtogetnewangle

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!

rightanglefromnowhere

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.

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s