1 / 38

SIMS 247 Lecture 9 Distortion-based Views

SIMS 247 Lecture 9 Distortion-based Views. February 17, 1998. Today. Distortion-based views focus+context views intro to graphs. FishEye. Viewing Huge Datasets. Problem: The computer display is a small window through which to view huge datasets Standard Solution:

desiree
Télécharger la présentation

SIMS 247 Lecture 9 Distortion-based Views

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related