Visualization

CS 347Michael BernsteinThanks to Jeff Heer and Diana Maclean

An unnecessarily quantitative visualization of your time in 347

2

Time spentReading

Doing

Scrambling to figure out how to deal with COVID-19

Holy moly, a lot is changing!Stay healthy!As a reminder, what’s changing:

Lectures are now online (not recorded)Discussants share meta commentaries at the end of lecture, but no discussionProject fair 2 still requires a submission, but will have no in-person eventNo more final presentations: all points routed into the final paperLet’s talk about deadlines

3

Anscombe’s Quartet

4

3

The ability to take data—to be able to understand it, to process it, to extract value from it, to visualize it, to communicate it—that’s going to be a hugely important skill in the next decades, … because now we really do have essentially free and ubiquitous data. So the complimentary scarce factor is the ability to understand that data and extract value from it.

Hal Varian, Google’s Chief EconomistThe McKinsey Quarterly, Jan 2009

What is visualization?“Transformation of the symbolic into the geometric”

[McCormick et al. 1987]

“... finding the artificial memory that best supports our natural means of perception.” [Bertin 1967]

“The use of computer-generated, interactive, visual representations of data to amplify cognition.”[Card, Mackinlay, & Shneiderman 1999]

Set A Set B Set C Set DX Y X Y X Y X Y

10 8.04 10 9.14 10 7.46 8 6.58

8 6.95 8 8.14 8 6.77 8 5.76

13 7.58 13 8.74 13 12.74 8 7.71

9 8.81 9 8.77 9 7.11 8 8.84

11 8.33 11 9.26 11 7.81 8 8.4714 9.96 14 8.1 14 8.84 8 7.04

6 7.24 6 6.13 6 6.08 8 5.25

4 4.26 4 3.1 4 5.39 19 12.5

12 10.84 12 9.11 12 8.15 8 5.56

7 4.82 7 7.26 7 6.42 8 7.915 5.68 5 4.74 5 5.73 8 6.89

[Anscombe 73]

Summary Statistics Linear RegressionuX = 9.0 ıX = 3.317 Y2 = 3 + 0.5 XuY = 7.5 ıY = 2.03 R2 = 0.67

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15 20

Set A

Set C Set D

Set B

X X

Y

Y

3

The ability to take data—to be able to understand it, to process it, to extract value from it, to visualize it, to communicate it—that’s going to be a hugely important skill in the next decades, … because now we really do have essentially free and ubiquitous data. So the complimentary scarce factor is the ability to understand that data and extract value from it.

Hal Varian, Google’s Chief EconomistThe McKinsey Quarterly, Jan 2009

What is visualization?“Transformation of the symbolic into the geometric”

[McCormick et al. 1987]

“... finding the artificial memory that best supports our natural means of perception.” [Bertin 1967]

“The use of computer-generated, interactive, visual representations of data to amplify cognition.”[Card, Mackinlay, & Shneiderman 1999]

Set A Set B Set C Set DX Y X Y X Y X Y

10 8.04 10 9.14 10 7.46 8 6.58

8 6.95 8 8.14 8 6.77 8 5.76

13 7.58 13 8.74 13 12.74 8 7.71

9 8.81 9 8.77 9 7.11 8 8.84

11 8.33 11 9.26 11 7.81 8 8.4714 9.96 14 8.1 14 8.84 8 7.04

6 7.24 6 6.13 6 6.08 8 5.25

4 4.26 4 3.1 4 5.39 19 12.5

12 10.84 12 9.11 12 8.15 8 5.56

7 4.82 7 7.26 7 6.42 8 7.915 5.68 5 4.74 5 5.73 8 6.89

[Anscombe 73]

Summary Statistics Linear RegressionuX = 9.0 ıX = 3.317 Y2 = 3 + 0.5 XuY = 7.5 ıY = 2.03 R2 = 0.67

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15 20

Set A

Set C Set D

Set B

X X

Y

Y

3

The ability to take data—to be able to understand it, to process it, to extract value from it, to visualize it, to communicate it—that’s going to be a hugely important skill in the next decades, … because now we really do have essentially free and ubiquitous data. So the complimentary scarce factor is the ability to understand that data and extract value from it.

