SeeingAndThinking

Data Visualization Nikhil Srivastava, 2015

Nikhil Srivastava

Moringa School

Summer 2015


• What is Data Visualization?

• Thinking and Seeing

• From Data to Graphics

• Highcharts & Javascript

• Class Project

• [Next Steps]

introduction

foundation & theory

building blocks

construction

Last Time


• Which is the most populous

city in the list?

• Which county in the list has

the most cities?

• Which county in the list has

the largest average city?

Data Visualization is:

• Useful

– Answers user questions

– Reduces user workload

(by design, not by default)



• Important

– Understand structure and patterns

– Resolve ambiguity

– Locate outliers



• Important

– Design decisions affect interpretation



• Powerful

– Communicate, teach, inspire


Why is DV relevant?

• In one second …

• Open data

• Open technologies

• Growing popularity and widespread use

http://onesecond.designly.com/


Focus Extra

purpose communicate explore, analyze

data numerical,categorical

text, maps, graphs, networks

feature representation animation,Interactivity

Course Scope


Homework #2: Find a Visualization

• What is this data visualization trying to

communicate?

• What is the underlying data?

• How effective do you find it? How clear is

the presentation?


• What is Data Visualization?

• Thinking and Seeing

• From Data to Graphics

• Highcharts & Javascript

• Class Project

• [Next Steps]

introduction

foundation & theory

building blocks

construction


Cognition

• Recall definitions of Data Visualization:

– “visual representations of data to amplify cognition”

– “the purpose of visualization is insight, not pictures”

• What does it mean to “amplify cognition”? What

do we mean by “insight”?

• How does the brain process visual information?


Bandwidth of Our Senses

Why Vision?


Bandwidth of Our Senses

Why Vision?

“I see”

“Show me”

“kuona”?


The Hardware


The Software• High-level concepts: objects,

symbols

• Involves working memory

• Slower, serial, conscious

• Sensory input

• Low-level features: orientation,

shape, color, movement

• Rapid, parallel, automatic

Visual Perception

“Bottom-up”


The Software• High-level concepts: objects,

symbols

• Involves working memory

• Slow, sequential, conscious

• Sensory input

• Low-level features: orientation,

shape, color, movement

• Rapid, parallel, automatic

Visual Perception

“Bottom-up”

“Top-down”


Task: Counting

How many 3’s?

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686


Task: Counting

How many 3’s?

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686


Task: Counting

Slow, sequential, conscious

Rapid, parallel, automatic

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686

1281768756138976546984506985604982826762 9809858458224509856458945098450980943585 9091030209905959595772564675050678904567 8845789809821677654876364908560912949686


Task: (Distractor) Search

Which side has the red circle?


Task: Search

Which side has the red circle?


Task: Search

Slow, sequential, conscious



Task: Boundary Detection


Task: Unique Search

Find the unique color


Task: Unique SearchSlow, sequential, conscious


(7)

(5)

(3)


Lessons for Visualization

• Use “pre-attentive” attributes when possible

– Color, shape, orientation (depth, motion)

– Faster, higher bandwidth

• Caveats

– Working memory: magical number 7 (+/- 2)

– Be careful mixing attributes


Example: Attribute Selection


Example: Mixed Attributes


Example: Too Many Attributes


Eye !=

Camera

The Software: Part 2


Eye != Camera

• Fovea: limited aperture

• Rods and cones: limited color


Eye != Camera

• Saccades: limited time and location


Eye != Camera

• Limited in many ways:

– Aperture, Color, Time, Location

• Evolutionary basis: continuity

• Information density

• So what?


Change Blindness


Eye != Camera: Relative

A

B

http://www.purveslab.net/seeforyourself/index.html


Eye != Camera: Relative


Eye != Camera: Knowledge


Lessons for Visualization

• Human vision has limits and constraints

• “What we see” depends on “what we

know”

• Attention and experience matters


Example: Minimize Visual Movement


Summary

• Human vision is constrained and imperfect

• Use “pre-attentive” attributes carefully

• Minimize unnecessary visual movement

• Layout and scope as important as

measurement


Questions?


Homework #3 Review

• Hello, Chart

• Highcharts Examples, Documentation, API

• JSFiddle, Developer Tools


Homework #4

• (Catch up: Homework #3)

• Email proposal for final project

– Data source

– Purpose

– User tasks/questions addressed

– Team member (if needed/helpful)

• Bring laptop next time!

SeeingAndThinking

Education

Transcript of SeeingAndThinking