Circle Packing
This example visualizes the Flare class hierarchy as an enclosure diagram, using nested circles to represent the structure and size of each node. The visualization uses a circle-packing layout, where each circle’s area is proportional to the numeric value of its corresponding data item, and parent circles enclose their children to reveal the hierarchy. The implementation relies on `d3.pack()` for layout, `d3.hierarchy()` for data aggregation, and renders the result as an SVG with styled circles and labels. The color scheme distinguishes leaf nodes as orange with full opacity, while non-leaf circles are blue and semi-transparent.
AI-generated descriptionEnclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.
See also this zoomable version.