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

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 University Wandell, “Foundations of Vision”

Simultaneous contrast Wong 2010 Via Miriah Meyer

Simultaneous contrast Via Colin Ware

POPOUT

Last week… 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

This week • Marks and channels • Perceptual accuracy of channels

Tables Via Miriah Meyer

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

Marks & Channels The visualization alphabet

How can we represent two numbers: 5, 10?

Marks Graphical elements in an image points (0D) lines (1D) areas (2D) volume clouds (3D)

Channels (aka Visual Variables) Parameters that control the appearance of marks based on aCributes

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

What’s wrong here? Visual Integrity The magnitude of a channel (length in this case) should be propor5onal to the aXribute (snowfall) Alex Lex

Channel Types iden7ty (what or where) magnitude (how much) Tamara Munzner Via Miriah Meyer

magnitude channels iden7ty channels good for ordered attributes good for categorical attributes Tamara Munzner Via Miriah Meyer

Tamara Munzner Via Miriah Meyer

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

Let’s play a game…

How much longer? 2x Alex Lex

How much longer? 4x Alex Lex

How much tilt? 4x Alex Lex

How much larger (area)? 5x Alex Lex

How much larger (area)? 11x

How much larger (area)? 11x

How much darker? 3x Alex Lex

Psychophysics Steven’s Psychological power law perceived sensation S = I n physical intensity

Cleveland & McGill, 1984

https://tinyurl.com/ybjznp92 Name the channel What are the attributes in this visualization? What visual channel is each attribute mapped to?

Discriminability can channel differences be discerned? Via Miriah Meyer

Position Offers very good discriminability posi5on

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

Factors affecting accuracy of Length/Position judgement aligned stacked bar chart unaligned (unaligned)

D3: Data-Driven Documents

The D3 stack D3 JavaScript HTML SVG Scalable Hypertext markup language Vector graphics

HTML example

SVG X (200,100) Y

SVG

SVG: a bar chart

Chrome Web Server 1) Download extension from: 2) Create folder (e.g., on Desktop) https://tinyurl.com/y9k9hc44 3) Choose folder from extension 4) Open URL

Exercise: Create a bar chart in SVG to visualize the following dataset: Pets animals from a neighborhood survey: cats 45 dogs 21 iguanas 102 Use the following SVG elements: <rect x=“” y=“” width=“” height=“”/> <line x1=“” x2=“” y1=“” y2=“” /> <text x=“” y=“”>Label here</text>