CS171 Visualization Alexander Lex alex@seas.harvard.edu Tables - - PowerPoint PPT Presentation

▶
cs171 visualization
SMART_READER_LITE
LIVE PREVIEW

CS171 Visualization Alexander Lex alex@seas.harvard.edu Tables - - PowerPoint PPT Presentation

Jan 28, 2023 412 likes •1.28k views

CS171 Visualization Alexander Lex alex@seas.harvard.edu Tables [xkcd] This Week Reading: VAD, Chapters 6 & 7 Lecture 9: Tables Lecture 10: Graphs Sections: Designing your Visualization Homework 1 Review Score Distribution Average:

slide-1
SLIDE 1

CS171 Visualization

Alexander Lex alex@seas.harvard.edu

[xkcd]

Tables

slide-2
SLIDE 2

This Week

Reading: VAD, Chapters 6 & 7 Lecture 9: Tables Lecture 10: Graphs Sections: Designing your Visualization

slide-3
SLIDE 3

Homework 1 Review

slide-4
SLIDE 4

Score Distribution

Average: 7.8

slide-5
SLIDE 5

How Difficult?

slide-6
SLIDE 6

How Long?

N=81 Average: 33.85 Goal: 20

slide-7
SLIDE 7

Which part took longest?

slide-8
SLIDE 8

Office Hours Attendance

slide-9
SLIDE 9

Are Sections Helpful?

slide-10
SLIDE 10

Section Comments

“Pertinent and just enough momentum to get you thinking in the right direction. Section presenter delivered an enthusiastic and polished lesson.” “Topics covered were too easy! Homework problems were way harder.”

slide-11
SLIDE 11

Design Studio

slide-12
SLIDE 12

Design Studio Comments

“I felt it was a huge waste of time because I'm still struggling with d3 let alone attempting a creative design. Also, we didn't really do anything in class.” “DESIGN STUDIOS ARE HARD. Wow, it was cool to see our group trying to think of all of the complex things we could draw and just how quickly it all got overly complex. Might be nice to see an example DS after HW2 is submitted.” “A lot of fun!” “nice chance to interact with more people while working”

slide-13
SLIDE 13

General Difficulty

slide-14
SLIDE 14

General Comments

“The learning curve is quite steep for someone who does not do programming regularly” “I think there is a large discrepancy between the contents of lecture and the problem sets that we are given. Generally, I don't understand why most of the lectures focus on visualization theory and do not discuss actual coding itself.” “Theory might need to be a little bit harder. Some of the code, I think is too hard. Really freaking good course though.” “Please teach us some real code and design problems in lecture. It's a disaster for people who learn Javascript first time.”

slide-15
SLIDE 15

What you need to know

Theory Design Skills Coding Skills

Lecture Reading Discussion Design Lecture Design Studios Sections D3 reading Self-study Office hours

slide-16
SLIDE 16

Half-Life of Knowledge

How useful your knowledge is Time

Fundamentals & problem solving skills (University Education) Knowledge about a specific
 technology (Tutorials, etc.)

slide-17
SLIDE 17

Half-Life of Knowledge

How useful your knowledge is Time

Visualization Principles and Theory Your D3/JavaScript Ninja Skills HW 1 HW 2 HW 3 HW 4 Project

slide-18
SLIDE 18

Two Weeks Ago

Vis Guidelinies Tasks

slide-19
SLIDE 19

Can you spot the differences?

slide-20
SLIDE 20

Start Scales at 0?

  • A. Kriebel,

VizWiz

slide-21
SLIDE 21

Global Warming?

The Daily Mail, UK, Jan 2012

slide-22
SLIDE 22

Global Warming?

Mother Jones

slide-23
SLIDE 23

Global Warming - Frame the Data

Mother Jones

slide-24
SLIDE 24

Which is better?

[Bateman et al. 2010]

slide-25
SLIDE 25

Tasks

Why are we using Visualization?

