Home/ Questions/Q 7182637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T17:48:43+00:00

I’m looking for some high-level recommendations for how to implement a project I’m starting

  • 0

I’m looking for some high-level recommendations for how to implement a project I’m starting for a client.

This is a web page that will include an SVG canvas (sized 920px W x 450px H) containing 20-40 “circular” images (i.e., they may just be square images cropped with a circle). The size of the images will probably range from about 50px to about 200px diameter, each one set dynamically within that range based on data from an API. It’s basically a dynamic data visualization, so pretty much every aspect of this needs to be configurable/dynamic.

I think the hardest problem to solve is how to distribute these images within the given canvas area, considering that they will vary in size, and should appear to be evenly/randomly distributed (i.e., they shouldn’t line up to a grid, be clumped together, or be in groups of similar sizes). It’s OK if they overlap slightly. Here’s a quick sketch of how this should look, ideally (each gray circle represents an image):

https://skitch.com/troywarr/gwj14/adobe-fireworks-cs5

FWIW, I was planning to use Raphaël as an SVG library; I’ll also have jQuery available and can probably use any other libraries as needed. This needs to be cross-browser compatible back to IE7.

Can anyone suggest a general approach to this problem, any specific libraries or algorithms to look into, or provide any other guidance or suggestions? Please let me know if this description isn’t clear, or if you need any additional details.

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is how I would tackle it:

    First decide on the percentage of the screen that will be filled in with circles and the number of circles that will be displayed. You can use that to determine the average radius of each circle using the area of a circle formula – e.g. given x circles what would the average radius of all the circles have to be to cover y% of my container. You can then decide how much you want the radius to vary, that is +/- 50%. Unless the number of circles is very small you should get a good result – statistically that is.

    Then I would divide the screen in to a rectangular grid – I know that is not what you want just be patient 🙂 The dimensions of the grid are calculable from the number of circles, e.g. 16 circles would fit nicely into a 4 X 4 grid. The number of circles can be less than the number of cells but not a lot less.

    I would then select a random x,y co-ordinate inside each grid cell as my circle’s center. I would also leave a padding of about 25% around the edges so that my circle is not centered too close to an edge.

    You could then check for overlap – the ratio of (r1 + r2) / distance between the circle center points will equal 1 if the circles touch, be less than 1 if they don’t and greater than 1 if they overlap. A ratio of 1.1 is a small overlap; careful of the limit here – exact same centers result in a distance of 0 and a division by 0 error.

    One thing to worry about but should not happen unless you pick a very high initial coverage percentage or the number if circles is much smaller than the number of cells. If all the cells adjacent to a given cell have circles close to that cells edges, especially if they overlap the edge, there may not be enough room (even with circle overlap) for the current cell’s circle. This can be checked for and handled by shrinking the radius or moving a circle away…

    NOTE if the number of desired circle’s does not exactly match your square (or rectangular) grid, just randomly leave some cells empty…

    • 0