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

2. Marti Hearst SIMS 247 Today More on distortion techniquesMore on distortion techniques –Perspective Wall –Document Lens –Hyperbolic Browser How many ways can we view a graph?How many ways can we view a graph?

3. Marti Hearst SIMS 247 Distortion Techniques Computation must take care not to let the magnified part overlap or cover up the de-magnified partComputation must take care not to let the magnified part overlap or cover up the de-magnified part Must consider the boundary between the magnified and the demagnifiedMust consider the boundary between the magnified and the demagnified –Some techniques have an abrupt boundary –Some are more gradual

4. Marti Hearst SIMS 247 Perspective Wall (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

5. Marti Hearst SIMS 247 Perspective Wall (Mackinlay et al. 91)

6. Marti Hearst SIMS 247 Document Lens (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

7. Marti Hearst SIMS 247 How many ways can we view a graph? Expand/contract hierarchyExpand/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

8. Marti Hearst SIMS 247 Dynamic 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 reachedRepeat until some stopping condition is reached Two common techniquesTwo common techniques –nodes and springs aka attraction and repulsion forces aka force-directed placement –simulated annealing

9. Marti Hearst SIMS 247 Force-Directed Placement (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 end to be attracted to each otherEdges modeled as springs that cause the vertices on either end to be attracted to each other Vertices are repulsive forcesVertices are repulsive forces The repulsive forces balance the attractive forces to keep vertices from ending up too close togetherThe repulsive forces balance the attractive forces to keep vertices 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

10. Marti Hearst SIMS 247 Force-Directed Placement (Amir 93, based on Fruchterman and Rheingold 90)

11. Marti Hearst SIMS 247 Force-Directed Placement (Amir 93, based on Fruchterman and Rheingold 90)

12. Marti Hearst SIMS 247 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

13. Marti Hearst SIMS 247 3D Force-Directed Placement Hendley et al. paper shows 3D versions of force-directed placementHendley et al. paper shows 3D versions of force-directed placement They also group close-together nodes into super-nodesThey also group close-together nodes into super-nodes

14. Marti Hearst SIMS 247 Hyperbolic Browser Focus + Context TechniqueFocus + Context Technique –detailed view blended with a global view First lay out the hierarchy on Poincare’ mapping of the hyperbolic planeFirst lay out the hierarchy on Poincare’ mapping of the hyperbolic plane Then map this plane to a diskThen map this plane to a disk Use animation to navigate along this representation of the planeUse animation to navigate along this representation of the plane Start with the tree’s root at the centerStart with the tree’s root at the center

15. Marti Hearst SIMS 247 Hyperbolic Browser In the hyperbolic plance, the circumference and area of a circle grow exponentially with its radiusIn the hyperbolic plance, the circumference and area of 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 arc of that wedgeThe node recursively places all its children within an 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

16. Marti Hearst SIMS 247 Hyperbolic Tree Browser (Lamping et al. 95)

17. Marti Hearst SIMS 247 Cluster Graphs (Eades and Qingwen 96) Simulated annealing and nodes-and- springs create ball-like structuresSimulated annealing and nodes-and- springs create ball-like structures Alternative: draw tree in three dimensionsAlternative: draw tree in three dimensions –put each level of the hierarchy on a different plane –have tree-like properties between planes –have graph-like properties within planes

18. Marti Hearst SIMS 247 Cluster-graphs (Eades & Qingwen 96) tree-like between planesgraph-like within planes

19. Marti Hearst SIMS 247 Cluster-graphs (Eades & Qingwen 96) two views of convex segmentation

20. Marti Hearst SIMS 247 Cluster-graphs (Eades & Qingwen 96) two views of rectangular segmentation

21. Marti Hearst SIMS 247 Cone-Trees (Robertson et al. 91) Lay tree out onto a multi-level coneLay tree out onto a multi-level cone Use animation + psuedo-3D to deal with occlusionUse animation + psuedo-3D to deal with occlusion Use animation to grow and shrink subparts of the treeUse animation to grow and shrink subparts of the tree

22. Marti Hearst SIMS 247 ConeTrees (Robertson et al. 91)

23. Marti Hearst SIMS 247 ConeTrees (Robertson et al. 91)

24. Marti Hearst SIMS 247 Hyperbolic ConeTrees (Munzner et al. 96) Use more of the “surface” than standard cone trees

25. Marti Hearst SIMS 247 Hyperbolic ConeTrees (Munzner et al. 96)

26. Marti Hearst SIMS 247 Multi-Trees (Furnas & Zachs 94) Often we want more than one view on a treeOften we want more than one view on a tree Multi-trees convert the view of a dag (directed acyclic graph) into a set of overlapping treesMulti-trees convert the view of a dag (directed acyclic graph) into a set of overlapping trees

27. Marti Hearst SIMS 247 TreeMaps Represent a hierarchy as boxes of boxes (Shneiderman & others )

28. Marti Hearst SIMS 247 To Think About Are there other ways to show trees and graphs?Are there other ways to show trees and graphs? Which of these are useful for what purposes?Which of these are useful for what purposes? What is the role of animation/interaction?What is the role of animation/interaction? How well do they work in conjunction with labels?How well do they work in conjunction with labels? How well do they scale?How well do they scale?