Hal Varian, Google’s Chief EconomistThe McKinsey Quarterly, Jan 2009

What is visualization?“Transformation of the symbolic into the geometric”

[McCormick et al. 1987]

“... finding the artificial memory that best supports our natural means of perception.” [Bertin 1967]

“The use of computer-generated, interactive, visual representations of data to amplify cognition.”[Card, Mackinlay, & Shneiderman 1999]

Set A Set B Set C Set DX Y X Y X Y X Y

10 8.04 10 9.14 10 7.46 8 6.58

8 6.95 8 8.14 8 6.77 8 5.76

13 7.58 13 8.74 13 12.74 8 7.71

9 8.81 9 8.77 9 7.11 8 8.84

11 8.33 11 9.26 11 7.81 8 8.4714 9.96 14 8.1 14 8.84 8 7.04

6 7.24 6 6.13 6 6.08 8 5.25

4 4.26 4 3.1 4 5.39 19 12.5

12 10.84 12 9.11 12 8.15 8 5.56

7 4.82 7 7.26 7 6.42 8 7.915 5.68 5 4.74 5 5.73 8 6.89

[Anscombe 73]

Summary Statistics Linear RegressionuX = 9.0 ıX = 3.317 Y2 = 3 + 0.5 XuY = 7.5 ıY = 2.03 R2 = 0.67

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15 20

Set A

Set C Set D

Set B

X X

Y

Y

3

The ability to take data—to be able to understand it, to process it, to extract value from it, to visualize it, to communicate it—that’s going to be a hugely important skill in the next decades, … because now we really do have essentially free and ubiquitous data. So the complimentary scarce factor is the ability to understand that data and extract value from it.

Hal Varian, Google’s Chief EconomistThe McKinsey Quarterly, Jan 2009

What is visualization?“Transformation of the symbolic into the geometric”

[McCormick et al. 1987]

“... finding the artificial memory that best supports our natural means of perception.” [Bertin 1967]

“The use of computer-generated, interactive, visual representations of data to amplify cognition.”[Card, Mackinlay, & Shneiderman 1999]

Set A Set B Set C Set DX Y X Y X Y X Y

10 8.04 10 9.14 10 7.46 8 6.58

8 6.95 8 8.14 8 6.77 8 5.76

13 7.58 13 8.74 13 12.74 8 7.71

9 8.81 9 8.77 9 7.11 8 8.84

11 8.33 11 9.26 11 7.81 8 8.4714 9.96 14 8.1 14 8.84 8 7.04

6 7.24 6 6.13 6 6.08 8 5.25

4 4.26 4 3.1 4 5.39 19 12.5

12 10.84 12 9.11 12 8.15 8 5.56

7 4.82 7 7.26 7 6.42 8 7.915 5.68 5 4.74 5 5.73 8 6.89

[Anscombe 73]

Summary Statistics Linear RegressionuX = 9.0 ıX = 3.317 Y2 = 3 + 0.5 XuY = 7.5 ıY = 2.03 R2 = 0.67

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15 20

Set A

Set C Set D

Set B

X X

Y

Y

5

3

The ability to take data—to be able to understand it, to process it, to extract value from it, to visualize it, to communicate it—that’s going to be a hugely important skill in the next decades, … because now we really do have essentially free and ubiquitous data. So the complimentary scarce factor is the ability to understand that data and extract value from it.

Hal Varian, Google’s Chief EconomistThe McKinsey Quarterly, Jan 2009

What is visualization?“Transformation of the symbolic into the geometric”

[McCormick et al. 1987]

“... finding the artificial memory that best supports our natural means of perception.” [Bertin 1967]

“The use of computer-generated, interactive, visual representations of data to amplify cognition.”[Card, Mackinlay, & Shneiderman 1999]

Set A Set B Set C Set DX Y X Y X Y X Y

10 8.04 10 9.14 10 7.46 8 6.58

8 6.95 8 8.14 8 6.77 8 5.76

