search

kurkle / chartjs-chart-treemap

Chart.js module for creating treemap charts
MIT License
139 stars 34 forks source link

FR: Support circle as well as rectangle packing #15

Open Offbeatmammal opened 4 years ago

Offbeatmammal commented 4 years ago

is it possible to add capability of packing circles (rather than rectangles) into the parent rectangle maintaining relative size and clustered around either the center or an arbitrary point?

kurkle commented 4 years ago

Would it be circles in the last level only? Do you have an example image what it would look like?

Offbeatmammal commented 4 years ago

circles for my example a single level as attached where the circles scale as large as they can to fit in the bounding box, and rules can apply to control the colour/visibility of labels etc

kurkle commented 4 years ago

To me it looks like those circles could be much larger in that box? or is the bounding box not visible?

kurkle commented 4 years ago

Quick mock: image

Offbeatmammal commented 4 years ago

sample above was from a Tableau visualisation (not 100% what we want but close in look) and yes, there's a non-visible border being used to constrain the circles to give the slightly more vertical orientation (perhaps options to assign preferences for vertical/horizontal layouts would allow more visually pleasing defaults for the clustering as a longer term goal)

kurkle commented 4 years ago

ok. it also looks like that example lays the circles from top to bottom, leaving the top left corner unused. If that smallest circle was placed there, those circles could be bigger. anyway, an interesting concept.

Offbeatmammal commented 4 years ago

finally found a name for this - Packed Circle chart. There are a couple of d3.js samples but I'd prefer to stick with chart.js

kurkle commented 3 years ago

This is probably different enough to deserve its own package.

Offbeatmammal commented 1 year ago

in the linked FR at https://github.com/chartjs/Chart.js/issues/11443 I've dropped some sample code that relies on the bubble chart ... problem is getting it to scale so the bubbles stay in the canvas, and the circles actually touch! not sure if there's any logic existing in treemap that combines with the sample algorithm could help make this a reality?