I want to implement a function in javascript but I'm not sure how to construct the math logic behind it. What I need to have happen is position the circle in relation to a vertical line that cut it into two. The ratio of the slice is determined by percentages [(70,30), (40,60), (22,78)]. All I seem to know is that the area of a circle is:
$A = \pi r^2$
However I'm not seeing how to use this when dealing with portions of a circle. See diagram (note: I just eye-balled what (20,80) should look like)
Question
If I have an array of data tuples like [(70,30), (40,60), (22,78)], what formula will help me position my circle so that the area of the circle at either side of the line correctly reflects the percentage value (as in the diagram?).
In other words I'm taking percentages as inputs and what I need to output is the coordinates for the center of the circle such that the area as sliced by the line equals the percentage inputs.
You have the general form of the circle: $$(x-h)^2+(y-k)^2=r^2$$ You can set your circle in $xy$-coordinate space as follows (where $h=r$ and $k=0$):
You can rewrite the circle now as a function: $$f(x)=\sqrt{r^2-(x-h)^2}+k^2$$ Now, if $P$ is the smaller of the two percentages you are going to divide your circle with, then simply you have to solve for $a$ to satisfy your problem. Here, $a$ is the $x$-coordinate of your intersection point $(a,f(a))$:
$$P\pi r^2=\int_0^a f(x) dx- \frac12af(a)$$