Node-Link Tree
Hierarchy drawn as explicit parent→child link lines (top-down or radial), where each step in the chain is independently traceable — distinct from a treemap or sunburst, which encode hierarchy via nested area without showing the path that connects nodes.
Organization Chart
Company leadership hierarchy
View data (7 rows)
| Parent | Child |
|---|---|
| CEO | CTO |
| CEO | CFO |
| CTO | VP Engineering |
| CTO | VP Product |
| CFO | VP Finance |
| VP Engineering | Frontend Lead |
| VP Engineering | Backend Lead |
Use a node-link tree when…
- Displaying org charts, file systems, or taxonomies
- Showing clear parent-child hierarchy with few levels
Avoid when…
- When the tree is very deep or wide causing layout overflow
- When you need to encode node size (use treemap instead)
Data it needs
| Property | Value |
|---|---|
| Min Rows | 4 |
| Min Columns | 2 |
| Column Types | stringstring |
| Notes | Requires parent and child columns to define the hierarchy. |
Visual anatomy
Guiding principles
Consider instead
Common mistakes
Not allocating enough space for deep hierarchies
Using straight links that overlap at dense branches
History
Tree diagrams date back to medieval manuscripts; computational tree layouts were formalized by Reingold and Tilford in 1981.
Accessibility notes
Use nested lists or ARIA tree roles so screen readers can navigate the hierarchy. Wire keyboard navigation (arrow keys to move between siblings/children, enter to expand) so the tree is operable without a mouse.
Related reading
Got data? Let's see what works.
Drop your CSV. You'll get a Node-Link Tree plus four alternatives - ranked by which one actually fits your data best.