1. Composite Rectilinear Deformation for Stretch and Squish Navigation James Slack, Tamara Munzner University of British Columbia November 1, 2006 Imager

2. 2 Composite Rectilinear Deformation  Stretch and squish navigation User selects any region to grow or shrink Visual history of navigation Simultaneous region resizing Growing a region

3. 3 Successive Navigations Preserve History  Stretch and squish navigation composes deformations temporally Navigation in regions affects entire view Effects of all previous navigations persist

4. 4 Is Stretch and Squish Navigation Hard?  Simple to use  Underlying infrastructure is complex to implement Standard graphics pipeline has a single, monolithic transformation Mathematical composition of multiple transformations Stretch and squish cannot be implemented using this pipeline

5. 5 Related Work  Stretch and squish navigation Scales only to hundreds of objects Rubber-sheet navigation (Sarkar 1992) Document Lens, single region deformation (Robertson 1993)  General deformable surfaces Scales only to thousands of objects Non-linear magnification (Keahey 1997) Pliable surfaces (Carpendale 1995)  Scalable visualization supporting millions of objects No stretch and squish navigation techniques MillionVis (Fekete 2002) Tulip (Auber 2003)

6. 6 Related Work  Accordion Drawing Systems Previous stretch and squish work focused on drawing Assumed navigation algorithms existed, and never described TreeJuxtaposer (Munzner 2003) SequenceJuxtaposer (Slack 2004) PRISAD (Slack 2005)

7. 7 Contributions  Our contribution: an algorithm for stretch and squish navigation Use PRISAD for drawing dataset objects Scale to millions of dataset items Not dataset-specific, a generic infrastructure for navigation Visually composable All previous actions visible Deformations are lossless Support for localized deformation

8. 8 Complexity of Drawing  PRISAD rendering reduced the drawing complexity by culling For each frame: draw representative visible subset, not entire dataset (Total number of drawn objects per frame) << (Total dataset items) In tree dataset with 600,000 leaves, draw only 1000 leaves In sequence datasets, aggregate dense regions in software 1000 leaves visibleDense, culled regions

9. 9 Complexity of Navigation  PRISAD drawing complexity is in terms of visible objects Draw objects at certain visible threshold  Navigation complexity determined by work done per animation frame  Navigation actions stretch and squish many objects simultaneously  Our algorithm update complexity is relative to regions that change Number of regions to change simultaneously is limited Grow just a few regions at once, dozens would be confusing! Growing a region should not require updating every object (Updates for navigation) << (Total dataset objects)

10. 10 Grids and Regions  Stretch and squish a rectilinear grid, deform to navigate PRISAD uses grid to render, layout, etc. Normally not visible to end user  Atomic region: smallest navigation granularity  Composite region: collection of many atomic regions User moves outer region boundaries, interior grid lines follow Atomic Region Composite Region

11. 11 Grid = Pair of Line Sets  Separate horizontal and vertical line sets Navigate simultaneously, independently in both sets  Use same navigation algorithm for both sets Horizontal line set Vertical line set

12. 12 Moving in a Set of Lines  Navigation in a line set moves small number of lines  Suppose 1,000,000 lines in horizontal line set  Only 1000 of these lines are used by PRISAD for drawing given frame Visible regions between pairs of lines large enough to draw  Move small number of lines marked in red to new locations Boundaries of composite regions Not necessarily a subset of visible region boundaries

13. 13 Usage Scenario: Expand 3 Regions  3 composite regions marked by user to grow vertically 3 vertical regions to grow = 6 line boundaries to move No horizontal navigation in this example Grow 3 regions vertically

14. 14 Moving Lines  A navigation may change many grid line positions  Every grid line potentially moves in a single navigation  Updating every grid line would be too expensive To avoid linear update cost, we introduce a hierarchy

15. 15 Split Line Hierarchy Subdivision  We build a balanced binary hierarchy from each line set Called split line hierarchy, also used for PRISAD rendering Entire horizontal line set Smaller example Central line Children of central line Deeper regions of hierarchy

16. 16 Split Lines  Split lines order grid lines hierarchically Split lines are positioned between 2 split lines in the hierarchy Central split line bounded by scene boundaries Split lines are bounded by parents E.g. C is bounded by B and D

17. 17 Split Line Position versus Ratio  Each split line has an on-screen position  We store ratios for each split line Ratio is relative distance of a split line between its bounds 0.00.30.50.71.0 0.00.30.50.71.0 0.6 0.5 0.4 Positions Ratios

18. 18 From Ratio to Position  Ratios store positions indirectly with respect to ancestor positions Position = (left bound) + (ratio) x (right bound – left bound) 0.7 = 0.5 + 0.4 x (1.0 – 0.5)  Positions can be computed in logarithmic time: ancestors in hierarchy Positions computed only on demand, not for all objects We may cache positions during one animation frame 0.00.30.50.71.0 0.6 0.5 0.4 Positions Ratios

19. 19 Navigation Algorithm Complexity  Input: set K of split lines with final positions Only identity and positions of red lines required for input  Output: set Q of split lines with final ratios Algorithm determines which additional lines require a new ratio Changing ratios of these lines to output values will move K split lines All relative positions between red lines are preserved

