This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.

A radial tree diagram arranges a hierarchy around a circle. The root sits at the centre, depth moves outward, and parent–child links branch around the circumference. It is the tree diagram bent into polar coordinates, and it exists for one reason: a circle has far more room at its edge than a line has at its end. A tree with sixty leaves needs sixty slots along the bottom of a Cartesian layout; the same tree puts those sixty leaves around a ring and fits in a square.

The radial cluster form places every leaf at the same outer radius. This makes depth consistent and uses circumference efficiently when a hierarchy has many terminal nodes — which is exactly the situation in which the ordinary tree runs out of width.

What it is

The chart is a node–link hierarchy expressed in polar coordinates. Angle separates branches; radius encodes depth. Curved radial links preserve the path from the centre to every leaf, and leaf labels are printed along their spoke outside the outer ring so that every one of them is upright and legible. In cluster mode — the default — every leaf sits on the same terminal ring regardless of how deep its branch runs; in tree mode each node sits on the ring of its own generation.

The hero chart above is a supermarket's category tree: five departments, twelve categories, thirty-two subcategories on the outer ring. The reader sees the balance of the store at once — Fresh and Pantry each own a third of the circle, Frozen and Household are thin wedges — and can follow any subcategory inward through its category to its department along a single curve. Hover a node to light its branch. Each subcategory also carries its count of stocked lines, and node size follows it: area in proportion to the number, with every category and department sized by the sum of the leaves beneath it, so Cheese and Cereal are the fattest dots on the ring and Chilled is the largest of the inner nodes. Randomise perturbs those counts and nothing else — the dots swell and shrink while the angles, the rings and the links stay put. It is a legitimate second encoding for a radial tree because it sits on the node, not on the layout: the angle still counts leaves, and size now counts something the angle cannot.

When to use it

Radial trees are the right choice when:

  • The hierarchy has many leaves and relatively few levels — dozens of terminal nodes, three or four generations.
  • Readers need to see branch structure and common terminal depth rather than exact positions.
  • A wide Cartesian tree would need more horizontal space than the page has.
  • The balance of the major branches is part of the story: the angular share of each top-level branch is the count of its leaves.
  • Individual labels can be placed around the circumference without excessive collision.

When not to use it

  • Readers must compare exact horizontal or vertical positions. Polar coordinates make that impossible.
  • The hierarchy is deep enough that the inner rings become crowded: every ring inward has less circumference to share.
  • Long labels would dominate the circumference. A label runs radially outward, so the diagram's width is the ring plus two labels.
  • The reading task is a top-to-bottom chain, such as a reporting line. A Cartesian tree reads that in the direction people expect.
  • The circular form is being chosen for novelty rather than for a genuine space or structure advantage.

Design principles

Choose cluster or tree by what depth means

Cluster mode aligns every leaf on the outer ring, which keeps the labels in one clean circle and gives every branch an even share of the rim. Tree mode places each node on the ring of its generation, so a shallow branch stops short and the reader can see uneven depth. Choose cluster when the leaves are the point; choose tree when the depth is.

Cluster mode: every leaf on the terminal ring
A taxonomy of uneven depth. Some branches are three levels deep, some two, but every leaf is pulled out to the outer ring, so the labels form one circle and the reader can scan the rim as a list.
Tree mode: each node on the ring of its own generation
The same taxonomy with the nodes placed by depth. Credit, Listed, Direct and Private equity stop on the second ring because they were never subdivided; the labels now sit on two different circles and the outline is ragged, but the depth is visible.

Keep the root visually quiet

The root anchors the structure but rarely carries the main analytical message. Draw it as a small neutral mark at the centre — the house style uses a grey dot — and let the branches carry the colour. A large or coloured root pulls the eye to the one node that says the least.

Reserve the circumference for leaves

Leaf labels are easiest to read outside the outer radius, running along their spoke; that is where the house radial tree puts them, flipping the ones on the left side so that nothing reads upside down. Labelling the internal nodes as well fills the rings with text that crosses the links. Keep internal-node labels to the tooltip unless the hierarchy is small.

Every node labelled: text where the links should be
The hero's category tree with the department and category names printed on the inner rings as well. Every label is legible on its own, but the middle ring is now a collar of text through which the spokes have to pass, and the eye stops reading the structure to read the words.

Use a partial ring in a wide frame

A full ring wants a square. When the frame is wide — a page column, a slide — fan the tree across a half circle instead: the root sits at the bottom centre, the leaves spread along the top arc, and the whole height of the frame goes to the radius rather than to empty corners.

A half ring: the same tree fanned across a wide frame
The category tree from nine o'clock to three o'clock. The root sits on the bottom edge, every leaf label runs upward and outward where it is easiest to read, and the radius is nearly twice what a full ring would get in the same height.

Colour major branches, not every node

Use colour to identify top-level families and inherit it through their descendants. A different colour for every node turns the tree into confetti and weakens the branch structure; a single colour for the whole tree leaves the reader counting spokes to find where one department ends.

Preserve path emphasis on interaction

Hovering a node should reveal its ancestors and, where useful, its descendants. Dim unrelated branches rather than changing the geometry, so the overall structure remains stable while the path is emphasised.

Limit radial depth

Each additional level consumes another ring, and only the outermost ring carries labels: everything inside it is an unnamed dot on a shrinking circle. Three levels below the root is comfortable; five leaves most of the structure anonymous and the innermost rings crowded.

Five levels: the inner rings run out of room
A file system five generations deep, twenty-six files on the rim. Only the rim is labelled: the four inner rings are anonymous dots, and the reader cannot tell src from seed-data or routes from lib without hovering. Every extra level pushes the named ring further out and adds another ring of unnamed nodes; if depth is the subject, a Cartesian tree or an icicle names every level.

Control leaf separation

Siblings should sit closer together than nodes from different branches. The cluster layout's separation function is part of the design: it determines whether families read as coherent groups around the circumference or as an evenly spaced ring of unrelated leaves. The house layout gives a small extra gap between branches, which is why the department boundaries in the hero can be seen without reading a single label.

Anatomy

The composition of a radial tree diagram
An anatomical guide

A radial tree diagram combines six elements: the root at the centre, radial depth for hierarchy level, angular separation for branches and siblings, curved radial links, the terminal ring on which the leaves sit, and the circumference labels that stay upright on both sides of the ring.

  • Tree diagram — uses a Cartesian layout for more familiar directional reading.
  • Sunburst — represents hierarchy as nested angular area rather than explicit links.
  • Icicle chart — uses aligned rectangles to show depth and aggregate size.
  • Circle packing — uses enclosure rather than links to communicate hierarchy.
  • Network graph — supports non-hierarchical connections when each node may have multiple parents.

Reading list

  • Reingold, E. M. & Tilford, J. S. (1981). Tidier Drawings of Trees. The Cartesian algorithm the radial layout is bent from.
  • Eades, P. (1992). Drawing Free Trees. The radial tree-drawing method.
  • Munzner, T. (2014). Visualization Analysis and Design. On radial layouts and when they earn their distortion.
  • Bostock, M., Ogievetsky, V. & Heer, J. (2011). D³: Data-Driven Documents. The cluster and radial-link primitives behind the house layout.