🏠 back to Observable

How can I do Ellipse packing, like circle packing.

How can I do Ellipse packing, like circle packing to make better use of the screen real estate.


See that if this circle was an ellipse then the elements inside (if also ellipses) then they would appear larger and would that would make it easier to mouse over.

D3.pack only had one radius parameter and an ellipse has two. So it would mean writing a new pack function to manage ellipses.

Is there an easy way to hack the data returned from d3.pack, so a 2nd radius is added and the x parameters are changed? And would that be easier than coding an ellipse packing routine.

Other thoughts would be packing rectangles that have curved corners as it also has width and height and their rx and ry parameters would look interesting. This would be different from d3.treemap

1 Like

If you want all the ellipses to have the same shape and orientation, you could pack circles and then uniformly squish everything to match your preferred shape.

If you want to use arbitrary ellipse shapes, you’re going to need to find or develop your own ellipse packing algorithm.

1 Like