CS160: INFORMATION VISUALIZATION Prof. Marti Hearst August 4, - - PowerPoint PPT Presentation

▶
cs160 information visualization
SMART_READER_LITE
LIVE PREVIEW

CS160: INFORMATION VISUALIZATION Prof. Marti Hearst August 4, - - PowerPoint PPT Presentation

Oct 11, 2022 28 likes •719 views

CS160: INFORMATION VISUALIZATION Prof. Marti Hearst August 4, 2015 INFORMATION VISUALIZATION Bringing InSight to Data Visually http://www.fallen.io NYTimes Race for the Presidency 12

slide-1
SLIDE 1

CS160: INFORMATION VISUALIZATION

  • Prof. Marti Hearst

August 4, 2015

slide-2
SLIDE 2

INFORMATION VISUALIZATION

Bringing InSight to Data Visually

slide-3
SLIDE 3

http://www.fallen.io

slide-4
SLIDE 4

NYTimes Race for the Presidency ‘12

http://elections.nytimes.com/2012/results/president/scenarios

slide-5
SLIDE 5

NYTimes Fashion Week

http://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/

slide-6
SLIDE 6

PRACTICE EXERCISE

Practice with the person sitting next to you.

slide-7
SLIDE 7

Few’s Heuristic Guidelines Cheat Sheet

  • #1 Do Not Use Chart Junk
  • #2 Do Not Use Color, Shape, etc., Arbitrarily
  • #3 DO Use Length and Position
  • #4 Do Not Deceive
  • #5 Do Not Treat Nominals (Discrete) Values as Quantitative
  • #6 DO Make Important Information Visually Salient
  • #7 DO Present Multiple Facts Into A Single Visual Pattern
slide-8
SLIDE 8

Which Guidelines Apply / Violated?

Newsweek: “The Majority believe Japan is an innovative company” http://terribleinfographics.tumblr.com

slide-9
SLIDE 9

Which Guidelines Apply / Violated?

Newsweek: “The Majority believe Japan is an innovative company” http://terribleinfographics.tumblr.com

#2 Do not use color arbitrarily #3 (violated) Use length and position for quantity #6 (violated) Highlight salient information

slide-10
SLIDE 10

Now Draw An Alternative

Newsweek: “The Majority believe Japan is an innovative company” http://terribleinfographics.tumblr.com

slide-11
SLIDE 11

WHAT IS VISUALIZATION?

slide-12
SLIDE 12

What is Visualization?

Visualize:

to form a mental image or vision of. to imagine or remember as if actually seeing.

American Heritage dictionary, Concise Oxford dictionary

slide-13
SLIDE 13

What is Information Visualization?

The depiction of information using spatial and graphical representations. To make phenomena visible and understandable which are not naturally accessible to the bare eye.

paraphrased from Costa via Cairo

slide-14
SLIDE 14

PRESENTATION ANALYSIS

INSIGHT

slide-15
SLIDE 15

Why Visualize Information?

  • Solve problems
  • Communicate
  • Make datasets / information understandable
slide-16
SLIDE 16

VISUALIZATION FOR SOLVING PROBLEMS

slide-17
SLIDE 17

John Snow Cholera Map, 1854

slide-18
SLIDE 18

John Snow Cholera Map, 1854 John Snow Cholera Map, 1854

slide-19
SLIDE 19

VISUALIZATION TO COMMUNICATE

Or tell a story

slide-20
SLIDE 20

http://drones.pitchinteractive.com/

slide-21
SLIDE 21

VISUALIZATION FOR UNDERSTANDING DATA

What questions can a visualization answer?

slide-22
SLIDE 22
  • A. Cairo, in Epoca. “When the Brazilian Economy Improves, Inequality Doesn’t Drop”
slide-23
SLIDE 23

Perception primitives

  • Whole visual field is processed in parallel
  • Can tell us what kinds of information is easily

distinguished

  • Pre-attentive properties
  • “pop out”; perceived in less then 200ms
slide-24
SLIDE 24

Color Can Be Good For Showing Classes

  • Rapid visual segmentation
  • Helps determine type

Slide from Michael McGuffin

slide-25
SLIDE 25

Motion

slide-26
SLIDE 26

Size

slide-27
SLIDE 27

Conjunction (does not pop out)

slide-28
SLIDE 28

Other Preattentive channels

Length Width Collinearity Curvature Number Added marks Spatial grouping Shape Enclosure

Slide from Michael McGuffin

slide-29
SLIDE 29

Jacque Bertin’s retinal variables

  • Position
  • Direction (orientation)
  • Size
  • Colour (hue)
  • Contrast (greyness)
  • ‘grain’ (texture)
  • shape

Mijksenaar, Visual Function, p. 38

slide-30
SLIDE 30

VISUALIZATION PRINCIPLES

Few’s 7 Guidelines: 4 Don’ts and 3 Do’s

slide-31
SLIDE 31

