Download - Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge
![Page 1: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/1.jpg)
Mao Lin Huang
University of Technology, Sydney,
Visual Representations of Data and Knowledge
![Page 2: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/2.jpg)
2
Rendering Effective Route Maps
![Page 3: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/3.jpg)
3
General Idea Automatically generate a route map that has
the same properties as a hand drawn map. Hand drawn maps:
Exaggerated Lengths (non-constant scale factor)
No irrelevant information
![Page 4: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/4.jpg)
4
More Specifically Constant scale factor
Road lengths on a conventional map vary in several orders of magnitude => small roads and neighborhoods are hard to navigate with large maps
Information irrelevant to navigation Names of locations, places, cities, etc. that are all far
away from the route Takes up space that would be otherwise useful for
showing crossroads and relevant landmarks
![Page 5: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/5.jpg)
5
Generalization Techniques Generalize Length
Use more space for short roads, less for longer ones. Distribute based on importance, not physical length
Generalize Angle Align roads or make room for others
Generalize Shape Navigator doesn’t need to know roads shape. Simpler roads are easier to differentiate on a map.
![Page 6: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/6.jpg)
6
Demo at mapblast.com
![Page 7: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/7.jpg)
7
Simple Visualization Model
Data View PortVisual Mapping
![Page 8: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/8.jpg)
8
Film Data Table Example: Attributes
![Page 9: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/9.jpg)
9
Visual Mapping Define a Space Map: data marks Map: data attributes graphical mark attributes
Year X Length Y Popularity size Subject color Award? shape
![Page 10: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/10.jpg)
10
Example: FilmFinder
38
![Page 11: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/11.jpg)
11
Example: FilmFinder
39
![Page 12: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/12.jpg)
12
Use of graphical time scales as an approach to visualize histories. [Time Scale + History = Intuitive]
![Page 13: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/13.jpg)
13
![Page 14: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/14.jpg)
14
![Page 15: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/15.jpg)
15
Patient Records
![Page 16: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/16.jpg)
16
Galaxies Projection of clustering algorithms into 2D Galaxies are clusters of related data Proximity of galaxies is relevant Designed to add temporal patterns to
clustering
![Page 17: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/17.jpg)
17
Galaxies
![Page 18: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/18.jpg)
3D Visualization & VR Techniques
![Page 19: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/19.jpg)
19
3D Cone Tree
16
![Page 20: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/20.jpg)
20
3D Cone Trees
research.microsoft.com/~ggr/gi97.ppt 17
![Page 21: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/21.jpg)
21
Perspective Wall
research.microsoft.com/~ggr/gi97.ppt 18
![Page 22: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/22.jpg)
22
Example: 3D-Room (The Exploratory)
Robertson, Card, and Mackinlay (1989) 20
![Page 23: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/23.jpg)
23
3D Navigation Task (Hallway)
research.microsoft.com/~ggr/gi97.ppt 21
![Page 24: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/24.jpg)
24
3D GUI for Web Browsing
22
![Page 25: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/25.jpg)
25
3D GUI for Web Browsing
http://research.microsoft.com/ui/TaskGallery/index.htm 23
![Page 26: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/26.jpg)
26
Web Forager
http://research.microsoft.com/ui/TaskGallery/index.htm 24
![Page 27: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/27.jpg)
27
WebBook
research.microsoft.com/~ggr/gi97.ppt 25
![Page 28: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/28.jpg)
28
3D GUI for Desktop
http://research.microsoft.com/ui/TaskGallery/index.htm 26
![Page 29: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/29.jpg)
29
![Page 30: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/30.jpg)
30
ThemeScape Abstract 3D landscape of information Reduce cognitive load using terrain Elevation, colour encode theme strength
redundantly Landscape metaphor translates well
Peaks are easy to recognize Interesting characteristics include ridges and
valleys
![Page 31: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/31.jpg)
31
ThemeScape
![Page 32: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/32.jpg)
32
ThemeScape
![Page 33: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/33.jpg)
33
Calendar Based Visualization Using 3 dimensions
X-axis: Time of day Y-axis: Days of data period Z-axis: Univariate data samples
![Page 34: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/34.jpg)
34
Calendar Based Visualization
![Page 35: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/35.jpg)
35
Calendar Based Visualization
![Page 36: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/36.jpg)
36
Graph-Driven Visualization of Relational DataGraph-Driven Visualization of Relational Data
An example of visualizing relational data. This is the visualization of a family tree (graph). Here each image node represents a person and the edges represent relationships among these people in a large family.
Graph VisualizationGraph Visualization
![Page 37: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/37.jpg)
37
Classical Graph Layouts Link-node diagrams Layout algorithms (graph drawing) Geometric positioning of nodes & edges Small amount of nodes Avoid node overlaps Reduce edge crossings
hierarchical force-directed orthogonal
symmetric
radial layout
![Page 38: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/38.jpg)
38
Using a very large virtual page
The virtual page technique predefines the drawing of the whole graph, and then provides a small window and scroll bar to allow the user to navigate through it (by changing the viewing area).
![Page 39: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/39.jpg)
39
Fish-eye views The fish-eye technique can keep a detailed picture of a part of a graph as well as the global context of the graph. It changes the zoomed focus point.
![Page 40: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/40.jpg)
40
3D Graph DrawingSGI fsn file-system viewer
Image from:
http://www.sgi.com/fun/images/fsn.map2.jpg
![Page 41: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/41.jpg)
Trees
![Page 42: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/42.jpg)
42
2 Approaches Connection (node & link)
Enclosure (node in node)
Structure vs. attributes Attributes only (multi-dimensional viz) Structure only (1 attribute, e.g. name) Structure + attributes
A
CB
A
B C
![Page 43: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/43.jpg)
43
Containment Approach
![Page 44: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/44.jpg)
44
Treemaps (Shneiderman)
Slice and Dice Alternate horizontal and
vertical cuts for levels
Node area node attribute Zoom onto nodes
Space-Filling Structure + 3 attributes
Area, color, label
![Page 45: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/45.jpg)
45
Treemaps
![Page 46: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/46.jpg)
46
Balanced trees
![Page 47: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/47.jpg)
47
Treemaps ~ 1000 nodes Quantitative attributes Good combination of structure + attributes For unbalanced trees, structure more difficult Learning time: 20 min Evaluation: major performance boost over outliner Bad aspect ratios: long narrow rectangles Large scale or deep causes solid black
![Page 48: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/48.jpg)
48
Treemap Algorithm Calculate sizes:
Recurse to children My size = sum children sizes
Draw Treemap (node, space, direction) Draw node rectangle in space Alternate direction For each child:
Calculate child space as % of node space using size and direction Draw Treemap (child, child space, direction)
![Page 49: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/49.jpg)
49
Cushion Treemaps
![Page 50: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/50.jpg)
50
Squared Treemaps
![Page 51: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/51.jpg)
51
Treemaps on the Web Map of the Market: http://www.smartmoney.com/marketmap/ People Map: http://www.truepeers.com/ Coffee Map: http://www.peets.com/tast/11/coffee_selector.asp
![Page 52: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/52.jpg)
52
DiskMapper http://www.miclog.com/dmdesc.htm
![Page 53: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/53.jpg)
53
2D Tree Drawing (web sitemap)
MosiacG SystemZyers and Stasko
Image from:http://www.w3j.com/1/ayers.270/paper/270.html
![Page 54: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/54.jpg)
54
PDQ Trees Overview+Detail of 2D layout Dynamic Queries on each level for pruning
![Page 55: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/55.jpg)
55
Space-Optimized Tree Layout
A large data set of approximately 50 000 nodes My Unix root with approx. 3700 directories and files
![Page 56: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/56.jpg)
56
Hyperbolic treeThe hyperbolic browser technique performs fish-eye viewing with animated transitions to preserve the user’s mental map. It changes both the viewing area and the zoomed focus point.
![Page 57: Mao Lin Huang University of Technology, Sydney, Visual Representations of Data and Knowledge](https://reader035.vdocuments.us/reader035/viewer/2022062722/56649f315503460f94c4bec3/html5/thumbnails/57.jpg)
57
H3
Image from: http://graphics.stanford.edu/papers/h3/fig/nab0.gif