![Page 1: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/1.jpg)
Space/OrderQuanzhen Geng
(Master of Software Systems Program)
January 27, 2003
CS-533C Reading Presentation
![Page 2: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/2.jpg)
Space/Order Encodings
Definition: Space/order encodings transform data in information
space into a spatial representation (size and order) in display space that preserves informational characteristics of the dataset and facilitates our visual perception and understanding of the data.
Importance: Finding a good spatial representation of the
information at hand is one of the most difficult and also the most important tasks in information visualization.
![Page 3: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/3.jpg)
Two challenges ofSpatial Encodings
(1) Visualizing large information space (Large Maps, Tables, Documents etc.) through a relatively small window screen.
Lack of screen space
(2) Visualizing multi-dimensional data (n>3) in 2D space
How to effectively present more than 3 dimensions of information in a visual display with 2 (to 3) dimensions?
How to display 1,000,000 rows of table on screen?
What does 10-D space look like?
![Page 4: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/4.jpg)
Solving the Problems in
Spatial Encodings
Two important spatial representation techniques:
• Spatial distortions solve the lack of screen space problem
• Parallel coordinates Non-projective mapping between N-D and 2-D
![Page 5: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/5.jpg)
DistortionsProblems: – Large Computer-Based Information Systems – Small Window as Single Access-Point – Difficult to Interpret Single Information
Items when Viewing it Outside of its ContextDefinition: Distortion is a visual transformation that modifies a Visual
Structure to create focus+context views.Want to achieve:
– Focus: to see detail of immediate interest– Context: to see the overall picture
Want to solve: The problem of displaying a large information space
through a relatively small window, i.e., lack of screen space problem.
![Page 6: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/6.jpg)
Principles of distortions
Transformation function Magnification function
![Page 7: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/7.jpg)
Distortions• Methods of distortions (focus+context views):
--Bifocal Display--Perspective wall--Document lens--Fisheye views--Table lens
• Major differences of these methods:
--Transformation function
--Magnification function
![Page 8: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/8.jpg)
Bifocal Display
• First suggested by Spence and Apperley (1980?).
• Combination of a detailed view and two distorted sideview.
• One-dimensional form.
![Page 9: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/9.jpg)
Bifocal Display
www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-6.pdf
Fold
Project
![Page 10: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/10.jpg)
What is the Bifocal Display Doing?
• Transform the information space to the display space with
Visual transformation functions
www.comp.leeds.ac.uk/kwb/VIS/v02_16.ppt
![Page 11: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/11.jpg)
Early implementation of Bifocal Display (1980)
www.ifs.tuwien.ac.at/~silvia/wien/vu-infovis/PDF-Files/InfoVis-6.pdf
![Page 12: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/12.jpg)
Perspective Wall• A technique for viewing and navigating large,
linearly-structured information (for instance, chronological / alphabetical data), allowing the viewer to focus on a particular area while still maintaining some degree of location or context.
• Extension or descendant of Bifocal Display.• 3D aspect decreases cognitive load.
![Page 13: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/13.jpg)
Perspective Wall vs. Bifocal Display
Bifocal Display Perspective Wall
www.sims.berkeley.edu/courses/is247/s02/lectures/ZoomingFocusContextDistortion.ppt
2D view 3D view
Perspective Wall:• 3D view• Center panel to view detail• Perspective panels to view context
![Page 14: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/14.jpg)
Perspective Wall
[Mackinlay et al.c 1991]
![Page 15: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/15.jpg)
Perspective Wall• In terms of transformation function, the situation is
closer to the bifocal display.
• Perspective gives smoother transition from focus to context.
![Page 16: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/16.jpg)
Perspective WallExample 1 – project schedule
Map work charts onto diagram. x-axis is time, y-axis is project. (Mackinlay, Robertson, Card ’91)
![Page 17: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/17.jpg)
Perspective WallExample 2 – file navigation
Typical example use is file navigation–Shown by date, type–However few files can be displayed at once
![Page 18: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/18.jpg)
Perspective WallExample 3 – file navigation
![Page 19: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/19.jpg)
Features of Perspective Wall• Folding is used to distort a 2-D layout into
a 3-D visualization,using hardware support for 3-D interactive animation.
• Perspective panels are shaded to enhance the effect of 3-D.
• Vertical dimension can be used to visualize layering information.
Disadvantage:• Wastes the corner areas of the screen.
![Page 20: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/20.jpg)
Document Lens
Why: -Text too small to read but yet needed to perceive patterns. -Perspective wall wastes corner areas of screen
What: General visualization technique based on a common strategy for understanding paper documents when their structure is not known.
How: 3D Visualization Tool For Large Rectangular Presentations
![Page 21: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/21.jpg)
Document Lens Features
• Lens – rectangular – interested in text that is mostly rectangular
• Sides are elastic and pull the surrounding parts towards the lens creating a pyramid
![Page 22: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/22.jpg)
Document Lens
Document lens, 3-D effect, no waste of corner space
![Page 23: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/23.jpg)
Comparison with other approaches
Bifocal Display Perspective Wall
Document Lens
![Page 24: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/24.jpg)
Fisheye View (Distortion)
• When people think about focus+context views, they typically think of the Fisheye View (Distortion)
• First introduced by George Furnas in his 1981 report
• “Provide[s] detailed views (focus) and overviews (context) without obscuring anything…The focus area (or areas) is magnified to show detail, while preserving the context, all in a single display.”
-(Shneiderman, DTUI, 1998)
www.cc.gatech.edu/classes/AY2002/cs7450_spring/ Talks/10-focuscontext.ppt
![Page 25: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/25.jpg)
Principles of Fisheye View
1D Fisheye
2D Fisheye
–Continuous Magnification Functions–Can distort boundaries because applied radially rather than x y
http://davis.wpi.edu/~matt/courses/distortion/#fisheye
![Page 26: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/26.jpg)
Fisheye-view vs. Bifocal display
Bifocal Display Fisheye-view
http://davis.wpi.edu/~matt/courses/distortion/#fisheye
![Page 27: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/27.jpg)
Fisheye View Application 1 –Map of Washington D.C.
web.mit.edu/16.399/www/course_notes/context_and_detail1.pdf
![Page 28: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/28.jpg)
Fisheye ViewApplication 2 –viewing network nodes
![Page 29: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/29.jpg)
Fisheye View Application 3 – fisheye menu
www.comp.leeds.ac.uk/kwb/VIS/v02_16.ppt
Dynamically change the size of a menu item to provide a focus area around the mouse pointer, while allowing all menu items to remain on screen
• All elements are visible but items near cursor are full-size, further away are smaller
• “bubble” of readable items move with cursor
![Page 30: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/30.jpg)
Fisheye View Application 4 – fisheye table
![Page 31: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/31.jpg)
Table Lens
The Table Lens:
Merges Graphical and Symbolic Representations in an Interactive Focus + Context Visualization for Tabular Information.
(Ramana Rao and Stuart K. Card)
![Page 32: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/32.jpg)
Table Lens Features• Focus + context for large datasets while retaining
access to all data
• Works best for case / variable data & flexible, suitable for many domains
• Cell contents coded by color (nominal) or bar length (interval)
• Tools: zoom, adjust, slide
• Search / browse (spotlighting)
• Create groups by dragging columns
![Page 33: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/33.jpg)
Table Lens
• Distortion in each dim. is independent
• Multiple focal areas• Degree of Interest (DOI)• Interactive Focus
Manipulation
![Page 34: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/34.jpg)
DOI (Degree of Interest) Maps from an item to a value that indicates the
level of interest in the item.
![Page 35: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/35.jpg)
Table Lens Focus Manipulation
Zoom
DOI
Adjust
DOI
Slide
DOI
Zoom, adjust and slide provides interactive focus manipulation
![Page 36: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/36.jpg)
Table Lens
![Page 37: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/37.jpg)
Parallel CoordinatesIssues:
• How to effectively present more than 3 dimensions of information in a visual display with 2 (to 3) dimensions?
• How to effectively visualize very large, often complex data sets?
www.sims.berkeley.edu/courses/is247/s02/lectures/MultidimensionalDataAnalysis.ppt
![Page 38: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/38.jpg)
Parallel Coordinates -GoalsWe want to: Visualize multi-dimensional data• Without loss of information• With:
– Minimal complexity– Any number of dimensions– Variables treated uniformly– Objects remain recognizable across transformations– Easy / intuitive conveyance of information– Mathematically / algorithmically rigorous
(Adapted from Inselberg)
www.sims.berkeley.edu/courses/is247/s02/lectures/MultidimensionalDataAnalysis.ppt
![Page 39: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/39.jpg)
Parallel Coordinates:Visualizing N variables on one chart
• Create N equidistant vertical axes, each corresponding to a variable• Each axis scaled to [min, max] range of the variable• Each observation corresponds to a line drawn through point on each axis corresponding to value of the variable
www.comp.leeds.ac.uk/kwb/VIS/v02_14.ppt
![Page 40: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/40.jpg)
Parallel Coordinates
-- Correlations may start to appear as the observations are plotted on the chart
-- Here there appears to be negative correlation between values of A and B for example-- This has been used for applications with thousands of data items
www.comp.leeds.ac.uk/kwb/VIS/v02_14.ppt
![Page 41: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/41.jpg)
Cartesian vs. Parallel Coordinates
Dataset in a Cartesian coordinate
Same dataset in parallel coordinates
infovis.cs.vt.edu/cs5984/students/parcoord.ppt
![Page 42: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/42.jpg)
Parallel Coordinates Example 1: Correlations
Detroit homicide data7 variables13 observations
![Page 43: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/43.jpg)
Parallel Coordinates -Example 2: Air traffic control
Cartesian Coordinates Parallel Coordinates
http://www.caip.rutgers.edu/~peskin/epriRpt/ParallelCoords.html
![Page 44: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/44.jpg)
Parallel Coordinates: Advantages
• Multi-dimensional data can be visualized in
two dimensions with low complexity.
• Each variable is treated uniformly.
• Relations within multi-dimensional data can
be discovered (“data mining”).
• Because of its visual cues, can serve as a
preprocessor to other methods.
![Page 45: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/45.jpg)
Parallel Coordinates: Disadvantages
• Close axes as dimensions increase.
• Clutter can reduce information perceived.
• Varying axes scale, although indicating
relationships, may cause confusion.
• Connecting the data points can be misleading.
![Page 46: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/46.jpg)
Disadvantage: Level of ClutterTaken from: “Hierarchical Parallel Coordinates”
Ying-Huey Fua, Elke A. Rundensteiner, Matthew O. Ward
16,384 records in 5 dimensions causes over-plotting.
![Page 47: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/47.jpg)
Improvement: SummarizationTaken from: “Hierarchical Parallel Coordinates”Ying-Huey Fua, Elke A. Rundensteiner, Matthew O. Ward
.
![Page 48: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/48.jpg)
Improvement: Level-Of-Detail (LOD)Taken from: “Hierarchical Parallel Coordinates”Ying-Huey Fua, Elke A. Rundensteiner, Matthew O. Ward.
![Page 49: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/49.jpg)
Improvement: BrushingTaken from: “Hierarchical Parallel Coordinates”Ying-Huey Fua, Elke A. Rundensteiner, Matthew O. Ward.
![Page 50: Space/Order Quanzhen Geng (Master of Software Systems Program) January 27, 2003 CS-533C Reading Presentation](https://reader036.vdocument.in/reader036/viewer/2022081513/56649ea15503460f94ba48c1/html5/thumbnails/50.jpg)
Summary• Spatial encoding the most important encoding
• The good and bad of spatial distortion
• The advantages and disadvantages of parallel coordinates