N328 Visualizing Information Week 4: Marks & Channels Khairi - - PowerPoint PPT Presentation

▶
n328 visualizing information
SMART_READER_LITE
LIVE PREVIEW

N328 Visualizing Information Week 4: Marks & Channels Khairi - - PowerPoint PPT Presentation

Feb 20, 2024 387 likes •855 views

N328 Visualizing Information Week 4: Marks & Channels Khairi Reda | redak@iu.edu School of Informa5cs & Compu5ng, IUPUI Last week which side has the outlier? C. Healey, 2007 Cones, Rods, Color vision HyperPhysics, Georgia State

slide-1
SLIDE 1

N328 Visualizing Information

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

Week 4: Marks & Channels

slide-2
SLIDE 2

Last week…

slide-3
SLIDE 3

which side has the outlier?

  • C. Healey, 2007
slide-4
SLIDE 4

Wandell, “Foundations of Vision”

Cones, Rods, Color vision

HyperPhysics, Georgia State University

slide-5
SLIDE 5

Wong 2010 Via Miriah Meyer

Simultaneous contrast

slide-6
SLIDE 6

Simultaneous contrast

Via Colin Ware

slide-7
SLIDE 7

POPOUT

slide-8
SLIDE 8

Our visual system sees differences, not absolute values We can easily see objects that are different in color and shape, or that are in mo5on (popouts) Use color and shape sparingly to make the important informa5on pop out

Last week…

slide-9
SLIDE 9

This week

  • Marks and channels
  • Perceptual accuracy of channels
slide-10
SLIDE 10

Via Miriah Meyer

Tables

slide-11
SLIDE 11

Attribute/Variable Types

✦Categorical (Nominal, Qualita7ve)

A finite set of categories No implicit ordering between categories

✦Ordered

  • Ordinal

Implicit ordering between categories/levels, but no clear magnitude difference. Can compare and determine greater/less than

  • Quan7ta7ve

Meaningful magnitude Can do arithme5c

slide-12
SLIDE 12

Marks & Channels

The visualization alphabet

slide-13
SLIDE 13

How can we represent two numbers: 5, 10?

slide-14
SLIDE 14

Marks

Graphical elements in an image

points (0D) lines (1D) areas (2D) volume clouds (3D)

slide-15
SLIDE 15

Channels (aka Visual Variables)

Parameters that control the appearance of marks based on aCributes

slide-16
SLIDE 16

Name the mark & channel

Mark: Bar Channels: Length mapped to quan5ta5ve aXribute Posi+on mapped to categorical aXribute Mark: Point Channels: Posi+on (x,y) mapped 2 quan5ta5ve aXributes +Hue channel mapped to 1 categorical aXribute +Size channel mapped to 1 quan5ta5ve aXribute

Alex Lex

slide-17
SLIDE 17

What’s wrong here?

The magnitude of a channel (length in this case) should be propor5onal to the aXribute (snowfall)

Alex Lex

Visual Integrity

slide-18
SLIDE 18

Channel Types

iden7ty (what or where) magnitude (how much)

Tamara Munzner Via Miriah Meyer

slide-19
SLIDE 19

iden7ty channels magnitude channels

Tamara Munzner Via Miriah Meyer

good for ordered attributes good for categorical attributes

slide-20
SLIDE 20

Tamara Munzner Via Miriah Meyer

slide-21
SLIDE 21

How do we know the rela5ve accuracy of the visual channels?

slide-22
SLIDE 22

Let’s play a game…

slide-23
SLIDE 23

How much longer?

2x

Alex Lex

slide-24
SLIDE 24

How much longer?

4x

Alex Lex

slide-25
SLIDE 25

How much tilt?

4x

Alex Lex

slide-26
SLIDE 26

How much larger (area)?

5x

Alex Lex

slide-27
SLIDE 27

How much larger (area)?

11x

slide-28
SLIDE 28

How much larger (area)?

11x

slide-29
SLIDE 29

How much darker?

3x

Alex Lex

slide-30
SLIDE 30

S = In

Steven’s Psychological power law

Psychophysics

perceived sensation physical intensity

slide-31
SLIDE 31

Cleveland & McGill, 1984

slide-32
SLIDE 32

https://tinyurl.com/ybjznp92

Name the channel

What are the attributes in this visualization?

What visual channel is each attribute mapped to?

slide-33
SLIDE 33

Discriminability

can channel differences be discerned?

Via Miriah Meyer

slide-34
SLIDE 34

Position

Offers very good discriminability

posi5on

slide-35
SLIDE 35

Position

But this doesn’t extend to 3D! Perspec5ve distor5on Occlusions

slide-36
SLIDE 36

Factors affecting accuracy of Length/Position judgement

unaligned aligned stacked bar chart (unaligned)

slide-37
SLIDE 37
slide-38
SLIDE 38

D3: Data-Driven Documents

slide-39
SLIDE 39

The D3 stack

HTML SVG

Hypertext markup language Scalable Vector graphics

JavaScript D3

slide-40
SLIDE 40

HTML example

slide-41
SLIDE 41

SVG

X Y (200,100)

slide-42
SLIDE 42

SVG

slide-43
SLIDE 43

SVG: a bar chart

slide-44
SLIDE 44

Chrome Web Server

https://tinyurl.com/y9k9hc44

1) Download extension from: 2) Create folder (e.g., on Desktop) 3) Choose folder from extension 4) Open URL

slide-45
SLIDE 45

Exercise:

Create a bar chart in SVG to visualize the following dataset:

Use the following SVG elements:

<rect x=“” y=“” width=“” height=“”/> <line x1=“” x2=“” y1=“” y2=“” /> <text x=“” y=“”>Label here</text>

cats 45 dogs 21 iguanas 102

Pets animals from a neighborhood survey: