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. **S**illy **O**ld **H**arry **C**aught **A** **H**erring **T**rawling **O**ff **A**laska.

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.