Generating visually pleasing circle pack
d3.js
Solution
See comments to the main question for how this developed...
Mike Bostock has created a couple of different visualizations of Mitchell's best-candidate sampling algorithm:
- with gray circles on a white background
- with white circles on a black background
The original purpose of Mitchell's algorithm is to sample a range of values, in a way that doesn't create repetitive patterns, but also isn't prone to creating clusters and gaps like a true random sample.
Bostock's demonstrations combine the sampling algorithm with the d3 quadtree data structure, which sorts data points into a tree structure that is divided into just as many branches as are needed to put each data point into its own node. With the quadtree, Bostock can quickly tell how much space there is around each new point added to the graph, and therefore how large a circle can fit in that space. The program starts by drawing circles of a chosen maximum radius, and keeps going until it repeatedly fails to find enough room to draw circles of the minimum radius.
Bostock's examples used a rectangular space in which to draw the circles, but as Vivid D demonstrated, it can be adapted to other shapes.
Problem
My goal is to generate a `circle pack` that mimics this: (don't pay attention on numbers, and colors at all, at the moment I am interested in circle positions and radiuses only) Based on an example from d3js.org, I created this jsfiddle, with result: I tried circle pack layouts, but results were even worse, lots of empty space... How can I get something that looks like the first pic? EDIT: This example seems closer to what I want, I just noticed. EDIT 2: Inspired by @AmeliaBR idea, codepen. Not yet final. Preview: Then I decreased max radius: The latest and greatest: max rad 12 min rad 3