H3: Laying Out Large Directed Graphs in
3D Hyperbolic Space
Andrew Chan
CPSC 533C
March 24, 2003
1
H3
Image from: http://graphics.stanford.edu/papers/h3/fig/nab0.gif
2
Ideas behind H3
Creating an optimal layout for a
general graph is tough
 Creating an optimal layout for a tree is
easier
 Often it is possible to use domainspecific knowledge to create a
hierarchical structure from a graph

3
Stumbling Blocks
The deeper the tree, the more nodes;
exponential growth
 You can see an overview, or you can
see fine details, but not both

4
Solution
A layout based on hyperbolic space,
that allows for a focus + context view
 H3 used to lay out hierarchies of over
20 000 nodes

5
Related Work

H3 has its roots in graph-drawing and
focus+context work
6
2D Graph and Tree Drawing
Thinking very small-scale
 Frick, Ludwig, Mehldau created
categories for graphs; # of nodes
ranged from 16 in the smallest
category, to > 128 in the largest

7
2D Tree Drawing (cont’d)
MosiacG System
Zyers and Stasko
Image from:
http://www.w3j.com/1/ayers.270/pap
er/270.html
8
3D Graph Drawing
SGI fsn file-system
viewer
Image from:
http://www.sgi.com/fun/images/fs
n.map2.jpg
9
3D Graph Drawing (cont’d)

Other work centered around the idea
of a mass-spring system
–
–

Node repel one another, but links attract
Difficulty in converging when you try to
scale the systems
Aside: Eric Brochu is doing similar work
in 2D - http://www.cs.ubc.ca/~ebrochu/mmmvis.htm
10
3D Tree Drawing
Cone Trees, Robertson, Mackinlay, Card
Image from:
http://www2.parc.com/istl/projects/uir/pubs/items/UIR-199106-Robertson-CHI91-Cone.pdf
11
Hyperbolic Focus+Context
Hyperbolic Tree
Browser,
Lamping, Rao
Image from:
http://www.acm.org/sigchi/chi9
5/Electronic/documnts/papers/jl
_figs/strip1.htm
12
Alternate Geometry
Information at: http://cs.unm.edu/~joel/NonEuclid/
 Euclidean geometry

–
–

3 angles of a triangle add up to?
Shortest distance between two points?
Spherical geometry
–
–
How we think about the world
Shortest way from Florida to Philippines?
13
Alternate Geometry

(cont’d)
Hyperbolic Geometry / Space
–
–
–
–
Is important to the Theory of Relativity
The “fifth” dimension
Can be projected into 2-D as a
pseudosphere
Key: As a point moves away from the
center towards the boundary circle, its
distance approaches infinity
14
H3’s Layout
15
Image from: http://graphics.stanford.edu/papers/h3/fig/nab0.gif
Finding a Tree from a
Graph
Most effective if you have domainspecific knowledge
 Examples:

–
–
–
File system
Web site structure
Function call graphs
16
Tree Layout
Cone tree layout versus H3 Layout
Image from: http://graphics.stanford.edu/papers/h3/html/node12.htm#conefig
17
Sphere Packing
Need an effective way to place
information
 Cannot place spheres randomly
 Want to have a fast algorithm

18
Sphere Packing (cont’d)
Image from: http://graphics.stanford.edu/papers/h3/fig/incrhemi.gif
19
Demo
20
Strengths
Can easily see what the important
structures are and the relationships
between them
 Can let you ignore “noise” in data
 Animated transitions
 Responsive UI

21
Weaknesses
Starting view only uses part of the
sphere
 Moving across the tree can disorient
you; cost of clicking on the wrong
place is high
 Labels not present if node too far from
center

22
Questions?
23