0
$\begingroup$

Here's what I feel is a neat challenge:

I'm building a data visualization comprised of 3 circles of dynamic sizes. I want to have them all intersect at the centre of a bounding box that will also be of no fixed size (it will change).

I will be pulling the radii of the circles from the data, but then can change the x and y coordinates of the circles to make the visualization work.

How would I calculate the positions (x,y) in percentages of the origin of the 3 circles based on their radii and size of the bounding box. Bonus if I can maximize the size of the 3 circles so they take up a decent portion (say ~90%) of the area of the bounding box, for visual purposes.

In the end this will be implemented in JavaScript.

Paul

  • 0
    I assumed that it would have to be a square, so we can work with that contraint.2012-02-07

2 Answers 2

1

Assume $r_1. Then the best you can do is having the largest circle touching two adjacent sides of the bounding square and passing through the center of the square. The side length of the square would then be $(2+\sqrt{2})r_3$. The two smaller circles can then be placed freely obeying the given constraints.

  • 0
    Hmm, yes, I guess the intersection could be as simple as a percentage of the radius, however in order to determine the coordinates origins of each of the circles, including the one you suggest having touch 2 sides of the box, does require creating the relevant functions. Anyway, I'll look into it more, thanks for the help.2012-02-07
0

The largest circle would touch two sides and each of the small would touch a side. You can place the second circle on the edge of the first along a 45 degree angle from the origin.

$x_2 = y_2 = ((1 + \sqrt{2})/\sqrt{2}) \cdot x_1$

The third circle can be then placed where the first and second circles intersect.

$\theta_1 = \cos^{-1} ( 1 - 1/2 \cdot (r_2/r_1)^2 )$

$\gamma_2 = 45 - 1/2 \cdot \theta_1$

$x_3 = x_2 - r_2 \cdot \cos(\gamma_2)$

$y_3 = y_2 + r_2 \cdot \sin(\gamma_2)$

Then the dimensions of the bounding box are:

$w = x_2 + r_2$

$h = y_3 + r_3$

checkout a diagram here: http://i.stack.imgur.com/satQP.png

  • 0
    The other assumption that is made is x1 = r1.2012-02-08