H517 Visualization Design, Analysis, & Evaluation Week 3: - - PowerPoint PPT Presentation

▶
h517 visualization design analysis evaluation
SMART_READER_LITE
LIVE PREVIEW

H517 Visualization Design, Analysis, & Evaluation Week 3: - - PowerPoint PPT Presentation

Jun 26, 2023 580 likes •1.3k views

H517 Visualization Design, Analysis, & Evaluation Week 3: Fundamentals of Visual Perception Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI Last week The D3 stack D3 JavaScript HTML SVG Scalable Hypertext

slide-1
SLIDE 1

H517 Visualization Design, Analysis, & Evaluation

Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI

Week 3: Fundamentals of Visual Perception

slide-2
SLIDE 2

Last week…

slide-3
SLIDE 3

The D3 stack

HTML SVG

Hypertext markup language Scalable Vector graphics

JavaScript D3

slide-4
SLIDE 4

This week

Fundamentals of Visual Percep5on and Cogni5on

slide-5
SLIDE 5

Percep-on Iden5fica5on and interpreta5on of physical sensory input Cogni-on The processing of informa5on and applying knowledge Recording and retrieving informa5on from memory Percep-on: Hearing someone speak Cogni-on: Understanding words, remembering informa5on

Perception vs. Cognition

Based on a slide by Alex Lex

slide-6
SLIDE 6

Perception vs. Cognition

  • Eye, op5cal nerve, primary visual cortex
  • Basic visual features (e.g., edges,
  • rienta5on, shapes)
  • Unconscious

Perception

  • Object recogni5on
  • Rela5onship between objects
  • Remembering shapes or

paQerns

  • Learning new shapes
  • Problem solving
  • Deliberate
  • Requires a3en-on

Cognition

Based on a slide by Alex Lex

slide-7
SLIDE 7

The boundary between perception and cognition is hard to delineate

Perception -> cognition Cognition -> perception

slide-8
SLIDE 8
slide-9
SLIDE 9

Faces in Things

slide-10
SLIDE 10

Take home point

What we see is influenced by visual features

  • ur brain perceive (boQom-up) and by what

we know beforehand (top-down)

slide-11
SLIDE 11

The human visual system

Illustration from Wikipedia

slide-12
SLIDE 12

The human visual system

https://www.researchgate.net/figure/Processing-steps-of-the-visual-stream-a-The-cellular-organization-of-the-retina-from_fig1_233971662

slide-13
SLIDE 13

The human eye

http://www.fortworthastro.com/images/eye_xsection_01.jpg

light electricity

slide-14
SLIDE 14

ganglion cells rods

~120 million

highly-sensi5ve to light not sensi5ve to color good for low-light vision

cones

~5-6 million sensi5ve to color

sharp vision

require good ligh5ng

“Structure of the Mammalian Retina”, Ramon y Cajal Based on a slide by Alex Lex

slide-15
SLIDE 15

Wandell, “Foundations of Vision”

Electron microscopy of photoreceptors

slide-16
SLIDE 16

Cones types

HyperPhysics, Georgia State University

slide-17
SLIDE 17

Wikipedia

Cone distribution by pigment

normal vision color blindness (red deficiency)

slide-18
SLIDE 18

Density of rods/cones

  • E. Goldstein, “Sensation and Perception”

Adapted from Lindsay & Norman, 1977 Via Miriah Meyer

slide-19
SLIDE 19
  • C. Ware

Visual Thinking for Design

slide-20
SLIDE 20

Vision

Human vision does not work like a camera The eye makes a series of fixa-ons and saccades fixa-on: maintaining gaze over a single loca5on (200-600ms) saccade: movement between loca5ons 20-100ms

Based on a slide by Alex Lex

slide-21
SLIDE 21

Retinal Ganglion Cells

Bear, Connors, Paradiso, “Neuroscience” Via Miriah Meyer

slide-22
SLIDE 22

Retinal Ganglion Cells

Wikipedia Via Miriah Meyer

slide-23
SLIDE 23

low activity from center and surround activity increased (or decreased) at edge

Miriah Meyer

slide-24
SLIDE 24
slide-25
SLIDE 25

Annie Prud’homme-Généreux Via Miriah Meyer

slide-26
SLIDE 26

Via Miriah Meyer

slide-27
SLIDE 27

Via Miriah Meyer

slide-28
SLIDE 28
slide-29
SLIDE 29

Cornsweet illusion

slide-30
SLIDE 30

Visual perception is relative

slide-31
SLIDE 31