slide-26
SLIDE 26

Domain and Abstract Tasks

Infinite numbers of domain tasks Can be broken down into simpler abstract tasks We know how to address the abstract tasks! Identify task - data combination: solutions probably exist

slide-27
SLIDE 27

High-level actions: Analyze

Consume discover vs present

classic split: explore vs explain

enjoy: casual, social Produce Annotate, record Derive: crucial design choice

Analyze Consume

Present Enjoy Discover

Produce

Annotate Record Derive

tag

slide-28
SLIDE 28

Example: Derive

slide-29
SLIDE 29

Actions: Mid-level search, low- level query

what does user know?

target, location

how much of the data matters?

  • ne, some, all

Search Query Identify Compare Summarize

Target known Target unknown Location known Location unknown

Lookup Locate Browse Explore

slide-30
SLIDE 30

Example Compare (& Derive)

slide-31
SLIDE 31

Why: Targets

Trends ALL DATA Outliers Features ATTRIBUTES One Many

Distribution Dependency Correlation Similarity Extremes

NETWORK DATA SPATIAL DATA Shape Topology

Paths

slide-32
SLIDE 32

How? A Preview

Encode Manipulate Facet Reduce Arrange Map Change Select Navigate Express Separate Order Align Use Juxtapose Partition Superimpose Filter Aggregate Embed from categorical and ordered attributes

slide-33
SLIDE 33

Design Critique

slide-34
SLIDE 34

CodeSwarm: http://goo.gl/9exsZH

http://vis.cs.ucdavis.edu/~ogawa/codeswarm/

slide-35
SLIDE 35

Tables & Multi- Dimensional Data

slide-36
SLIDE 36

Basic Plots for Basic Tasks

Trends ALL DATA Outliers Features ATTRIBUTES One Many

Distribution Dependency Correlation Similarity Extremes

Search Query Identify Compare Summarize

Target known Target unknown Location known Location unknown

Lookup Locate Browse Explore

slide-37
SLIDE 37

Comparisons

slide-38
SLIDE 38

Bar Chart

slide-39
SLIDE 39

Direction

Nicolas Rapp

slide-40
SLIDE 40

Baseline Problem

Flowing Data

slide-41
SLIDE 41

Baseline Problem

Flowing Data

slide-42
SLIDE 42

Different Baselines

https://eagereyes.org/basics/baselines

slide-43
SLIDE 43

Plot Change Instead

https://eagereyes.org/basics/baselines

slide-44
SLIDE 44

Trends Over Time

http://xkcd.com/605/

slide-45
SLIDE 45

Line Charts

matplotlib gallery

slide-46
SLIDE 46

Bars vs. Lines

Lines imply connections & 
 sampling from continuous data. Do not use for categorical 
 data.

Zacks 1999

slide-47
SLIDE 47

Don’t

Use bar charts to compare ratings of books…

“Visualizing The Wheel of Time: Reader Sentiment for an Epic Fantasy Series”, J. Siddle, Sept 2013

slide-48
SLIDE 48

Baseline Problem (again)

https://eagereyes.org/basics/baselines

True Baseline Clipped Baseline Plotting Change

slide-49
SLIDE 49

Linear vs. Logarithmic Scale

Linear Scale Log Scale

http://finance.yahoo.com/echarts?s=AAPL

Apple Stock Price

http://xkcd.com/1162/

slide-50
SLIDE 50

Aspect Ratios

Rule of Thumb: Banking to 45º (average line 
 slope: 45º)

eagereyes.org

slide-51
SLIDE 51

Don’t

slide-52
SLIDE 52

Correlations

slide-53
SLIDE 53

Scatterplots

slide-54
SLIDE 54

Trivariate Data

Do NOT use 3D scatterplots!

fare age class

slide-55
SLIDE 55

Trivariate Data

Map the third dimension to some other 
 visual attribute

slide-56
SLIDE 56

Overplotting

alpha = 1/100