20. 20 Running Example of a Navigation  Total number of split lines: 1023  Selected split lines to move: 4  Input to algorithm: K (indices) position ratio 63191255639 0.30.40.60.9 final position0.20.50.6 0.7

21. 21 Navigation Algorithm  Flow of our navigation algorithm: moveSplitLines resize partition interpolate getRatio Initialize Recurse

22. 22 Algorithm: moveSplitLines  Initialize split line set that user wishes to move M = split line list: input from user, plus left and right bounds S = split line for partition: root split line (index 511), exact middle Q = output ratios list: { } moveSplitLines Initialize M (indices) position ratio 63 191 255639 0.3 0.4 0.60.9 final position0.20.50.60.7 0 0.0 1022 1.0

23. 23 Navigation Algorithm: resize moveSplitLines resize partition interpolate getRatio Initialize Recurse

24. 24 Navigation Algorithm: partition moveSplitLines resize partition interpolate getRatio Initialize Recurse

25. 25 Algorithm: partition  Partitions set M according to location of S  S = 511, between 255 and 639 partition M (indices) position ratio 63 191 255639 0.30.40.60.9 final position0.20.50.60.7 0 0.0 1023 1.0 S = 511

26. 26 Algorithm: partition output  Partition returns L and R: initial position (i) ratio 63191255511 0.30.40.60.7 final position (f) 0.20.50.6 0 0.0 6391023 0.91.0 511 0.7 index 0.7 Left (L) Right (R) ? ? SS

27. 27 Navigation Algorithm: interpolate moveSplitLines resize partition interpolate getRatio Initialize Recurse

28. 28 Algorithm: interpolate  Interpolate determines the final position of S (index 511) Since S must be between 255 and 639 with same ratio: f[S] = f[left] + (f[right] – f[left]) * (i[S] – i[left]) / (i[right] – i[left]) = f[255] + (f[639] – f[255]) * (i[511] – i[255]) / (i[639] – i[255]) = 0.6 + (0.7 – 0.6) * (0.7 – 0.6) / (0.9 – 0.6) = 0.63 position (i) ratio 63 191 255 511 0.30.40.60.7 final position (f) 0.20.50.6 0 0.0 6391023 0.91.0 511 0.7 index 0.7 Left Right ?? SS 0.63

29. 29 Navigation Algorithm: getRatio moveSplitLines resize partition interpolate getRatio Initialize Recurse

30. 30 Algorithm: getRatio  Finally, compute ratio for S with new final position for S Ratio S = Final 0 + (Final 511 – Final 0) / (Final 1023 – Final 0) = 0.0 + (0.63 – 0.0) / (1.0 – 0.0) = 0.63 Add S to Q Position (I) ratio 5673300511 0.30.40.60.7 0.63 final position (F) 0.20.50.6 0 0.0 7541023 0.91.0 511 0.7 0.63 index 0.7 Left Right 0.63 Q: 511 0.63 index ratio SS

31. 31 Navigation Algorithm moveSplitLines resize partition interpolate getRatio Initialize Recurse

32. 32 Recursion  Each recursion step computes one split line ratio  Algorithm termination: when a partition contains no more lines to move When M=2, bounds of S have computed positions and ratios M (indices) position ratio 639 0.9 0.7final position 0.32 511 0.7 0.63 Q:index ratio 511 0.63 255 0.95 127 0.43 63 0.77 191 0.71 767 0.59 639 0.32

33. 33 Result: Algorithm Complexity  Logarithmic complexity: |Q|  |K| log |N| << |N| Q: Lines needing ratio updates K: Lines to move N: All lines  Many positions change, but few ratios require updates Moving 2 grid lines only requires changing ratios for 8 split lines Subtrees not affected will conserve their internal ratios

34. 34 Results: Implementation  Speed: under 1 millisecond for |N| = 2,000,000 lines  Generality: implemented in PRISAD infrastructure as proof of concept Tree, sequence dataset visualizations

35. 35  Algorithm provides lightweight visual history  Algorithm supports localized deformations Set final positions for local bounds to start positions Results: Design Goals Met Localizing boundaries

36. 36 Future Work  Implement stretch and squish navigation in other architectures  Support non-rectilinear deformations Localizing regions may assist in reducing complexity

37. 37 Conclusions  First scalable algorithm for stretch and squish navigation K log N performance to move K of N lines  Infrastructure for composite rectilinear navigations Lightweight visual history Move several region boundaries simultaneously Localized deformation Shown on trees and gene sequences

38. 38 Acknowledgements InfoVis group at UBC: Ciarán Llachlan Leavitt Dan Archambault Aaron Barsky Stephen Ingram Heidi Lam Peter McLachlan Melanie Tory

39. 39 Download Software  http://olduvai.sf.net/tj

40. 40 Algorithm: resize  Main recursive loop function  Controls partition, interpolate, and getRatio inner functions resize partition interpolate getRatio

41. 41 Result: Composite visual history  Maintain all N ratios for N split lines Many positions change, but few ratios require updates Lightweight visual history of navigation