csci 552 data visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfvisualizing data bearing some...
TRANSCRIPT
![Page 1: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/1.jpg)
1
CSCI 552Data Visualization
Shiaofen Fang
2
What Is Visualization?
We observe and draw conclusions– “A picture says more than a thousand
words/numbers” – Seeing is believing, seeing is understanding– Beware of ‘illusions’ (magicians)
Visualization: transformation of data/information into pictures
![Page 2: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/2.jpg)
2
3
Different Types of Data Visualization
Scientific Visualization– From science, engineering, medicine, etc.– Is a method of computing: exploration,
simulation, discovery, insight.– Data are usually homogeneous with predefined
spatial structures. Information Visualization
– Abstract Data: WWW documents, file structures, relationships, financial data, etc.
– Usually heterogeneous without spatial structures.
Functions of Visualization
A Representation of InformationAid for Understanding and AnalysisValidation of ResultsA Tool for Communication
4
![Page 3: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/3.jpg)
3
(10,20,21), (12,13,14), (13,32,12),...., (1,2,3), (2,4,5),(3,5,6),.....
Terrain geometry:
Terrain Texture:
Time 0:
(23,34,54), (23,34,23), (45,26,78),....
Volumetric cloud cover: 0, 0, 12, 14, 15, 15, 17, 12, 23, 45,.....Wind vectors: (0.2, 0.3, 0.93,5), (0.4,0.5,0.76,12),...,
Volumetric cloud cover: 0, 0, 11, 12, 13, 16, 20, 12, 32, 45,.....Wind vectors: (0.4,0.5,0.76,12),(0.5,0.5,0.7,6),...
Time 1:
Examples
6
![Page 4: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/4.jpg)
4
7
Info-graphics
8
![Page 5: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/5.jpg)
5
9
How Many “V”s
10
![Page 6: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/6.jpg)
6
11
Perpetual Ocean
12
![Page 7: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/7.jpg)
7
Visible Human
13
14
Graphical Design
Can be more precise and revealing than numerical display
Can capture a large amount of information in a very small space
Can extend to time-series display Can be narrative Can represent each data point by visual
information (graphic, icon, image, color, pattern)
![Page 8: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/8.jpg)
8
15Cholera map of central London, 1854, by Dr. John Snow
16Train schedule Paris-Lyon, 1880s
![Page 9: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/9.jpg)
9
17Napoleon’s Russia campaign, 1812, plots 6 variables on a 2D graph
18
Graphical Display (example)
fear-rage graph
![Page 10: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/10.jpg)
10
19
Graphical Integrity --What To Avoid In Visualization
Example: fuel economy standards
The Lie Factor = Size of effect shown in Graphic Size of effect in Data
20
Graphical Integrity (2) ...
Example: the growing barrel
Visualizing data bearing some dimension by means of objects of higher dimensions
![Page 11: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/11.jpg)
11
21
Graphical Integrity (3) ...
Example: Connecticut traffic deaths
Quoting data out of context and/or too sparse
22
Graphical Integrity (4) ...
Example: NCSA storm model
Is cosmetic decoration really needed to make data more interesting
Misleading graphical representation
![Page 12: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/12.jpg)
12
Visual Perceptions
Visual Memory is Limited
We are sometimes not very sensitive to small visual changes
Visual perception can be influenced contrast and surrounding environment
23
24
![Page 13: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/13.jpg)
13
How many black dots?
25
26
![Page 14: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/14.jpg)
14
Seeing parallel lines
27
Seeing is not always believing
28
![Page 15: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/15.jpg)
15
29
Visualization Design Principles
Show the data Induce the viewer to think about the substance rather
than methodology, design, and the technology Avoid distorting what the data have to say Present large data sets coherently and concisely Encourage comparison of different pieces of data Reveal the data at several levels of detail Serve a reasonably clear purpose: description, exploration,
tabulation, or decoration Be closely integrated with the statistical and verbal
description of a data set
Visualization Design
Data Filtering
Visual Mapping
View Selection and Interactions
Aesthetics in Visualization
Metaphor in Visualization
30
![Page 16: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/16.jpg)
16
The Design Process
31
Data Filtering
Determining the optimal amount of information a certain visualization process can handle.
Two approaches1. Let the users choose the data scale to visualize
2. Multi-view or multi-display
32
![Page 17: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/17.jpg)
17
Visual Mapping
From data elements to visual elements
People’s prior knowledge can help visual perception
33
The Wind Map
34
![Page 18: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/18.jpg)
18
View Selection and Interaction
Visual Interaction– Zoom and Roll
– Controlling color mapping.
– Controlling visual mapping of data.
– Data zooming and filtering
Level of Detail control
35
4D data visualization using scatter plot and parallel coordinates
Aesthetics in Visualization
Focus
Balance
Simplicity
- Labels
- Networks
- Color
36
![Page 19: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/19.jpg)
19
Visual Metaphor
A visual metaphor maps the characteristics of some well understood source domain to a more poorly understood target domain (data) so as to render aspects of the target understandable in terms of the source.
37
Trees
38
![Page 20: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/20.jpg)
20
Rivers
39
Ferris Wheel
40
![Page 21: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/21.jpg)
21
Sunflower
41
Tools (InfoVis)
42
Google Refine
Tableau R Processing D3 (JS) ColorBrewer
![Page 22: CSCI 552 Data Visualization - cs.iupui.edusfang/cs552/cs552-intro.pdfVisualizing data bearing some dimension by ... Encourage comparison of different pieces of data ... D3 (JS) ColorBrewer](https://reader034.vdocuments.mx/reader034/viewer/2022051802/5af2b0767f8b9aa91690aad9/html5/thumbnails/22.jpg)
22
Tools (SciVis)
43