slide-57
SLIDE 57

Trend Lines

slide-58
SLIDE 58

Compositions

slide-59
SLIDE 59

Pie Charts

http://xkcd.com/197/

slide-60
SLIDE 60

Pie vs. Bar Charts

slide-61
SLIDE 61

Donut Chart

The Economist Daily Chart

slide-62
SLIDE 62

Stacked Bar Chart

slide-63
SLIDE 63

Stacked Bar Chart

vs. VizWiz Blog

slide-64
SLIDE 64

Comparison of bar chart types

Small 
 Multiples Stacked bar chart Pie Chart Layered
 Bar
 Chart Grouped
 Bar 
 Chart

Streit & Gehlenborg, PoV, Nature Methods, 2014

slide-65
SLIDE 65

LineUp

Video at http://lineup.caleydo.org

slide-66
SLIDE 66

Stacked Area Chart

http://stackoverflow.com/questions/2225995/how-can-i-create-stacked-line-graph-with-matplotlib

slide-67
SLIDE 67

100% Stacked Area Chart

http://stackoverflow.com/questions/16875546/create-a-100-stacked-area-chart-with-matplotlib

slide-68
SLIDE 68

Stacked Area vs. Line Graphs

leancrew.com & Practically Efficient

slide-69
SLIDE 69

VizWiz, A. Kriebel

slide-70
SLIDE 70

Distributions

slide-71
SLIDE 71

Histogram

#bins hard to predict make interactive! rule of thumb: #bins = sqrt(n)

10 Bins 20 Bins age age # passengers # passengers

slide-72
SLIDE 72

Density Plots

http://web.stanford.edu/~mwaskom/software/seaborn/tutorial/plotting_distributions.html

slide-73
SLIDE 73

Heat Maps

binning of scatterplots

2D Density Plots

slide-74
SLIDE 74

Box(and Whisker) Plots

http://xkcd.com/539/

slide-75
SLIDE 75

Box Plots

aka Box-and-Whisker Plot Wikipedia

slide-76
SLIDE 76

Comparison

Streit & Gehlenborg, PoV, Nature Methods, 2014

slide-77
SLIDE 77

Violin Plot

= Box Plot + Probability Density Function http://web.stanford.edu/~mwaskom/software/seaborn/tutorial/plotting_distributions.html

slide-78
SLIDE 78

Showing Expected Values & Uncertainty

Error Bars Considered Harmful: Exploring Alternate Encodings for Mean and Error Michael Correll, and Michael Gleicher

slide-79
SLIDE 79

Table Lens

Rao & Card 1994

slide-80
SLIDE 80

Bertifier

Matrix/Table representation Authoring Interface

http://www.aviz.fr/bertifier Charles Perin, Pierre Dragicevic and Jean-Daniel Fekete

slide-81
SLIDE 81

Highdimensional Data

slide-82
SLIDE 82

What is High-dimensional Data?

Tabular data, containing

rows (items) columns (attributes or items) rows >> columns Age Gender Height Bob 25 M 181 Alice 22 F 185 Chris 19 M 175

slide-83
SLIDE 83

High-Dimensional Data Visualization

How many dimensions?

~50 – tractable with “just” vis ~1000 – need analytical methods

How many records?

~ 1000 – “just” vis is fine >> 10,000 – need analytical methods

Homogeneity

Same data type? Same scales?

Age Gender Height Bob 25 M 181 Alice 22 F 185 Chris 19 M 175 BPM 1 BPM 2 BPM 3 Bob 65 120 145 Alice 80 135 185 Chris 45 115 135

slide-84
SLIDE 84

Analytic Component

no / little analytics strong analytics 
 component

Scatterplot Matrices


[Bostock]

Parallel Coordinates


[Bostock]

Pixel-based visualizations /
 heat maps Multidimensional Scaling

[Doerk 2011] [Chuang 2012]

slide-85
SLIDE 85

More next time…