Hyperbolic Tree
An interactive hierarchy visualization that uses hyperbolic geometry to create a fish-eye effect — the focused node expands at the center while the rest of the tree compresses toward the edges.
// 01 — The chart
What it looks like
A hyperbolic tree showing a file system. The “src” folder is in focus at the center; its children are large and readable while distant nodes compress toward the bounding circle.
// 02 — Definition
What is a hyperbolic tree?
A hyperbolic tree is an interactive hierarchy visualization that projects a tree onto the Poincaré disk model of hyperbolic geometry. The key property of hyperbolic space is that it has exponentially more room than Euclidean space — which is exactly what trees need, since the number of nodes grows exponentially with depth.
The result is a focus+context display: the node you’re interested in sits large and readable at the center of the disk, while the rest of the tree smoothly compresses toward the edges. Click a different node and the entire tree smoothly re-centers around it.
This makes hyperbolic trees excellent for navigating very large hierarchies — thousands of nodes can fit in the display while keeping the focused area fully legible. The technique was introduced by John Lamping and Ramana Rao at Xerox PARC in 1994.
Why hyperbolic? In hyperbolic geometry, the circumference of a circle grows exponentially with its radius (unlike Euclidean geometry where it grows linearly). This perfectly matches tree growth — each level has exponentially more nodes. The math works out so that every subtree gets the same proportional amount of space.
// 03 — Anatomy
Parts of a hyperbolic tree
// 04 — Usage
When to use it — and when not to
- The hierarchy has thousands of nodes that won't fit in a traditional tree
- Users need to navigate and explore the hierarchy interactively
- You want to maintain global context while focusing on local detail
- The hierarchy is deep and broad — hyperbolic space handles both well
- Showing file systems, ontologies, or large organizational structures
- The interface supports smooth animation for re-centering transitions
- The output must be static — the format relies on interaction to be useful
- The hierarchy is small enough to display as a standard tree
- Users need to see the full structure at once without distortion
- Exact node positions matter — hyperbolic projection distorts distances
- The audience is unfamiliar with focus+context interfaces
- You need to print or embed the diagram — it works best on screen
// 05 — Reading guide
How to read a hyperbolic tree
Follow these steps whenever you encounter a hyperbolic tree in the wild.
Identify the focus node
The largest node at the center is the current focus. Read its label — this is the part of the hierarchy you're examining in detail.
Read the immediate children
The nodes directly connected to the focus are displayed at near-full size. These are the direct children (or parent) in the hierarchy.
Notice the compression
As your eye moves from center to edge, nodes get smaller and closer together. This is the hyperbolic distortion — it compresses distant parts of the tree.
Click to re-center
Click any visible node to make it the new focus. The tree smoothly animates to re-center, bringing that node's neighborhood into full detail.
Use the periphery for orientation
The tiny nodes at the edge provide global context. Even though they're too small to read, their positions tell you what other parts of the tree exist.
// 06 — Pitfalls
Common mistakes
Using it without interactivity
A static hyperbolic tree is nearly useless — most nodes are too small to read. This format requires click-to-focus interaction.
No animation on re-centering
Abrupt jumps disorient users. Smooth animation is essential so users can track how the tree transforms during re-centering.
Ignoring the learning curve
Hyperbolic trees are unintuitive at first. Include a brief tutorial or onboarding guide for new users.
Applying to flat data
Hyperbolic trees only make sense for deep, branching hierarchies. For flat or shallow data, use a regular tree or list.
Poor label handling
Labels must scale with node size and disappear gracefully when too small. Overlapping text destroys readability.
// 07 — In the wild
Real-world examples
Wikipedia category navigation
Researchers have used hyperbolic trees to visualize Wikipedia's category hierarchy — millions of categories become navigable through focus+context interaction.
Ontology browsers
Biomedical ontologies (like Gene Ontology) contain tens of thousands of terms in deep hierarchies. Hyperbolic browsers make them explorable without overwhelming the user.
Large code repositories
Software engineers use hyperbolic trees to navigate massive codebases — module dependencies, package hierarchies, and class inheritance trees.
// 08 — Quick reference
Key facts
Also known as
Hyperbolic browser, Poincaré disk tree
Data type
Large hierarchical data (tree-structured)
Best for
Interactive navigation of very large hierarchies
Audience level
Advanced — requires explanation and interaction
Node capacity
Thousands to tens of thousands
Related to
Radial tree, treemap, cone tree
// 09 — Variations
Variations and extensions
3D hyperbolic space
Projects the tree onto a 3D hyperbolic manifold rendered on screen, providing even more room for nodes.
Hyperbolic with minimap
A small overview map in the corner shows the entire tree with a highlighted rectangle indicating the current focus area.
Animated transitions
Smooth Möbius transformations animate the tree as users click different nodes, maintaining spatial context during navigation.
// 10 — FAQs
Frequently asked questions
What is a hyperbolic tree?+
A hyperbolic tree is an interactive hierarchy visualization that projects a tree onto the Poincaré disk model of hyperbolic geometry. The key property of hyperbolic space is that it has exponentially more room than Euclidean space — which is exactly what trees need, since the number of nodes grows exponentially with depth.
When should you use a hyperbolic tree?+
Use a hyperbolic tree when the hierarchy has thousands of nodes that won't fit in a traditional tree. It also works well when users need to navigate and explore the hierarchy interactively, and when you want to maintain global context while focusing on local detail.
When should you avoid a hyperbolic tree?+
Avoid a hyperbolic tree when the output must be static — the format relies on interaction to be useful. It is also a poor fit when the hierarchy is small enough to display as a standard tree, or when users need to see the full structure at once without distortion.
What is another name for a hyperbolic tree?+
Hyperbolic Tree is also known as Hyperbolic browser, Poincaré disk tree. The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for a hyperbolic tree?+
Hyperbolic Tree works best for Interactive navigation of very large hierarchies. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Is a hyperbolic tree suitable for dashboards?+
Yes — a hyperbolic tree can work well in dashboards as long as the panel is large enough for readers to perceive the encoded values, has a clear title, and includes the legend or axis labels needed to interpret it.