Also known as: Bubble Hierarchy · Packed Circles · Circular Treemap
Circle packing encodes hierarchy through containment and quantitative value through area. Each parent circle contains its children; each leaf circle's area is proportional to its data value. The perceptual mechanism is two-channel: spatial containment communicates structure (which things belong together), while area communicates magnitude (which things are larger).
It is a circular variant of the Treemap. The structural encoding — containment — is actually stronger in circle packing than in a Treemap, because nested circles make parent-child relationships spatially unambiguous. The trade-off is space efficiency: circles pack poorly, leaving significant void between them. Treemaps fill their bounding rectangle completely.
Circle packing is best used when hierarchy revelation matters as much as magnitude comparison — when the viewer needs to immediately understand which items belong together before they compare their sizes.
Each large outer circle represents a humanitarian domain. Its size reflects the total relative weight of AI applications within that domain. The smaller nested circles inside each domain represent individual application areas; their size encodes relative investment or activity level within the domain.
Colour encodes domain membership — walnut for Crisis Response, blood-red for Healthcare, grey for Education, mist for Food Security, and sienna for Climate Resilience. Colour is applied at the domain level and inherited by all children, so any circle's domain is identifiable without reading a label.
Click any outer circle to zoom in and see its subcategories at full legibility. Click the background or the breadcrumb path to zoom back out. Click a legend item to zoom directly to that domain. Hover any circle for the exact value in the tooltip.
A Treemap would show the same hierarchy with better space efficiency and more accurate area comparison (rectangles are easier to compare than circles). The trade-off: hierarchical structure is harder to read. When branches interlock in a Treemap, the parent boundary can be ambiguous — especially at three or more levels of depth.
Circle packing makes nesting structurally unambiguous: a circle is either inside another circle or it is not. There is no visual ambiguity about which parent a child belongs to. This matters here because the domain assignment (Crisis Response vs Healthcare vs Education) is the primary story — the size comparison is secondary.
Circle packing is among the least space-efficient chart types. The gaps between circles are wasted display area — in a 600×600 canvas, roughly 21% of the space is void even with optimal packing. This limits how many nodes can be shown at a legible size.
Area comparison is a weak perceptual channel for circles. Humans are poor at judging the ratio between two circles of similar size — a circle with twice the area does not look twice as large. The chart compensates with interaction (click to zoom, hover for exact values) and with redundant colour encoding by category.
If precise magnitude comparison across all items is the primary goal, a bar chart or dot plot will outperform circle packing every time. This chart earns its place specifically when hierarchy revelation is as important as magnitude comparison.
This chart maps the relative scale of AI-assisted activities across five major humanitarian domains as framed by the Humanitarians AI initiative. Each outer circle is a domain; its size encodes the total relative weight of AI application activity within that domain. The nested circles inside each domain represent specific application areas — for example, within Healthcare, the nested circles might include diagnostics support, supply chain optimisation, and disease surveillance.
Crisis Response (walnut) and Healthcare (blood-red) carry the two largest circles, reflecting the current concentration of AI humanitarian investment in emergency triage, displacement tracking, and diagnostic support. Education (grey) and Food Security (mist) show mid-tier activity levels. Climate Resilience (sienna) is the smallest domain — reflecting that AI climate-humanitarian applications are newer and less deployed than the crisis and health verticals, despite being a growing area.
The zoom interaction resolves the chart's central limitation: at the full view, the five domain sizes are the story. After clicking into any domain, the individual application areas become individually legible, revealing which sub-areas are driving the domain's overall footprint. To substitute real data, replace the circle-packing/data.json file with a hierarchical JSON object following the same name / children / value schema.