1. Marti Hearst SIMS 247 SIMS 247 Lecture 9 Distortion-based Views February 17, 1998

2. Marti Hearst SIMS 247 Today Distortion-based viewsDistortion-based views –focus+context – views –intro to graphs

3. Marti Hearst SIMS 247 Viewing Huge Datasets Problem:Problem: –The computer display is a small window through which to view huge datasets Standard Solution:Standard Solution: –Display a portion at a time Problems: lose the context, get lost, comparisons are difficult,... Alternative Solution:Alternative Solution: –Focus + Context

4. Marti Hearst SIMS 247 Focus + Context Another solution:Another solution: –Use pixels more carefully Focus + ContextFocus + 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

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

6. Marti Hearst SIMS 247 Viewing Huge Tables: Table Lens (Rao & Card 94)

7. Marti Hearst SIMS 247 Focus + Context Data Types TablesTables HierarchiesHierarchies NetworksNetworks MapsMaps Artificial “worlds”Artificial “worlds”

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

9. Marti Hearst SIMS 247 Noik’s Demonstration

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

11. Marti Hearst SIMS 247 Sarkar & Brown 94 Paris Metro, importance corresponds to number of connections

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

13. Marti Hearst SIMS 247 Graphs An interlude: basic properties of graphsAn interlude: basic properties of graphs See Cruz and Tammasia tutorial for an update on the state of the art in graph layout strategiesSee Cruz and Tammasia tutorial for an update on the state of the art in graph layout strategies

14. Marti Hearst SIMS 247 Properties of Graphs Graph = (V, E)Graph = (V, E) V = set of vertices (points, nodes)V = set of vertices (points, nodes) V={A,B,C,D,E} E = set of edges between V’sE = set of edges between V’s E={(A,B), (A,E), (B,D), (E,C), (D,E)} A B C DE

15. Marti Hearst SIMS 247 Properties of Graphs Edges can be directedEdges can be directed –can go from A to B, but not from B to A –use arrows to show directedness Graphs can have cyclesGraphs can have cycles –can get back to B when starting from B A B C DE

16. Marti Hearst SIMS 247 Properties of Graphs A dag is a directed acyclic graphA dag is a directed acyclic graph –No cycles, but –A vertex can have more than one parent (if we remove the red edge, this graph becomes a dag) A B C DE

17. Marti Hearst SIMS 247 Properties of Graphs A tree is a connected graph with no cyclesA tree is a connected graph with no cycles Each node has exactly one parentEach node has exactly one parent A tree can represent a hierarchyA tree can represent a hierarchy –There is a distinguished root node –Levels are counted down from the root –Trees are drawn upside-down –Leaf nodes have no children A B CD E

18. Marti Hearst SIMS 247 Properties of Graphs A planar graph is one that can be drawn on a 2D plane with no edges crossingA planar graph is one that can be drawn on a 2D plane with no edges crossing CD BA

19. Marti Hearst SIMS 247 Properties of Graphs A planar graph is one that can be drawn on a 2D plane with no edges crossingA planar graph is one that can be drawn on a 2D plane with no edges crossing CD BA

20. Marti Hearst SIMS 247 Properties of Graphs In general, it can be very hard to determine if a large graph is planarIn general, it can be very hard to determine if a large graph is planar CD B A

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

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

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

24. Marti Hearst SIMS 247 Compute New Vertex Position

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

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

27. Marti Hearst SIMS 247 Computing New Vertex Size

28. Marti Hearst SIMS 247 Computing New Vertex Size 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

29. Marti Hearst SIMS 247 Sarkar & Brown 94

30. Marti Hearst SIMS 247 Sarkar & Brown 94

31. Marti Hearst SIMS 247 Sarkar & Brown 94 distortion level 5 vs. 2

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

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

34. Marti Hearst SIMS 247 Sarkar & Brown 94 more emphasis on importance measure

35. Marti Hearst SIMS 247 Sarkar & Brown 94

36. Marti Hearst SIMS 247 Sarkar & Brown 94

37. 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 The boundary between the magnified and the demagnified parts of the viewThe boundary between the magnified and the demagnified parts of the view –Some techniques have an abrupt boundary –Some are more gradual

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