1. SIMS 247 Information Visualization and Presentation Marti Hearst October 24, 2000

2. Today Panning and ZoomingPanning and Zooming –Space-Scale Diagrams –Semantic Zoom –How useful it is? Distortion-based ViewsDistortion-based Views –Focus+context –Fisheye views Application to graphs/networks

3. Pan and Zoom How to show a lot of information in a small space? –Multiple Levels of Resolution The view changes depending on the “distance” from the viewer to the objects –Distortion-based techniques Keep a steady overview, make some objects larger while simultaneously shrinking others

4. Pad++ An infinite 2D planeAn infinite 2D plane Can get infinitely close to the surface tooCan get infinitely close to the surface too Navigate by panning and zoomingNavigate by panning and zooming Pan:Pan: –move around on the plane Zoom:Zoom: –move closer to and farther from the plane

5. Pad++ Examples

8. 1.http://found.cs.nyu.edu/fox/siggraph93/cal.htmlhttp://found.cs.nyu.edu/fox/siggraph93/cal.html 2.http://found.cs.nyu.edu/fox/siggraph93/tree.htmlhttp://found.cs.nyu.edu/fox/siggraph93/tree.html 3.http://found.cs.nyu.edu/fox/siggraph93/marcade.htmlhttp://found.cs.nyu.edu/fox/siggraph93/marcade.html

9. Semantic Zooming Geometric (standard) zooming:Geometric (standard) zooming: –The view depends on the physical properties of what is being viewed Semantic Zooming:Semantic Zooming: –When zooming away, instead of seeing a scaled-down version of an object, see a different representation –The representation shown depends on the meaning to be imparted.

10. Examples of Semantic Zoom Infinitely scalable painting programInfinitely scalable painting program –close in, see flecks of paint –farther away, see paint strokes –farther still, see the wholistic impression of the painting –farther still, see the artist sitting at the easel

11. Examples of Semantic Zoom Information MapsInformation Maps –zoom into restaurant see the interior see what is served there –maybe zoom based on price instead! see expensive restaurants first keep zooming till you get to your price range Browsing an information serviceBrowsing an information service –Charge user successively higher rates for successively more detailed information

12. Jazz – the new Pad++ Pad++ was written in tcl/tkPad++ was written in tcl/tk –Was very easy to use –Is no longer supported Jazz is the followonJazz is the followon –Written in java by Ben Bederson –Formal, complex architecture –http://www.cs.umd.edu/hcil/jazz/

13. Revisit Assignment 3 Why wasn’t using the scrollbars in Spotfire an example of zooming?Why wasn’t using the scrollbars in Spotfire an example of zooming? –More like a filter –Only changed one axis at a time –Both x and y should change together –Real zoom was built in (right mouse)

14. How to Pan While Zooming?

16. Space-Scale Diagrams (Furnas & Bederson 95) Original figure, shown at various scalesOriginal figure, shown at various scales Horizontal axis is standard, vertical is scaleHorizontal axis is standard, vertical is scale

17. Space-Scale Diagrams (Furnas & Bederson 95) User has a fixed-sized viewing windowUser has a fixed-sized viewing window Moving it through 3D space yields all possible sequences of pan & zoomMoving it through 3D space yields all possible sequences of pan & zoom

18. Space-Scale Diagrams (Furnas & Bederson 95) A point is transformed to a rayA point is transformed to a ray Circular regions become conesCircular regions become cones

19. Space-Scale Diagrams (Furnas & Bederson 95) If you move the origin of the 2D plane, the properties of the original 2D picture do not changeIf you move the origin of the 2D plane, the properties of the original 2D picture do not change Therefore, the absolute angles between the rays should not be assigned any meaningTherefore, the absolute angles between the rays should not be assigned any meaning

20. Space-Scale Diagrams (Furnas & Bederson 95) We can think of this in terms of 1D tooWe can think of this in terms of 1D too When zoomed out, you can see wider set of pointsWhen zoomed out, you can see wider set of points

21. Space-Scale Diagrams (Furnas & Bederson 95) Pure pan (a)Pure pan (a) Pure zoom (b)Pure zoom (b) Pan and zoom keeping q in same position in the viewing window (c)Pan and zoom keeping q in same position in the viewing window (c)