#1 DO NOT USE CHART JUNK

Display neither more nor less than what is relevant.

slide-32
SLIDE 32
slide-33
SLIDE 33

http://www.go-globe.com/blog/baidu-statistics/

slide-34
SLIDE 34

#2 DO NOT USE COLOR, SHAPE, ETC, ARBITRARILY

Do not include visual differences that do not correspond to actual differences in the data.

slide-35
SLIDE 35

http://www.go-globe.com/blog/baidu-statistics/

slide-36
SLIDE 36

#3 DO USE LENGTH & POSITION

Length and position on the plane are usually best for showing quantitative values; color and area are often a poor choice for quantitative values.

slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40

#4 DO NOT DECEIVE

Differences in visual properties that represent values should accurately correspond to the actual differences in the values they represent.

slide-41
SLIDE 41

http://www.go-globe.com/blog/baidu-statistics/

slide-42
SLIDE 42

#5 DO NOT TREAT NOMINAL (DISCRETE) VALUES AS IF THEY WERE QUANTITATIVE

Don’t use visualization to imply a trend across discrete variables, as this is misleading.

slide-43
SLIDE 43

Plotting a trend across dog breed categories does not make sense; there is no inherent order to them.

slide-44
SLIDE 44

#6 DO MAKE IMPORTANT INFORMATION VISUALLY SALIENT

Use color selectively to highlight, visual hierarchy, and

  • ther graphic design techniques to create visual

salience.

slide-45
SLIDE 45

Stephen Barrows: http://cargocollective.com/sfb/Infographic-for-Dog-Vests

Make important info visually salient

slide-46
SLIDE 46

#7 DO PRESENT MULTIPLE FACTS INTO A SINGLE VISUAL PATTERN

And present all information needed within an eye span (or else provide interactive drill down).

slide-47
SLIDE 47

Popularity and Trainability Sporting Dogs (Size shows popularity, color Trainability)

slide-48
SLIDE 48

Popularity and Trainability Across Categories Can only see a few at once

slide-49
SLIDE 49

Popularity of Several Dog Categories (Size shows popularity, Color shows category)

slide-50
SLIDE 50

Dog breeds: Popularity by trainability

slide-51
SLIDE 51

Dog breeds: Popularity by trainability

Not a strong trend

slide-52
SLIDE 52

Highlight and Annotate Important Information

slide-53
SLIDE 53

NOW LET’S PUT A LOT OF THINGS TOGETHER …

slide-54
SLIDE 54

http://www.informationisbeautiful.net/visualizations/best-in-show-whats-the-top-data-dog/

slide-55
SLIDE 55

WHAT QUESTIONS DOES A VISUALIZATION ANSWER?

slide-56
SLIDE 56

Most Common Question Types

  • Compare Values:
  • “Bloodhounds weigh more than spaniels.”
  • “People who prefer dogs are more extroverted than those who

prefer cats.”

  • Identify Extrema:
  • “Greyhounds are the fastest breed of dog.”
  • Describe Correlation
  • “As a dog’s size increases, its lifespan decreases.”
slide-57
SLIDE 57

From Your Assignment: How can this be improved?

From http://www.statcrunch.com/5.0/viewreport.php?reportid=34511

slide-58
SLIDE 58

First, get real data.

Data on this and subsequent slides repurposed from: Gosling, Samuel D., Carson J. Sandy, and Jeff Potter. "Personalities of self-identified “dog people” and “cat people”." Anthrozoös 23.3 (2010): 213-222.

slide-59
SLIDE 59

Next, convert raw numbers to %’s.

Can this comparison be improved?

slide-60
SLIDE 60

Group the bar charts by gender.

The default colors and spacing on google charts make it hard to see a pattern.

slide-61
SLIDE 61

Sorting reveals the dominant categories.

What questions does this chart enable answering? What does it not?

slide-62
SLIDE 62

What questions does the stacked bar chart allow to be answered?

slide-63
SLIDE 63

Even if sorted, Stacked bar charts

  • nly allow comparison
  • f bottom variable and
  • verall count.
slide-64
SLIDE 64

Labels help a bit, but still “division by vision”

slide-65
SLIDE 65

Line graph in this case answers: which gender trends up or down for each response?

slide-66
SLIDE 66

But the colors don’t show the relationship between “both” and the

  • ther choices.
slide-67
SLIDE 67

These colors are more harmonious, and suggest relations among the data. Labels help make comparisons.

slide-68
SLIDE 68

Studio Tomorrow

  • Topic is Information Visualization
  • Bring your laptops!
  • Original rooms
  • Doing a research study
slide-69
SLIDE 69

Summary

  • Visualization for:
  • Solving problems
  • Understanding Data
  • Communicating and Telling Stories
  • Visualization Principles build on:
  • Graphic Design Principles
  • Cognitive Principles
  • Many great tools out there!
  • Highcharts (javascript)
  • Builtins for python, R, matlab, …
  • d3.js