CS171 Visualization Hanspeter Pfister pfister@seas.harvard.edu - - PowerPoint PPT Presentation

▶
cs171 visualization
SMART_READER_LITE
LIVE PREVIEW

CS171 Visualization Hanspeter Pfister pfister@seas.harvard.edu - - PowerPoint PPT Presentation

Apr 06, 2023 367 likes •1.01k views

CS171 Visualization Hanspeter Pfister pfister@seas.harvard.edu Outline What? Why? Who? How? Outline What? Why? Who? How? vi su al i za tion 1. Formation of mental visual images 2. The act or

slide-1
SLIDE 1

CS171 Visualization

Hanspeter Pfister pfister@seas.harvard.edu

slide-2
SLIDE 2

Outline

  • What?
  • Why?
  • Who?
  • How?
slide-3
SLIDE 3

Outline

  • What?
  • Why?
  • Who?
  • How?
slide-4
SLIDE 4

vi·su·al·i·za·tion

  • 1. Formation of mental

visual images

  • 2. The act or process
  • f interpreting in

visual terms or of putting into visible form

The American Heritage Dictionary

slide-5
SLIDE 5

Visualization

www.wordle.net

To convey information through graphical representations of data

slide-6
SLIDE 6

Visualization Goals

  • Record information
  • Analyze data to support reasoning
  • Reveal patterns to support hypotheses
  • Communicate ideas to others
slide-7
SLIDE 7

Record

The Galileo Project, Rice University

Galileo Galilei, 1616 Leonardo Da Vinci, ca. 1500

The History of Visual Communication

William Curtis (1746-1799)

slide-8
SLIDE 8

Record

  • E. J. Muybridge, 1878
slide-9
SLIDE 9

Record

Milestones Project http://www.math.yorku.ca/SCS/Gallery/milestone/

Anaximander of Miletus, c. 550 BC Konya town map, Turkey, c. 6200 BC

slide-10
SLIDE 10

Analyze

Halley’s Wind Map, 1686 Planetary Movement Diagram, c. 950

slide-11
SLIDE 11

Analyze

wikipedia.org

  • W. Playfair, 1786
  • W. Playfair, 1801
slide-12
SLIDE 12

Reveal Patterns

  • E. Tufte,

Visual Explanations, 1997

John Snow, 1854

slide-13
SLIDE 13

Communicate

  • E. Tufte, Writings, Artworks, News

C.J. Minard, 1869

slide-14
SLIDE 14

Communicate

London Subway Map, 1927

slide-15
SLIDE 15

Communicate

Harry Beck, 1933

slide-16
SLIDE 16

New York Times, 2010

slide-17
SLIDE 17

Interact

Ivan Sutherland, Sketchpad, 1963 Doug Engelbart, 1968 Xerox Alto, 1973 iPhone, 2007 iPad, 2010

slide-18
SLIDE 18

Analyze

  • M. Wattenberg, 2005
slide-19
SLIDE 19

Reveal Patterns

NY Times

slide-20
SLIDE 20

Communicate

Hans Rosling, TED 2006

slide-21
SLIDE 21

Tell Stories

New York Times

slide-22
SLIDE 22

Outline

  • What?
  • Why?
  • Who?
  • How?
slide-23
SLIDE 23

Big Data

slide-24
SLIDE 24

“The Industrial Revolution of Data”

Joe Hellerstein, UC Berkeley

slide-25
SLIDE 25

Matthew Ericson, NY Times

slide-26
SLIDE 26

Limits of Cognition

Daniel J. Simons and Daniel T. Levin, Failure to detect changes to people during a real world interaction, 1998

slide-27
SLIDE 27

Notice anything changing? Get ready!

slide-28
SLIDE 28

Notice Anything Changing?

demo from: http://visionlab.harvard.edu/Members/George/Demos.html

slide-29
SLIDE 29

Notice Anything Changing?

demo from: http://visionlab.harvard.edu/Members/George/Demos.html

slide-30
SLIDE 30

Notice Anything Changing?

demo from: http://visionlab.harvard.edu/Members/George/Demos.html

slide-31
SLIDE 31

Limited Cognition

Males Males Females Females Income Group 0-$24,999 $25,000+ Under 65 65 or Over Under 65 65 or Over 250 200 375 550 430 300 700 500

Which gender or income level group shows different effects of age on triglyceride levels?

Slide after Stephen Kosslyn, Clear and to the Point

slide-32
SLIDE 32

Visual Queries

175 350 525 700 Under 65 65 or Over

Triglyceride Level 0-$24,999 $25,000+ 0-$24,999 $25,000+

Males Females

Slide after Stephen Kosslyn, Clear and to the Point

slide-33
SLIDE 33

The History of Visual Communication

Donald Norman

“It is things that make us smart.”

slide-34
SLIDE 34

“It is things that make us smart.”

Donald Norman

The History of Visual Communication The History of Visual Communication

slide-35
SLIDE 35

Idea Maps, by Jamie Nast Visual Thinking Collection, Dave Grey

Donald Norman

“It is things that make us smart.”

slide-36
SLIDE 36

Visualization

  • Uses perception to free up cognition
  • Serves as an external aid to augment working

memory

  • Boosts our cognitive abilities
slide-37
SLIDE 37

“Visualization is really about external cognition, that is, how resources outside the mind can be used to boost the cognitive capabilities of the mind.” Stuart Card

slide-38
SLIDE 38

Outline

  • What?
  • Why?
  • Who?
  • How?