Visual perception is relative

Differences in color are rela5ve

slide-32
SLIDE 32

Visual perception is relative

Differences in contrast is rela5ve

slide-33
SLIDE 33

Visual perception is relative

Color interac5on

Wong 2010 Via Miriah Meyer

slide-34
SLIDE 34

Visual perception is relative

Sizes are rela5ve (Ames room)

slide-35
SLIDE 35

Take home point

Our visual system see differences, not absolute values.

Based on a slide by Miriah Meyer

slide-36
SLIDE 36

POPOUT

slide-37
SLIDE 37

which side has the outlier?

slide-38
SLIDE 38

which side has the outlier?

  • C. Healey, 2007
slide-39
SLIDE 39

which side has the outlier?

  • C. Healey, 2007
slide-40
SLIDE 40

which side has the outlier?

  • C. Healey, 2007

use a single popout channel at a time (e.g., either difference in color or shape alone) to draw attention

slide-41
SLIDE 41

Popout channels

no popout

  • C. Ware

“Information Visualization”

slide-42
SLIDE 42

Semantic Depth of Field

  • C. Ware

“Information Visualization”

slide-43
SLIDE 43
  • R. Kosara

Semantic Depth of Field

slide-44
SLIDE 44

Popout / pre-attentive processing

  • Very fast at grabbing aQen5on (less than 200 milli

seconds)

  • Popout elements have to be salient compared to

surrounding

  • Elements that are a conjunc-on of mul5ple channels
  • ben do not pop out
slide-45
SLIDE 45

How does pre-a3en-ve processing / pop outs work?

We don’t know for sure, but there are some theories:

https://www.csc.ncsu.edu/faculty/healey/PP/ index.html#Preattentive_Theory

slide-46
SLIDE 46

Take home point

We can easily see objects that are different in color and shape, or that are in mo5on

Based on slides by Miriah Meyer & Alex Lex

Use color and shape sparingly to make the important informa5on pop out Visual features must be carefully designed. Conjunc5ons must be avoided, if popout is desired

slide-47
SLIDE 47

Gestalt grouping principles

slide-48
SLIDE 48

Gestalt grouping principles

“The whole is other than the sum of its parts”

Our brain has innate capacity to see paQerns that transcend the visual s5muli the produce them

gestalt: form in German

slide-49
SLIDE 49

proximity

Andy Rutledge, “Gestalt Principles of Perception”

slide-50
SLIDE 50

proximity

Alex Lex

slide-51
SLIDE 51

proximity

  • B. Wong, “Gestalt Principles, I”
slide-52
SLIDE 52

similarity

  • B. Wong, “Gestalt Principles, I”
slide-53
SLIDE 53

similarity

Andy Rutledge, “Gestalt Principles of Perception”

slide-54
SLIDE 54

connectedness

Ware, “Information Visualization”

slide-55
SLIDE 55

link surface

  • utline

enclosure

Alex Lex

slide-56
SLIDE 56

A li3le experiment…

Based on a slide by Alex Lex

How many groups do you see?

proximity color similarity size similarity shape similarity

slide-57
SLIDE 57

A li3le experiment…

How many groups do you see?

proximity color similarity size similarity shape similarity

Based on a slide by Alex Lex

slide-58
SLIDE 58

A li3le experiment…

How many groups do you see?

proximity color similarity size similarity shape similarity

Based on a slide by Alex Lex

slide-59
SLIDE 59

grouping

  • B. Wong, “Gestalt Principles, I”
slide-60
SLIDE 60

grouping

slide-61
SLIDE 61

grouping

Jorge Camoes Via Miriah Meyer

slide-62
SLIDE 62

grouping - common fate

slide-63
SLIDE 63

closure

slide-64
SLIDE 64

closure

slide-65
SLIDE 65

figure / background

Mariah Meyer

slide-66
SLIDE 66

Gestalt principles

similarity: objects that look like each other (in size, color, or shape) are related proximity: objects that are visually close to each

  • ther are related

connections: objects that are visually connected are related closure: we see incomplete shapes as complete figure / ground: elements are perceived as either figures or background common fate: elements with the same moving direc5on are perceived as a unit

Mariah Meyer

slide-67
SLIDE 67

next week…

color perception

slide-68
SLIDE 68
slide-69
SLIDE 69

D3: Data-Driven Documents

slide-70
SLIDE 70

Exercise 3:

Repeat the previous exercise. Instead of using pure JavaScript, use D3 selec5ons

selection and data binding selection and data binding