SIMS 247 Lecture 9 Distortion-based Views

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

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

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

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

5. Table Lens (Rao & Card 94) • Focus on the records of interest • Context: other records • depicted graphically • view patterns in both nominal and quantititive data types • interaction via sorting for pattern discovery • nearly keyboardless interface Marti Hearst SIMS 247

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

7. Focus + Context Data Types • Tables • Hierarchies • Networks • Maps • Artificial “worlds” Marti Hearst SIMS 247

8. FishEye Views • A variation on Focus + Context • Make objects of interest large, detailed • Less important objects successively smaller • Goal: • Smooth integration of local detail and global context • Technique: • Reposition and resize objects Marti Hearst SIMS 247

9. FishEye Noik’s Demonstration Marti Hearst SIMS 247

10. Elements of Fisheye Views • Focus, or Point of Interest (POI) • user-selected • Importance Function (API) • user-specified or pre-determined • number of railway connections • height in hierarchy • population of city • Function for measuring distance between objects Marti Hearst SIMS 247

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

12. Determining Layout • User selects focus • As user drags mouse, display changes • 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) Marti Hearst SIMS 247

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

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

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

16. B C A E D Properties of Graphs • A 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) Marti Hearst SIMS 247

17. A B D C Properties of Graphs • A tree is a connected graph with no cycles • Each node has exactly one parent • A 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 E Marti Hearst SIMS 247

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

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

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

21. Fisheye Views of Graphs(Sarkar & Brown 94) • This is just one of many possible methods • Convert normal to fisheye coordinates • MAGNIFY vertices of greater interest • demagnify vertices of lesser interest • Also, 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 Marti Hearst SIMS 247

22. Converting from Normal to Fisheye Coordinates • Determine the current focus. • 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 Marti Hearst SIMS 247

23. Computing New Vertex Position • A 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 focus Marti Hearst SIMS 247

24. Compute New Vertex Position Marti Hearst SIMS 247

25. Effects on x of Various Distortion Factors xd=0.5 d=2 d=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 Marti Hearst SIMS 247

26. An Example of FisheyeVertex Position Computation 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 p1fisheyex= (.75*50+50) = 87.5 p2fisheyex=(.88*50+50) = 94.0 d=5 p1fisheyex= (.86*50+50) = 93.0 p2fisheyex=(.93*50+50) = 96.5 Initial Positions of P1, P2, and Focus p1 f p2 0 100 Marti Hearst SIMS 247

27. Computing New Vertex Size Marti Hearst SIMS 247

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

29. Sarkar & Brown 94 Marti Hearst SIMS 247

30. Sarkar & Brown 94 Marti Hearst SIMS 247

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

32. Computing Detail • The amount of detail is proportional to the size of the vertex in the fisheye coordinates • But must not exceed a maximum amount of detail • determine font size • determine size of nodes to avoid overlap • determine resolution of an image Marti Hearst SIMS 247

33. Computing Visual Worth • A cutoff that determines whether or not a node is shown at all • A function of the size of the node and a set of constants Marti Hearst SIMS 247

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

35. Sarkar & Brown 94 Marti Hearst SIMS 247

36. Sarkar & Brown 94 Marti Hearst SIMS 247

37. Distortion Techniques • Computation 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 view • Some techniques have an abrupt boundary • Some are more gradual Marti Hearst SIMS 247

38. Distortion Types • Different distortions for different data types yield different effects • cartesian, polar coordinates, hyperbolic • Leung & Apperley’s Taxonomy • distinguish focus+context from distortion • f+c requires a POI function Marti Hearst SIMS 247