Part-to-whole as packed circles: each item is a circle whose area shows its value, and the optional per-item path (1 to 3 group names, top down) nests the circles inside outlined group circles, so a budget, a skills inventory or a folder tree reads as clusters. Laid out by d3-hierarchy pack() (circle packing: the front-chain placement of packSiblings and the smallest enclosing circle of packEnclose, padding 3) on the server, so there is no script. A group's hue follows its top-level group and a deeper circle is a lighter shade of it; group circles are outlined, leaf circles are filled. Every circle carries its name, path, value and share in a hover title and in the hidden table (item, path, value, share of total), and the aria label gives the total, the number of groups and the largest item. A leaf name (and its value, in a wider container) is drawn inside the circle where it fits, and a group name at the top of its circle where it fits; both are 12 px text gated on the container width. Motion-ready: every moving value reads --p (build progress 0 to 1, default 1) through a per-depth --k, so a motion_timeline track on p builds it level by level from the groups inward and the standalone render is the finished picture; reduced motion shows the end state.
| Surface | Note |
|---|---|
| Prints the finished picture; no motion |
| Field | Type | Required |
|---|---|---|
| title | string (optional, max 80). | optional |
| items | array (required, 2 to 60) of {path (optional, array of 0 to 3 strings, max 20 each: the item's ancestor groups from the top down; same shape as the treemap's nested mode and the sunburst), name (max 24, default "Item n"), value (number above 0)}. An item without a usable path is a circle of its own at the top level. Items with a value of 0 or less, a value that is not a finite number, or that are not an item are dropped and counted in a note; items beyond the first 60 are noted and not drawn. With fewer than 2 usable items a note replaces the chart. | optional |
| unit | string (optional, max 12). Appended to every value in the title, the aria label, the labels and the hidden table. | optional |
| version | integer (optional, default 1). The circle_pack contract the payload was written for. Only version 1 exists; a higher whole number is drawn as version 1 with a note. | optional |
{
"type": "circle_pack"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:circle_pack",
"displayName": "Circle Pack",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/circle_pack",
"capabilities": [
"web",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Part-to-whole as packed circles: each item is a circle whose area shows its value, and the optional per-item path (1 to 3 group names, top down) nests the circles inside outlined group circles, so a budget, a skills inventory or a folder tree reads as clusters. Laid out by d3-hierarchy pack() (circle packing: the front-chain placement of packSiblings and the smallest enclosing circle of packEnclose, padding 3) on the server, so there is no script. A group's hue follows its top-level group and a deeper circle is a lighter shade of it; group circles are outlined, leaf circles are filled. Every circle carries its name, path, value and share in a hover title and in the hidden table (item, path, value, share of total), and the aria label gives the total, the number of groups and the largest item. A leaf name (and its value, in a wider container) is drawn inside the circle where it fits, and a group name at the top of its circle where it fits; both are 12 px text gated on the container width. Motion-ready: every moving value reads --p (build progress 0 to 1, default 1) through a per-depth --k, so a motion_timeline track on p builds it level by level from the groups inward and the standalone render is the finished picture; reduced motion shows the end state.",
"representativeQueries": [
"show a circle_pack: grouping and rough size as packed circles",
"part-to-whole as packed circles: each item is a circle whose area shows its value, and the optional",
"render a circle pack"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy