Marti Hearst SIMS 247 SIMS 247 Lecture 10 More on Distortion-based Views How many ways to show a graph? February 19, 1998.

Marti HearstSIMS 247

SIMS 247 Lecture 10SIMS 247 Lecture 10More on Distortion-based ViewsMore on Distortion-based Views

How many ways to show a graph?How many ways to show a graph?

February 19, 1998February 19, 1998


TodayToday

• More on distortion techniquesMore on distortion techniques– Perspective Wall– Document Lens– Hyperbolic Browser

• How many ways can we view a How many ways can we view a graph?graph?


Distortion TechniquesDistortion Techniques

• Computation must take care not to Computation must take care not to let the magnified part overlap or let the magnified part overlap or cover up the de-magnified partcover up the de-magnified part

• Must consider the boundary between Must consider the boundary between the magnified and the demagnifiedthe magnified and the demagnified– Some techniques have an abrupt

boundary– Some are more gradual


Perspective Wall Perspective Wall (Mackinlay et al 91)(Mackinlay et al 91)

• Idea: Idea: – focus on a subpart of a table– show the rest of the table in the

periphery

• Goal:Goal:– help user retain an understanding of

the context of the part of the table they are focusing on


Perspective Wall Perspective Wall (Mackinlay et al. 91)(Mackinlay et al. 91)


Document Lens Document Lens (Robertson & Mackinlay 93)(Robertson & Mackinlay 93)

• Goal: show a long document in contextGoal: show a long document in context• Approach: Approach:

– lay pages out in a grid (on a “table”)– focus view on one page– show rest of pages distorted into a

pyramid-like layout– use greeking and other techniques to

simply suggest what is on the other pages


How many ways can we view a graph?How many ways can we view a graph?• Expand/contract hierarchy Expand/contract hierarchy

– like a mac or windows file browser• Hyperbolic tree browserHyperbolic tree browser• Layout via dynamic arrangementLayout via dynamic arrangement

– 2D/3D force-directed placement– Simulated annealing

• Cluster tree hierarchiesCluster tree hierarchies• MultitreesMultitrees• Cone TreesCone Trees• TreemapsTreemaps


Dynamic Grouping and ClusteringDynamic Grouping and Clustering

• Start with an initial (random) organizationStart with an initial (random) organization• Apply a function to change the layoutApply a function to change the layout• Repeat until some stopping condition is Repeat until some stopping condition is

reachedreached• Two common techniquesTwo common techniques

– nodes and springs• aka attraction and repulsion forces• aka force-directed placement

– simulated annealing


Force-Directed PlacementForce-Directed Placement(Fruchterman & Rheingold 90)(Fruchterman & Rheingold 90)

• Also called attraction and repulsion and nodes-and-springsAlso called attraction and repulsion and nodes-and-springs• Works well on sparse graphsWorks well on sparse graphs• Edges modeled as springs that cause the vertices on either Edges modeled as springs that cause the vertices on either

end to be attracted to each otherend to be attracted to each other• Vertices are repulsive forcesVertices are repulsive forces• The repulsive forces balance the attractive forces to keep The repulsive forces balance the attractive forces to keep

vertices from ending up too close togethervertices from ending up too close together• The procedure iterates:The procedure iterates:

– start with random placement– compute attraction/repulsion– do a new layout– repeat until some stopping threshold is met


Force-Directed PlacementForce-Directed Placement(Amir 93, based on Fruchterman and Rheingold 90)(Amir 93, based on Fruchterman and Rheingold 90)


Force-Directed PlacementForce-Directed Placement(Amir 93, based on Fruchterman and Rheingold 90)(Amir 93, based on Fruchterman and Rheingold 90)


Computing Layout Computing Layout • The procedure iterates:The procedure iterates:

– start with random placement– compute attraction/repulsion– do a new layout– repeat until some stopping threshold is met

• Given two vertices v1 and v2• Distance between v1 and v2 is x

display theofgeometry by the determined is

verticesofnumber is

5.2

Initially

)(21

2

221

C

nn

Ckk

xkf

x

kkf

ve

eattractive

vvrepulsive

m


3D Force-Directed Placement3D Force-Directed Placement

• Hendley et al. paper shows 3D Hendley et al. paper shows 3D versions of force-directed versions of force-directed placementplacement

• They also group close-together They also group close-together nodes into super-nodesnodes into super-nodes


Hyperbolic BrowserHyperbolic Browser

• Focus + Context TechniqueFocus + Context Technique– detailed view blended with a global view

• First lay out the hierarchy on Poincare’ First lay out the hierarchy on Poincare’ mapping of the hyperbolic planemapping of the hyperbolic plane

• Then map this plane to a diskThen map this plane to a disk• Use animation to navigate along this Use animation to navigate along this

representation of the planerepresentation of the plane• Start with the tree’s root at the centerStart with the tree’s root at the center


Hyperbolic BrowserHyperbolic Browser

• In the hyperbolic plance, the circumference and area In the hyperbolic plance, the circumference and area of a circle grow exponentially with its radiusof a circle grow exponentially with its radius

• Allocate each node a wedge of the hyperbolic planeAllocate each node a wedge of the hyperbolic plane• The node recursively places all its children within an The node recursively places all its children within an

arc of that wedge arc of that wedge – at an equal distance from itself– far enough out so the children are separated by at least a

minimum distance

• Parallel lines diverge in hyperbolic geometryParallel lines diverge in hyperbolic geometry– each child’s wedge will span about the same angle as its

parent’s– but not children’s wedges will overlap


Hyperbolic Tree Browser Hyperbolic Tree Browser (Lamping et al. 95)(Lamping et al. 95)


Cluster Graphs Cluster Graphs (Eades and Qingwen 96)(Eades and Qingwen 96)

• Simulated annealing and nodes-and-Simulated annealing and nodes-and-springs create ball-like structuressprings create ball-like structures

• Alternative: draw tree in three Alternative: draw tree in three dimensionsdimensions– put each level of the hierarchy on a

different plane– have tree-like properties between planes– have graph-like properties within planes


Cluster-graphs Cluster-graphs (Eades & Qingwen 96)(Eades & Qingwen 96)

tree-like between planes graph-like within planes



two views of convex segmentation



two views of rectangular segmentation


Cone-Trees Cone-Trees (Robertson et al. 91)(Robertson et al. 91)

• Lay tree out onto a multi-level Lay tree out onto a multi-level conecone

• Use animation + psuedo-3D to Use animation + psuedo-3D to deal with occlusiondeal with occlusion

• Use animation to grow and shrink Use animation to grow and shrink subparts of the treesubparts of the tree


Con

eTre

es

Con

eTre

es (R

ober

tson

et

al. 9

1)(R

ober

tson

et

al. 9

1)


Con

eTre

es

Con

eTre

es (R

ober

tson

et

al. 9

1)(R

ober

tson

et

al. 9

1)


Hyperbolic ConeTreesHyperbolic ConeTrees (Munzner et al. 96)(Munzner et al. 96)

Use more of the “surface” than standard cone treesUse more of the “surface” than standard cone trees


Hyp

erb

olic

Con

eTre

esH

yper

bol

ic C

oneT

rees

(Mu

nzn

er e

t al

. 96)

(Mu

nzn

er e

t al

. 96)


Multi-Trees Multi-Trees (Furnas & Zachs 94)(Furnas & Zachs 94)

• Often we want more than one view on a Often we want more than one view on a treetree

• Multi-trees convert the view of a dag Multi-trees convert the view of a dag (directed acyclic graph) into a set of (directed acyclic graph) into a set of overlapping treesoverlapping trees


TreeMapsTreeMapsRepresent a hierarchy as boxes of boxesRepresent a hierarchy as boxes of boxes

(Shneiderman & others )(Shneiderman & others )


To Think AboutTo Think About

• Are there other ways to show trees and Are there other ways to show trees and graphs?graphs?

• Which of these are useful for what Which of these are useful for what purposes?purposes?

• What is the role of animation/interaction?What is the role of animation/interaction?• How well do they work in conjunction How well do they work in conjunction

with labels?with labels?• How well do they scale?How well do they scale?

Marti Hearst SIMS 247 SIMS 247 Lecture 10 More on Distortion-based Views How many ways to show a graph? February 19, 1998.

Documents

marti hearst sims

pages slide

annealing slide

gradual slide

repulsion forces

attractive forces

long document

demagnified partcomputation