13 7.58 13 8.74 13 12.74 8 7.71

9 8.81 9 8.77 9 7.11 8 8.84

11 8.33 11 9.26 11 7.81 8 8.4714 9.96 14 8.1 14 8.84 8 7.04

6 7.24 6 6.13 6 6.08 8 5.25

4 4.26 4 3.1 4 5.39 19 12.5

12 10.84 12 9.11 12 8.15 8 5.56

7 4.82 7 7.26 7 6.42 8 7.915 5.68 5 4.74 5 5.73 8 6.89

[Anscombe 73]

Summary Statistics Linear RegressionuX = 9.0 ıX = 3.317 Y2 = 3 + 0.5 XuY = 7.5 ıY = 2.03 R2 = 0.67

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15

0

2

4

6

8

10

12

14

0 5 10 15 20

Set A

Set C Set D

Set B

X X

Y

Y

What is visualization?“Transformation of the symbolic into the geometric” [McCormick et al., 1987]“…finding the artificial memory that best supports our natural means of perception.” [Bertin 1967]“The use of computer-generated, interactive, visual representations of data to amplify cognition.” [Card, Mackinlay, and Shneiderman 1999]

6

YOU READ THIS

William Playfair, 1786

Florence Nightingale, 1857

Charles Minard, 1869

TodayHow visualizations convey informationProgramming tools for creating visualizationsPrinciples and techniques for creating effective visualizations

11

Visualization and perception

“The visual decoding of information encoded on graphs” [Cleveland and McGill, ‘84]

Which best encodes quantities?PositionLengthAreaVolumeValue (brightness)Color hueOrientation (angle)Shape 13

Quantities = ratio variablesWhat do you think? [1min]

Mackinlay’s ranking [1986]Quantitative Position Length Angle Slope Area Volume Density Color saturation Color hue Texture Connection Containment Shape 14

Ordinal Position Density Color saturation Color hue Texture Connection Containment Length Angle Slope Area Volume Shape

Nominal Position Color hue Texture Connection Containment Density Color saturation Shape Length Angle Slope Area Volume

But why this ranking?

Semiologie Graphique [Bertin 1967]

15

Foundations of infovis theory. Terms such as:

marks: represent something other than themselves

visual variables: properties of marks that can vary, e.g., position, size, shape, and color

Pre-attentive processing [Healey, TVCG 2012]

16

17

Pre-attentive processing [Healey, TVCG 2012]

18

Pre-attentive processing [Healey, TVCG 2012]

Orientation Length Closure

Curvature Density Size

Implication: visualizationsshould render variation along the characteristics where our perceptual systems support pre-attentive processing

We are poor at perceiving (some) differences [Cleveland & McGill, 1984]

19

Classic result: experimental tests of the relationship between encodings and the accuracy of the differences that we perceive from those encodings

Intentionally difficult? [Hullman and Adar, Infovis 2011]

Generally, visualization (and HCI more broadly) argue optimizing for clear and correct interpretationYet difficult visualizations may support better comprehension and recallWhy? It induces active processing:

Forcing active construction of meaningDisfluent learning experiences avoid heuristics and superficial reasoning 20

Difficult, withchartjunk

Easy

[Li and Moacdieh, HFES 2014]

Rhetoric and visualization [Hullman and Diakopoulos 2011]

Visualizations embed rhetorical goals to tell a story

Semiotics: signs derive their meaning from culture and other signs placed near themRhetoric gets embedded by omission, by how we represent uncertainty, by visual metaphor (up and right = good), and others

21

PresidentU.S.

Congress

Defense Dept.Health & Human

Services Dept

Veterans

AdministrationTreasury Dept. Labor Dept.

Consumers

Health

Care

Providers

Health Care Goods & Services

Private

Insurers

Employers

Institute

of

Medicine

Comparative

Effectiveness

Research

Commission

Traditional

Health

Insurance

Plans

Qualified

Health

Benefit

Plans

HEALTH INSURANCE

EXCHANGE

Public

Health

Plan

Ombuds-

man

CER

Trust

Fund

TaxesAdvisory

