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

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 process of interpreting in visual terms or of putting into visible form The American Heritage Dictionary

Visualization To convey information through graphical representations of data www.wordle.net

Visualization Goals • Record information • Analyze data to support reasoning • Reveal patterns to support hypotheses • Communicate ideas to others

Record Leonardo Da Vinci, ca. 1500 William Curtis (1746-1799) Galileo Galilei, 1616 The History of Visual Communication The Galileo Project, Rice University

Record E. J. Muybridge, 1878

Record Konya town map, Turkey, c. 6200 BC Anaximander of Miletus, c. 550 BC Milestones Project http://www.math.yorku.ca/SCS/Gallery/milestone/

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

Analyze W. Playfair, 1801 W. Playfair, 1786 wikipedia.org

Reveal Patterns John Snow, 1854 E. Tufte, Visual Explanations, 1997

Communicate C.J. Minard, 1869 E. Tufte, Writings, Artworks, News

Communicate London Subway Map, 1927

Communicate Harry Beck, 1933

New York Times, 2010

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

Analyze M. Wattenberg, 2005

Reveal Patterns NY Times

Communicate Hans Rosling, TED 2006

Tell Stories New York Times

Outline • What? • Why? • Who? • How?

Big Data

“The Industrial Revolution of Data” Joe Hellerstein, UC Berkeley

Matthew Ericson, NY Times

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

Notice anything changing? Get ready!

Notice Anything Changing? demo from: http://visionlab.harvard.edu/Members/George/Demos.html

Notice Anything Changing? demo from: http://visionlab.harvard.edu/Members/George/Demos.html

Notice Anything Changing? demo from: http://visionlab.harvard.edu/Members/George/Demos.html

Limited Cognition Which gender or income level group shows different effects of age on triglyceride levels? Males Males Females Females Under 65 65 or Over Under 65 65 or Over Income Group 0-$24,999 250 200 375 550 430 300 700 500 $25,000+ Slide after Stephen Kosslyn, Clear and to the Point

Visual Queries Triglyceride Level 700 525 350 175 0 Under 65 65 or Over Males Females 0-$24,999 $25,000+ 0-$24,999 $25,000+ Slide after Stephen Kosslyn, Clear and to the Point

“It is things that make us smart.” Donald Norman The History of Visual Communication

“It is things that make us smart.” Donald Norman The History of The History of Visual Communication Visual Communication

“It is things that make us smart.” Donald Norman Visual Thinking Collection, Dave Grey Idea Maps, by Jamie Nast

Visualization • Uses perception to free up cognition • Serves as an external aid to augment working memory • Boosts our cognitive abilities

“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

Outline • What? • Why? • Who? • How?

Hanspeter Pfister An Wang

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

MGH Broad Inst. / HMS / Novartis Disney Research chr3 source: Human chrY destination: Lizard c h r chrX 1 chr3 chr3 chr22 237164 146709664 chr21 10Mb chr2 chr20 chrh chrf chrg c c h chrb h r chr19 chra r d c chr3 chr6 chr18 chr3 chr17 chr5 chr16 chr1 chr4 c h r 1 5 chr14 chr4 chr5 386455 146850969 chr13 out in invert chr2 chr6 chr12 chr3 c h r chr7 1 1 line orientation: saturation c h r 1 chr8 match 0 - + chr9 inversion go to: Face Modeling Medical Genomics & Animation Visualization Visualization Digital Image & Video 3D Fabrication Pathology Analysis Disney Research IQSS Beth Israel

TFs • Alexander Lex, Head TF • Nicolas Bonneel • Lila Strominger • Sofia Hou • Megan Quintero • Todd Kawakita • Azalea Vo • Jonathan Levin • Blake Walsh • Jacob Pritt • Chelsea Yeh

About You

Outline • What? • Why? • Who? • How?

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

Act I: Foundations • Design Principles • Process & Data • Perception & Color • Cognition • Interaction

Act II: Methods • Web Scraping w/ Python • D3 & Javascript • Maps • Trees & Networks • High-Dimensional Data

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

Projects Will Sun & Sachin Patel, 2012

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

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

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)

Labs • Practical aspects of design & implementation • Fridays, 10-11:30 am, MD G115 Sketching Lab Nathan Cook

Programming Python D3 xkcd

Homework • Assignments in support of your projects • Weekly readings

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

Piazza • Announcements posted here • Questions, feedback, discussions, etc. • Help each other!

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

Grades • 60% Projects • 30% Homework • 10% Participation • Holistic grading scheme

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

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

Due This Week • HW0, including course survey (by Thursday) • Readings week 1: A. Cairo and T. Munzner