22. Space-Scale Diagrams (Furnas & Bederson 95) What about panning and zooming at the same time? –Panning is linear –Zooming is logarithmic –The two effects interact If you compute the two separately and run them in parallel you get problems When zooming in, things go exponentially fast Panning can’t keep up –The target “runs away” out of view

23. Navigation in Pad++ How to keep from getting lost?How to keep from getting lost? –Animate the traversal from one object to another using “hyperlinks” If the target is more than one screen away, zoom out, pan over, and zoom back in –Goal: help user maintain context

24. Space-Scale Diagrams (Furnas & Bederson 95) Zooming covers more ground faster than panningZooming covers more ground faster than panning –zooming is logarithmic, panning is linear Alternative way to navigate:Alternative way to navigate: –Instead of a long pan –Do a big zoom, a short pan, a big zoom –(count the number of arrows each way)

25. Space-Scale Diagrams (Furnas & Bederson 95) Combining space-scale zooming and distortion-based techniquesCombining space-scale zooming and distortion-based techniques –Instead of a horizontal slice through scale-space, take a step up and a step down –The points in the middle have more room; those on the periphery are squished together

26. Space-Scale Diagrams (Furnas & Bederson 95) Solution: space-scale diagramSolution: space-scale diagram Goal: go from (x1,z1) to (x2,z2)Goal: go from (x1,z1) to (x2,z2) Must stay within the parallelogramMust stay within the parallelogram if you go out on this side, the target x2 is further from x1 than when you began if you go out on this side, you overshot the target if you go out on the top, you zoomed past x2 if you go out on the bottom, you backed up from x1

27. Space-Scale Diagrams (Furnas & Bederson 95) Combining space-scale zooming and distortion-based techniquesCombining space-scale zooming and distortion-based techniques The original fisheye view:The original fisheye view:

28. Space-Scale Diagrams (Furnas & Bederson 95) Implementing semantic zoomingImplementing semantic zooming standard geometric zooming (a grey line) semantic zoom: too far, see nothing zoom in, see dashed line get closer, see solid line get too close, see nothing

29. The Role of Portals All this panning and zooming can get confusing (maybe even dizzying)All this panning and zooming can get confusing (maybe even dizzying) Portals allow for zooming a small piece of the dataset while keeping everything else in the same positionPortals allow for zooming a small piece of the dataset while keeping everything else in the same position –Pad++ is one big stretchy sheet –A portal is more like a special window into a piece of the sheet –That window behaves independently of the rest

30. Panning and Zooming Is it actually useful?Is it actually useful? –Is it better to show multiple simultaneous views? –Is it better to use distortion techniques? Would keeping a separate global overview help with navigation?Would keeping a separate global overview help with navigation?

31. Distortion-based Views –focus+context – views

32. Focus + Context –Show a lot of information at once Details are too small to be visible –Focus on a subset of interest Make this subset large enough to be viewed

33. Distortion Types Different distortions for different data types yield different effectsDifferent distortions for different data types yield different effects –cartesian, polar coordinates, hyperbolic Leung & Apperley’s TaxonomyLeung & Apperley’s Taxonomy –distinguish focus+context from distortion f+c requires a POI function

34. Table Lens (Rao & Card 94) Focus on the records of interestFocus on the records of interest Context: other recordsContext: other records –depicted graphically –view patterns in both nominal and quantititive data types –interaction via sorting for pattern discovery –nearly keyboardless interface

35. Viewing Huge Tables: Table Lens (Rao & Card 94)

36. Views Views A variation on Focus + ContextA variation on Focus + Context –Make objects of interest large, detailed –Less important objects successively smaller Goal:Goal: –Smooth integration of local detail and global context Technique:Technique: –Reposition and resize objects

37. Noik’s Demonstration

38. Elements of Fisheye Views Focus, or Point of Interest (POI)Focus, or Point of Interest (POI) –user-selected Importance Function (API)Importance Function (API) –user-specified or pre-determined number of railway connections height in hierarchy population of city Function for measuring distance between objectsFunction for measuring distance between objects

39. 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

40. 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

41. Perspective Wall (Mackinlay et al. 91)

42. 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

43. 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

44. 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

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

