cs171 visualization
TRANSCRIPT
![Page 1: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/1.jpg)
CS171 VisualizationAlexander Lex
[xkcd]
The Visualization Alphabet: Marks and Channels
![Page 2: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/2.jpg)
This Week
Thursday: Task Abstraction, ValidationHomework 1 due on Friday!Any more problems with private GitHub repositories?Later today: Introduction to HW 2Reading: D3, Chapter 12; VAD, Chapters 3&4
![Page 3: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/3.jpg)
Next Week
Lecture 7: Homework 2 Design StudioLecture 8: Interaction Guest Lecture, Jean-Daniel Fekete (INRIA)Sections: D3 & JS: Data Structures, Layouts
![Page 4: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/4.jpg)
No Device Policy
No Computers, Tablets, Phones in lecture hallexcept when used for exercises
Switch off, mute, flight modeWhy?
It’s better to take notes by handNotifications are designed to grab your attention
![Page 5: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/5.jpg)
Last Week
![Page 6: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/6.jpg)
Terms
Dataset Typeswhat can be visualized?
Data Typesfundamental unitscombinations make up Dataset Types
Tables
Attributes (columns)
Items (rows)
Cell containing value
Networks
Link
Node (item)
Trees
Fields (Continuous)
Attributes (columns)
Value in cell
Cell
Multidimensional Table
Value in cell
Grid of positions
Geometry (Spatial)
Position
Dataset Types
Data Types
Items Attributes Links Positions Grids
![Page 7: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/7.jpg)
Tables
Flat Tableone item per roweach column is attributeunique (implicit) keyno duplicates
Multidimensional Tableindexing based on multiple keys
Item
ValuesKeysAttributes
![Page 8: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/8.jpg)
Multidimensional Tables
Keys: Patients
Keys: Genes
![Page 9: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/9.jpg)
Graphs/Networks
A graph G(V,E) consists of a set of vertices (nodes) V and a set of edges (links) E connecting these vertices.
A tree is a graph with no cycles
![Page 10: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/10.jpg)
FieldsAttribute values associated with cellsCell contains data from continuous domain
Temperature, pressure, wind velocity
Measured or simulatedSampling & Interpolation
Signal processing & stats
![Page 11: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/11.jpg)
Other Collections
SetsUnique items, unordered
ListsOrdered, duplicates allowed
ClustersGroups of similar items
![Page 12: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/12.jpg)
Data Types
Categorical/Nominal (labels)Operations: =, ≠
Ordinal (ordered)Operations: =, ≠, >, <
Interval (location of zero arbitrary)Operations: =, ≠, >, <, +, − (distance)
Ratio (zero fixed)Operations: =, ≠, >, <, +, −,×, ÷ (proportions)
On the theory of scales and measurements [S. Stevens, 46]
![Page 13: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/13.jpg)
Item/Element/ (Independent)
Variable
![Page 14: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/14.jpg)
Attribute/Dimension/(Dependent)
Variable/Feature
![Page 15: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/15.jpg)
Semantics
![Page 16: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/16.jpg)
Keys?
![Page 17: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/17.jpg)
Attribute Types?
![Page 18: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/18.jpg)
CategoricalOrdinal
Quantitative
![Page 19: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/19.jpg)
Design Critique
![Page 20: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/20.jpg)
Recalled Cars NY Times
http://goo.gl/82tE6b
![Page 21: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/21.jpg)
The Visualization Alphabet: Marks and
Channels
![Page 22: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/22.jpg)
How can I visually represent two numbers, e.g., 4 and 8
![Page 23: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/23.jpg)
Marks & Channels
Marks: represent items or linksChannels: change appearance based on attributeChannel = Visual Variable
![Page 25: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/25.jpg)
Marks for ItemsBasic geometric elements
3D mark: Volume, but rarely used
0D 2D1D
![Page 27: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/27.jpg)
Containment can be nested
[Riche & Dwyer, 2010]
![Page 28: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/28.jpg)
Channels (aka Visual Variables)
Control appearanceproportional to orbased on attributes
![Page 29: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/29.jpg)
Jacques Bertin
French cartographer [1918-2010]Semiology of Graphics [1967]Theoretical principles for visual encodings
![Page 30: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/30.jpg)
Bertin’s Visual Variables
Semiology of Graphics [J. Bertin, 67]
Points Lines AreasMarks:
PositionSize(Grey)Value
TextureColorOrientationShape
![Page 31: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/31.jpg)
Using Marks and Channels
Mark: Line Channel: Length/Position1 quantitative attribute1 categorical attribute
Adding Hue+1 categorical attr.
Adding Size+1 quantitative attr.
Mark: PointChannel: Position2 quantitative attr.
![Page 32: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/32.jpg)
Redundant encoding
Length, Position and Value
![Page 33: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/33.jpg)
Good bar chart?
Rule: Use channel proportional to data!
![Page 34: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/34.jpg)
Types of Channels
Identity ChannelsWhat? Where?ShapeColor (hue)Spatial region …
Magnitude ChannelsHow much?PositionLengthSaturation …
Categorical DataOrdinal & Quantitative Data
![Page 35: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/35.jpg)
Magnitude Channels: Ordered Attributes Identity Channels: Categorical Attributes
Spatial region
Color hue
Motion
Shape
Position on common scale
Position on unaligned scale
Length (1D size)
Tilt/angle
Area (2D size)
Depth (3D position)
Color luminance
Color saturation
Curvature
Volume (3D size)
Channels: Expressiveness Types and Effectiveness Ranks
![Page 36: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/36.jpg)
What visual variables are used?
http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html
![Page 37: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/37.jpg)
What visual variables are used?
![Page 38: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/38.jpg)
Characteristics of ChannelsSelective
Is a mark distinct from other marks? Can we make out the difference between two marks?
AssociativeDoes it support grouping?
Quantitative (Magnitude vs Identity Channels)Can we quantify the difference between two marks?
![Page 39: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/39.jpg)
Characteristics of Channels
Order (Magnitude vs Identity)Can we see a change in order?
LengthHow many unique marks can we make?
![Page 40: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/40.jpg)
Position
Strongest visual variableSuitable for all data typesProblems:
Sometimes not available (spatial data)Cluttering
Selective: yesAssociative: yesQuantitative: yesOrder: yesLength: fairly big
![Page 42: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/42.jpg)
Position in 3D?
[Spotfire]
![Page 43: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/43.jpg)
Length & Size
Good for 1D, OK for 2D, Bad for 3DEasy to see whether one is biggerAligned bars use position redundantlyFor 1D length:Selective: yesAssociative: yesQuantitative: yesOrder: yesLength: high
![Page 44: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/44.jpg)
Example 2D Size: Bubbles
![Page 45: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/45.jpg)
Value/Luminance/Saturation
OK for quantitative data when length & size are used.Not very many shades recognizable
Selective: yesAssociative: yesQuantitative: somewhat (with problems)Order: yesLength: limited
![Page 47: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/47.jpg)
Color
Good for qualitative data (identity channel)Limited number of classes/length (~7-10!)Does not work for quantitative data!Lots of pitfalls! Be careful!My rule:
minimize color use for encoding datause for brushing
Selective: yesAssociative: yesQuantitative: noOrder: noLength: limited
< <?????
![Page 49: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/49.jpg)
Color: Good Example
![Page 50: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/50.jpg)
Shape
Great to recognize many classes.No grouping, ordering.
Selective: yesAssociative: limitedQuantitative: noOrder: noLength: vast
< <?????
![Page 52: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/52.jpg)
Chernoff Faces
Idea: use facial parameters to map quantitative data
Critique: https://eagereyes.org/criticism/chernoff-faces
Does it work?Not really!
![Page 53: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/53.jpg)
More Channels
![Page 54: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/54.jpg)
Why are quantitative channels different?
S = sensationI = intensity
![Page 55: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/55.jpg)
Steven’s Power Law, 1961
From Wilkinson 99, based on Stevens 61
Electric
![Page 56: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/56.jpg)
How much longer?
A
B
2x
![Page 57: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/57.jpg)
How much longer?
A
B
4x
![Page 58: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/58.jpg)
How much steeper?
A B
~4x
![Page 59: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/59.jpg)
How much larger (area)?
A B
5x
![Page 60: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/60.jpg)
How much larger (area)?
A B
3x
![Page 61: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/61.jpg)
How much larger (diameter)?
A B
2x
![Page 62: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/62.jpg)
How much darker?
A B
2x
![Page 64: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/64.jpg)
Other Factors Affecting Accuracy
AlignmentDistractorsDistanceCommon scale…
A B
Unframed Aligned
Framed Unaligned
AB
AB
Unframed Unaligned
VS VS VS
![Page 65: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/65.jpg)
Cleveland / McGill, 1984
William S. Cleveland; Robert McGill , “Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods.” 1984
![Page 67: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/67.jpg)
Positions
Rectangular areas
(aligned or in a treemap)
Angles
Circular areas
Cleveland & McGill’s Results
Crowdsourced Results
1.0 3.01.5 2.52.0Log Error
1.0 3.01.5 2.52.0Log Error
![Page 68: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/68.jpg)
[Mackinlay, Automating the Design of Graphical Presentations of Relational Information, 1986]
Jock Mackinlay, 1986D
ecre
asin
g
![Page 69: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/69.jpg)
Magnitude Channels: Ordered Attributes Identity Channels: Categorical Attributes
Spatial region
Color hue
Motion
Shape
Position on common scale
Position on unaligned scale
Length (1D size)
Tilt/angle
Area (2D size)
Depth (3D position)
Color luminance
Color saturation
Curvature
Volume (3D size)
Channels: Expressiveness Types and Effectiveness Ranks
![Page 70: CS171 Visualization](https://reader030.vdocuments.site/reader030/viewer/2022012804/61bd2f7361276e740b102d4b/html5/thumbnails/70.jpg)
Separability of Attributes
Can we combine multiple visual variables?
T. Munzner, Visualization Analysis and Design, 2014