slide-39
SLIDE 39

Hanspeter Pfister

An Wang

slide-40
SLIDE 40

Visual Computing Group

  • Dr. Bjoern Andres
  • Dr. Nicolas Bonneel
  • Dr. Ray Jones

Dr. Verena Kaynig

  • Dr. Seymour K.-B.
  • Dr. Dequin Sun

Moritz Baecher Gaurav Bharaj Michelle Borkin Chirantan Ekbote Steffen Kirchhoff Amanda Peters Fangyang Shen

slide-41
SLIDE 41

Face Modeling & Animation Medical Visualization Genomics Visualization Digital Pathology 3D Fabrication Image & Video Analysis

MGH Beth Israel Broad Inst. / HMS / Novartis IQSS Disney Research

source: Human destination: Lizard c h r 1 chr2 chr3 chr4 chr5 chr6 chr7 chr8 chr9 c h r 1 c h r 1 1 chr12 chr13 chr14 c h r 1 5 chr16 chr17 chr18 chr19 chr20 chr21 chr22 chrX chrY chr3 chr1 chr2 chr3 chr4 chr5 chr6 chra chrb c h r c c h r d chrf chrg chrh saturation line
  • +
10Mb chr3 go to: chr3 chr3 237164 146709664 386455 146850969
  • rientation:
match inversion invert
  • ut
in

Disney Research

slide-42
SLIDE 42

TFs

  • Alexander Lex, Head TF
  • Nicolas Bonneel
  • Sofia Hou
  • Todd Kawakita
  • Jonathan Levin
  • Jacob Pritt
  • Lila Strominger
  • Megan Quintero
  • Azalea

Vo

  • Blake Walsh
  • Chelsea

Yeh

slide-43
SLIDE 43

About You

slide-44
SLIDE 44

Outline

  • What?
  • Why?
  • Who?
  • How?
slide-45
SLIDE 45

CS 171 Goals

  • Provide a framework to discuss, critique, and

design visualizations

  • Learn basic design and perceptual principles
  • Explore different visualization methods
  • Implement interactive web-based visualizations
slide-46
SLIDE 46

Act I: Foundations

  • Design Principles
  • Process & Data
  • Perception & Color
  • Cognition
  • Interaction
slide-47
SLIDE 47

Act II: Methods

  • Web Scraping w/ Python
  • D3 & Javascript
  • Maps
  • Trees & Networks
  • High-Dimensional Data
slide-48
SLIDE 48

Act III: Applications

  • Jock Mackinlay - Tableau
  • Alberto Cairo -

Visualization and Storytelling

  • Alexander Lex -

Visualization in Biology

  • Michelle Borking - Scientific

Visualization

  • Ben Fry -

Visualization & The Arts

  • Fernanda

Viegas & Martin Wattenberg - Social Visualization

slide-49
SLIDE 49

Projects

Will Sun & Sachin Patel, 2012

slide-50
SLIDE 50

Earthquakes in the ring of fire, Blake Walsh, Gabriel Trevino, Antony Bett Harvard Course Analytics, Sneha Khullar, Chelsea Yeh, Chi Zeng Soundscapes, Varun Bansal, Cecillia Cao, Sofia Hou Predicting Life Outcomes, Todd Kawakita, Lila Strominger, Samuel Singer

CS171, 2012

slide-51
SLIDE 51

Projects

  • Three monthlong projects
  • Teams of 2 students (exceptions possible)
  • Process books, web sites, and screencasts
  • Python, D3 / Javascript (exceptions possible)
  • Best project prizes!
slide-52
SLIDE 52

Projects

  • 1. Web scraping with Python and visualization

applications (Tableau, ManyEyes, R, etc.)

  • 2. Web-based visualization with D3
  • 3. Storytelling with visualization (possibly a

refinement of project 2)

slide-53
SLIDE 53

Labs

  • Practical aspects of design & implementation
  • Fridays, 10-11:30 am, MD G115

Sketching Lab Nathan Cook

slide-54
SLIDE 54

xkcd

Programming

D3 Python

slide-55
SLIDE 55

Homework

  • Assignments in support of your projects
  • Weekly readings
slide-56
SLIDE 56

Homework

  • Individual part - due Thursdays
  • Optional: Group reflection - due Mondays
  • Work in groups to improve your HW
  • Must write a self reflection about

improvements

  • Grade will take both parts into account
slide-57
SLIDE 57

Piazza

  • Announcements posted here
  • Questions, feedback, discussions, etc.
  • Help each other!
slide-58
SLIDE 58

Participation

  • In-class and online participation
  • Comments on readings in Piazza
  • Lecture and lab attendance
  • Guest lecture attendance (mandatory)
slide-59
SLIDE 59

Grades

  • 60% Projects
  • 30% Homework
  • 10% Participation
  • Holistic grading scheme
slide-60
SLIDE 60

Policies

  • Hard deadlines for projects
  • Cannot submit HW later than 2 days
  • One point deduction per day afterwards
  • 6 late days for HW (no questions asked)
  • No group reflection if you take late days
slide-61
SLIDE 61

Collaboration Policy

  • Individual homework solutions - alone
  • Group reflection solution - in collaboration
  • Project I - alone; Projects 2 & 3 - team effort
  • Acknowledge all help and code you used
slide-62
SLIDE 62

Due This Week

  • HW0, including course survey (by Thursday)
  • Readings week 1: A. Cairo and T. Munzner
slide-63
SLIDE 63