cse 442 - data visualization visual encoding...
TRANSCRIPT
![Page 1: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/1.jpg)
CSE 442 - Data Visualization
Visual Encoding Design
Jeffrey Heer University of Washington
![Page 2: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/2.jpg)
Last Time: Data & Image Models
![Page 3: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/3.jpg)
The Big Picture
task questions, goals assumptions
data physical data type conceptual data type
domain metadata semantics conventions
processing algorithms
mapping visual encoding
image visual channel graphical marks
![Page 4: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/4.jpg)
N - Nominal (labels or categories) ! Operations: =, ≠
O - Ordered ! Operations: =, ≠, <, >
Q - Interval (location of zero arbitrary) ! Operations: =, ≠, <, >, - ! Can measure distances or spans
Q - Ratio (zero fixed) ! Operations: =, ≠, <, >, -, % ! Can measure ratios or proportions
Nominal, Ordinal & Quantitative
![Page 5: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/5.jpg)
Position (x 2) Size Value Texture Color Orientation Shape
Others?
Visual Encoding Variables
![Page 6: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/6.jpg)
Bertin’s “Levels of Organization”
Nominal Ordinal Quantitative
N O Q
N O Q
N O Q
N O
N
N
N
Position
Size
Value
Texture
Color
Orientation
Shape
Note: Q ⊂ O ⊂ N
![Page 7: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/7.jpg)
Assume k visual encodings and n data attributes. We would like to pick the “best” encoding among a combinatorial set of possibilities of size (n+1)k
Principle of Consistency The properties of the image (visual variables) should match the properties of the data.
Principle of Importance Ordering Encode the most important information in the most effective way.
Choosing Visual Encodings
![Page 8: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/8.jpg)
Expressiveness A set of facts is expressible in a visual language if the sentences (i.e. the visualizations) in the language express all the facts in the set of data, and only the facts in the data.
Effectiveness A visualization is more effective than another visualization if the information conveyed by one visualization is more readily perceived than the information in the other visualization.
Design Criteria [Mackinlay 86]
![Page 9: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/9.jpg)
Tell the truth and nothing but the truth (don’t lie, and don’t lie by omission)
Use encodings that people decode better (where better = faster and/or more accurate)
Design Criteria Translated
![Page 10: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/10.jpg)
Effectiveness Rankings [Mackinlay 86]QUANTITATIVE ORDINAL NOMINAL Position Position Position Length Density (Value) Color Hue Angle Color Sat Texture Slope Color Hue Connection Area (Size) Texture Containment Volume Connection Density (Value) Density (Value) Containment Color Sat Color Sat Length Shape Color Hue Angle Length Texture Slope Angle Connection Area (Size) Slope Containment Volume Area Shape Shape Volume
![Page 11: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/11.jpg)
Effectiveness Rankings [Mackinlay 86]QUANTITATIVE ORDINAL NOMINAL Position Position Position Length Density (Value) Color Hue Angle Color Sat Texture Slope Color Hue Connection Area (Size) Texture Containment Volume Connection Density (Value) Density (Value) Containment Color Sat Color Sat Length Shape Color Hue Angle Length Texture Slope Angle Connection Area (Size) Slope Containment Volume Area Shape Shape Volume
![Page 12: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/12.jpg)
Effectiveness Rankings [Mackinlay 86]QUANTITATIVE ORDINAL NOMINAL Position Position Position Length Density (Value) Color Hue Angle Color Sat Texture Slope Color Hue Connection Area (Size) Texture Containment Volume Connection Density (Value) Density (Value) Containment Color Sat Color Sat Length Shape Color Hue Angle Length Texture Slope Angle Connection Area (Size) Slope Containment Volume Area Shape Shape Volume
![Page 13: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/13.jpg)
Redesign Examples
![Page 14: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/14.jpg)
Color Encoding
![Page 15: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/15.jpg)
Area Encoding
![Page 16: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/16.jpg)
Gene Expression Time-Series [Meyer et al ’11]
Color Encoding Position Encoding
![Page 17: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/17.jpg)
Artery Visualization [Borkin et al ’11]
Rainbow Palette Diverging Palette
2D
3D
92%62%
71%39%
![Page 18: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/18.jpg)
A Design Space of Visual Encodings
![Page 19: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/19.jpg)
Assign data fields (e.g., with N, O, Q types) to visual channels (x, y, color, shape, size, …) for a chosen graphical mark type (point, bar, line, …).
Additional concerns include choosing appropriate encoding parameters (log scale, sorting, …) and data transformations (bin, group, aggregate, …).
These options define a large combinatorial space, containing both useful and questionable charts!
Mapping Data to Visual Variables
![Page 20: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/20.jpg)
1D: NominalRaw Aggregate (Count)
![Page 21: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/21.jpg)
Expressive?Raw Aggregate (Count)
![Page 22: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/22.jpg)
1D: QuantitativeRaw Aggregate (Count)
![Page 23: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/23.jpg)
Expressive?Raw Aggregate (Count)
![Page 24: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/24.jpg)
Raw (with Layout Algorithm)
Treemap Bubble Chart
Aggregate (Distributions)
Box Plot Violin Plot
middle 50%
low highmedian
![Page 25: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/25.jpg)
2D: Nominal x NominalRaw Aggregate (Count)
![Page 26: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/26.jpg)
2D: Quantitative x QuantitativeRaw Aggregate (Count)
![Page 27: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/27.jpg)
2D: Nominal x QuantitativeRaw Aggregate (Mean)
![Page 28: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/28.jpg)
Treemap Bubble Chart
Beeswarm Plot
Raw (with Layout Algorithm)
![Page 29: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/29.jpg)
Two variables [x,y] Can map to 2D points. Scatterplots, maps, …
Third variable [z] Often use one of size, color, opacity, shape, etc. Or, one can further partition space.
What about 3D rendering?
3D and Higher
[Bertin]
![Page 30: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/30.jpg)
Multidimensional Data
![Page 31: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/31.jpg)
Position (X) Position (Y) Size Value Texture Color Orientation Shape
~8 dimensions?
Visual Encoding Variables
![Page 32: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/32.jpg)
Sales figures for a fictional coffee chain
Sales Q-Ratio Profit Q-Ratio Marketing Q-Ratio Product Type N {Coffee, Espresso, Herbal Tea, Tea} Market N {Central, East, South, West}
Example: Coffee Sales
![Page 33: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/33.jpg)
Encode “Sales” (Q) and “Profit” (Q) using Position
![Page 34: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/34.jpg)
Encode “Product Type” (N) using Hue
![Page 35: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/35.jpg)
Encode “Market” (N) using Shape
![Page 36: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/36.jpg)
Encode “Marketing” (Q) using Size
![Page 37: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/37.jpg)
A trellis plot subdivides space to enable comparison across multiple plots.
Typically nominal or ordinal variables are used as dimensions for subdivision.
Trellis Plots
![Page 38: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/38.jpg)
[MacEachren ’95, Figure 2.11, p. 38]
Small Multiples
![Page 39: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/39.jpg)
Small Multiples
[MacEachren ’95, Figure 2.11, p. 38]
![Page 40: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/40.jpg)
Scatter plots for pairwise comparison of each data dimension.
Scatterplot Matrix (SPLOM)
![Page 41: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/41.jpg)
Multiple Coordinated Views
select high salaries
avg career HRs vs avg career hits (batting ability)
avg assists vs avg putouts (fielding ability)
how long in majors
distribution of positions played
![Page 42: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/42.jpg)
Linking Assists to Position
![Page 43: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/43.jpg)
Parallel Coordinates
![Page 46: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/46.jpg)
Visualize up to ~two dozen dimensions at once 1. Draw parallel axes for each variable 2. For each tuple, connect points on each axis Between adjacent axes: line crossings imply neg. correlation, shared slopes imply pos. correlation. Full plot can be cluttered. Interactive selection can be used to assess multivariate relationships. Highly sensitive to axis scale and ordering. Expertise required to use effectively!
Parallel Coordinates [Inselberg]
![Page 47: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/47.jpg)
Radar Plot / Star Graph
“Parallel” dimensions in polar coordinate space Best if same units apply to each axis
![Page 48: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/48.jpg)
Use expressive and effective encodings Avoid over-encoding Reduce the problem space Use space and small multiples intelligently Use interaction to generate relevant views
Rarely does a single visualization answer all questions. Instead, the ability to generate appropriate visualizations quickly is critical!
Visual Encoding Design
![Page 49: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/49.jpg)
Administrivia
![Page 50: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/50.jpg)
A2 is available on the course website + Canvas Dataset & analysis questions due Mon 4/10 Analysis report due Fri 4/14
We will discuss in class on Thursday! Please read description in detail ahead of time. Be sure to review the example submission. Get started on finding datasets ASAP!
Assignment 2
![Page 51: CSE 442 - Data Visualization Visual Encoding Designcourses.cs.washington.edu/courses/cse442/17sp/lectures/... · 2017-04-04 · A trellis plot subdivides space to enable ... Between](https://reader033.vdocuments.net/reader033/viewer/2022050218/5f64398d192cad51dc24bfba/html5/thumbnails/51.jpg)
Web Programming: JavaScript, SVG, CSS Thursday, April 6 - 4:30-5:50pm - PAA A118
Introduction to D3.js Thursday, April 13 - 4:30-5:50pm - PAA A118
Technology Tutorials