PanelsCCER

Reinsurance

Program

Regulations, Mandates, State

Health Agencies, state Health

Information Exchanges

HIPDB

NPDB

CMS

Medicaid

Medicare

Language

Demonstration

Program

AHRQ

Center for

Quality

Improvement

S-CHIP

Taxes

National

Coordinator for

Health IT

BUREAU

OF HEALTH

INFORMATION

Office of Civil

Rights

Office of Minority

Health

HEALTH CHOICES

ADMINISTRATION:

Mandate:

Buy

Insurance

Premiums

Mandate:

Provide

Insurance

BENEFIT

LEVELS

Nurse

Education &

Training

National Center for Health

Workforce Analysis

Clinical Preventive

Services

Taskforce

Advisory

Committee on

Health Workforce

& Evaluation

Surgeon

General

Financial Disclosure

Reports: Any

Transfers between

Providers &

Suppliers

Public Health

Investment Fund

National

Priorities for

Performance

Improvement

Health

Insurance

Exchange

Trust Fund Public

Health

Workforce

Corps

Co

mm

un

ity

He

alth

& C

are

Ce

nte

rs

Individual Tax Return Information

Federal Mandates for Website Design

Inspector

General

Small

Business

Tax

Credits

Special HIE Inspector General

Physician

Quality

Reporting

Initiative

ORGANIZATIONAL CHART OF THE

HOUSE DEMOCRATS’ HEALTH PLAN

Low-Income

Subsidy (families

with 4x poverty level)

Health Affordability

Credits

Health

Benefits

Advisory

Committee

Public Plan Ombudsman

National

Health

Service

Corps

Cultural &

Linguistic

Competence

Training

Accountable

Care

Organization

Source: Joint Economic Committee, Republican Staff

Congressman Kevin Brady, Ranking House Republican Member

House GOP graphic

“Do not %*#& with graphic designers” response by Robert Palmer

Designing effective visualization

Brushing and Linking [Buja et al., IEEE Vis 1991; Ahlberg and Shneiderman CHI 1994]

Example by Jeff Heer

Touring the visualization zoo [Heer, Bostock, and Ogievetsky 2010]

24

Stacked graph: good for aggregate patterns

Visualization researchers develop many new techniques for visualizing complex data. Here are a few popular ones…

Small multiples: makes comparison easier

Comparing statistical distributions…

Scatter plot matrix: compareall pairs

Parallel coordinates: more compact

Touring the visualization zoo [Heer, Bostock, and Ogievetsky 2010]

Visualizing hierarchies…

Reingold-Tilford tree layout algorithm Sunburst diagram

Treemap[Shneiderman 1991]

Touring the visualization zoo [Heer, Bostock, and Ogievetsky 2010]

Visualizing networks…

Force directed layoutArc diagram

Adjacency matrix

Touring the visualization zoo [Heer, Bostock, and Ogievetsky 2010]

We over-rely on point estimates. People simplify distributions and attend to point estimates on the right (10min until the bus comes)

28

YOU READ THIS

Conveying uncertainty [Kay et al., CHI 2016]

Conveying uncertainty [Kay et al., CHI 2016]

29

YOU READ THIS

Suggestion: quantile dot plots

[Feng et al., 2010]

User inputs variables of interest, and recommender automatically generates visualizations of relevant other variables

31

Exploratory analysis [Wongsuphasawat et al., TVCG 2015]

How do we know which visualizations will be effective?We can model visualization design knowledge as a collection of constraints, and learn soft weights over those constraints from data

32

Separating wheat from chaff [Moritz et al., TVCG 2019]

Well-formedness: a shape encoding can only encode points, not barsEliminate non-expressive vis: bar charts must use zero as a baseline; don’t use size to encode nominal dataSoft preference constraints: prefer to include zero for continuous fields

Programming visualizations

Recall: D3.js [Bostock and Heer 2011]

Previous representation: visualization as custom scene graph abstractions (e.g., HTML Canvas)D3: use a DOM-style representation

34

Vega Lite

35

Discussion

Find today’s discussion room at http://hci.st/room