Parent and child, nested.

The hierarchy family — four visx-engine layouts over one nested HierarchyInput contract. Two node-link reads (Tree, Dendrogram) and two enclosure reads (CirclePack, Treemap); branches tint through the same --chart-1…14 tokens by colorBy. No axis, no grid — just nesting.

The Hierarchy family@tarva/ui/charts/hierarchy

CirclePackhierarchy

Nested circles — leaf value as packed area. Click to drill down (Zoom).

Dendrogramhierarchy

A d3.cluster() tree — leaves aligned at equal depth.

Treehierarchy

A tidy d3.tree() node-link — structure root → leaf, collapsible.

Treemaphierarchy

Squarified nested rects — area = value, branch hue by colorBy.

Shared chrome · Legend

Facials Injectables Laser Body

Shared chrome · Tooltip

colorBy · category · branch hue

tile border · axis paint, neutral

Composes

visx + d3 ChartFrame useHierarchy useDepthPaint Legend Tooltip Zoom

When to reach for it

Hierarchy is for part-of-whole nesting — service categories, org structure, account rollups. Reach for Tree / Dendrogram to show structure (the node-link path from root to leaf), and CirclePack / Treemap to show magnitude (leaf value as packed area). One HierarchyInput drives all four — swap the component, keep the data.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait

Value	128
% of parent	41%
Depth	2