46. Inxight’s Hyperbolic Browser

47. Hyperbolic Tree Views Nice demos on the web nowNice demos on the web now –www.inxight.comwww.inxight.com –www.thebrain.comwww.thebrain.com This is a variation on it that might be more interesting Decides dynamically which subsets of the data to show

48. Thebrain.com

49. 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

50. Hyperbolic ConeTrees (Munzner et al. 96) Use more of the “surface” than standard cone treesHyperbolic ConeTrees (Munzner et al. 96) Use more of the “surface” than standard cone trees

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

52. Sarkar & Brown 94 Paris Metro, importance corresponds to number of connectionsSarkar & Brown 94 Paris Metro, importance corresponds to number of connections

53. Determining Layout User selects focusUser selects focus –As user drags mouse, display changes For each object: size, position, and amount of detail depend on:For each object: size, position, and amount of detail depend on: –distortion factor –object’s “normal” size and position –distance of object from focus (POI) –pre-assigned importance value –other user-controlled parameters (optional)

54. Fisheye Views of Graphs (Sarkar & Brown 94) This is just one of many possible methodsThis is just one of many possible methods Convert normal to fisheye coordinatesConvert normal to fisheye coordinates MAGNIFY vertices of greater interestMAGNIFY vertices of greater interest demagnify vertices of lesser interestdemagnify vertices of lesser interest Also, recompute positions of all verticesAlso, recompute positions of all vertices Analogy: blowing up a balloon As some points grow farther apart, some get pushed closer together This happens because there is a fixed area or volume for all the points

55. Converting from Normal to Fisheye Coordinates Determine the current focus.Determine the current focus. Then, for each vertex in the graph:Then, for each vertex in the graph: –Compute new position –Compute new size –Determine amount of detail to be shown –Compute visual worth: Importance (API) + Distance from the focus point -> Even a very important node may be small if it is very far from the focus point

56. Computing New Vertex Position A vertex’s new position is a function of its normal position and that of the focusA vertex’s new position is a function of its normal position and that of the focus Distortion factor determines how far points are spread out from the focusDistortion factor determines how far points are spread out from the focus

57. Compute New Vertex Position

58. Effects on x of Various Distortion Factors x d=0.5d=2d=5.1.14.25.40.2.27.42.60.3.39.56.72.4.50.66.80.5.60.75.85.6.69.82.90.7.77.88.93.8.85.92.96.9.93.96.98 d=5.0 d=0.5

59. An Example of Fisheye Vertex Position Computation f p1 p2 f=(50,50), p1=(75,50), p2=(85,50) Dnorm/Dmax for p1: 25/50=.5 Dnorm/Dmax for p2: 35/50=.7 d=2 p1 fisheyex = (.75*50+50) = 87.5 p2 fisheyex =(.88*50+50) = 94.0 d=5 p1 fisheyex = (.86*50+50) = 93.0 p2 fisheyex =(.93*50+50) = 96.5 0 100 Initial Positions of P1, P2, and Focus

60. Computing New Vertex Size

61. Vertex size is a function of the normal size, the distance from the focus, and the API of the vertex –look at length of side of bounding box –find a point that is s* length/2 away from center of vertex s is a vertex-size scale factor move in direction opposite of the focus –convert to fisheye coordinates –scale by API

62. Sarkar & Brown 94Sarkar & Brown 94

64. Sarkar & Brown 94 distortion level 5 vs. 2Sarkar & Brown 94 distortion level 5 vs. 2

65. Computing Detail The amount of detail is proportional to the size of the vertex in the fisheye coordinatesThe amount of detail is proportional to the size of the vertex in the fisheye coordinates But must not exceed a maximum amount of detailBut must not exceed a maximum amount of detail –determine font size –determine size of nodes to avoid overlap –determine resolution of an image

66. Computing Visual Worth A cutoff that determines whether or not a node is shown at allA cutoff that determines whether or not a node is shown at all A function of the size of the node and a set of constantsA function of the size of the node and a set of constants

67. Sarkar & Brown 94 more emphasis on importance measureSarkar & Brown 94 more emphasis on importance measure

68. Sarkar & Brown 94Sarkar & Brown 94

70. 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

71. 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

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

74. 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

75. 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