Information Visualization - Start page at · · 2002-12-08Human-Computer Interaction Fall 2002 8 ... • What is information visualization? • What do we need to do? • Guidelines

8-Dec-02SMD157, Information

Visualization 1

L

Information Visualization

SMD157Human-Computer Interaction

Fall 2002


Visualization 2

L Overview

• What is information visualization?• What do we need to do? • Guidelines for design of information seeking

applications• The human visual system• Perception plus the Gestalt principles• Coding of data


Visualization 3

L

What is Information Visualization?


Visualization 4

L Information versus Scientific Visualization


Visualization 5

L Why Information Visualization?

• Comprehension• Context• Interaction• Patterns


Visualization 6

L

What Do We Need to Do

Shneiderman’s Abstract Tasks


Visualization 7

L What do we need to do?

• Overview• Zoom• Filter• Details-on-

demand• Relate• History• Extract


Visualization 8





Visualization 9





Visualization 10





Visualization 11





Visualization 12





Visualization 13





Visualization 14

L

Guidelines for Designing Information Seeking Applications


Visualization 15

L Guidelines

• Visualization is not always the best solution.• User tasks must be supported.• Three dimensions are not necessarily better

than two.• Navigation and zooming do not replace filtering.• The graphic method should depend on the data.• Multiple views should be coordinated.• Test your designs with users.


Visualization 16

L Visualization Is Not Always the Best Solution

• Dedicated procedures are:- Faster- Less error prone

• Use visualization when:- User goals are less well-defined.- Good algorithms are lacking- The user needs to explore the data


Visualization 17

L User Tasks Must Be Supported

• Specific support is better than general tools.• Example, comparing two directories


Visualization 18

L Three Dimensions Are Not Necessarily Better Than Two

• Pros:- Extra continuous data dimension- Easier to separate coincident points

• Cons:- Increased navigation time- Occlusion- Judging size difficult


Visualization 19

L Two Studies Using Three Dimensions

• Network Visualization, Ware and Franck• Hierarchical Visualization, Wiss and Carr


Visualization 20

L Networks and 3D

• Compared four conditions- Static 2D view- 3D view, stereo perspective, static- 3D view, mono, head-coupled perspective- 3D view, stereo, head-coupled perspective

• Test to compare error rates in determining node connectivity

• Random networks, random pairs


Visualization 21

L Sample Task

Are the two red

nodes connected?


Visualization 22

L Experiment Results

Static, 2D

Stereo 3D

Head-coupled, mono 3D

Head-coupled, stereo 3D


Visualization 23

L 3D Networks, Analysis

• The networks were random; this may not transfer to real networks.

• The 2D view was static; zooming, filtering, and selective highlighting may have given different results.

• Navigation was head-coupled, manipulating controls may affect the results.

• Still, it seems that head-coupled, stereo viewing helps people cope with visual complexity.


Visualization 24

L Hierarchies and 3D

• Three 3D hierarchical visualizations:- Information Landscape- Cam Tree- Information Cube

• Three task types:- Search (Zoom task based)- Count (Relate task based, parent-child)- Compare (Overview task based)


Visualization 25

L Hierarchies and 3D, Results

0

10

20

30

40

50

Sea

rch

Co

un

t

Co

mp

are

Successful Tasks

Info LandCam TreeInfo Cube

0

50

100

150

200

250

Sea

rch

Co

un

t

Co

mp

are

Time to Complete

Info LandCam TreeInfo Cube


Visualization 26

L Hierarchies and 3D, Analysis

• Navigation time overriding factor- Task-based navigation support vital

• Occlusion contributes to errors and disorientation- Overview very important

• Study too short to comment on learning- Participants were still learning during the study.

• A good 2D visualization would have allowed doing the tasks by inspection.


Visualization 27

L Navigation and Zooming Do Not Replace Filtering

• Filtering- Reduces data to be considered- Helps for studying items that are not adjacent- Supports logical identification of records

• Navigation and Zooming do not support:- Reduction on non-adjacent data- Logical identification


Visualization 28

L The Graphic Method Should Depend on the Data

• 1-Dimensional- program source code- wrapped lines

• 2- Dimensional- geographic data, floor plans- maps, ...

• 3-Dimensional- volume data in the real world- needs slicing, transparency,

and multiple views• Multi-dimensional

- most data bases- dynamic queries with a 2D or

3D representation

• Temporal- animation (transitory)- Users need control for:

+ Speed+ Step-by-step+ Start and end points

- time lines• Hierarchical

- budgets- trees

• Networks- communications networks- node-link diagrams


Visualization 29

L 1D, Source Code, SeeSoft


Visualization 30

L 2-Dimensional


Visualization 31

L 3-Dimensional

• Special color coding• Slicing


Visualization 32

L Temporal Data - LifeLines


Visualization 33

L Multi-Dimensional


Visualization 34

L Hierarchical


Visualization 35

L Networks, SeeNet3D


Visualization 36

L Multiple Views Should Be Coordinated

• Users need context to be maintained• Should be based on the data and not graphics


Visualization 37

L Test Your Designs with Users

• There is little hard design knowledge about visualization.

• The existing knowledge is primarily from:- Laboratory settings- Novice use

• Best results are obtained with something tailored to your users and their tasks.


Visualization 38

L

The Human Visual System


Visualization 39

L Components of the System

• Three stage processing- The eye- 1st stage mental processing- 2nd stage mental processing

Perception for:actionspatial layout

Motor output,long-term motor memory

Object identificationVisual working memory

Natural language subsystem

Early Processing for contour, color, texture, and spatial cues.

Long-term object memory


Visualization 40

L Characteristics of the Eye

• Two areas of vision- Central (fovea)

+ narrow field (.5°-2°), sharp, adapted for detail- Edges

+ wide field (perhaps 200°), fuzzy, adapted for motion

• Central focus “always” in motion (move-fixate-move)

• Uses differential processing- Method to adapt to a wide variety of light, color, ...


Visualization 41

L Characteristics of Processing Centers

• 1st Stage- Operates in parallel- Extract environmental

features such as:+ Color+ texture

+ contour+ …

• 2nd Stage- Largely sequential- 2 parallel subsystems

+ Motor control

+ Language


Visualization 42

L

Perception, plus the Gestalt Principles

We see with our minds,not our eyes!


Visualization 43

L Pre-Attentive Processing

• Information that “pops out” must:- Use pre-attentive processing- Otherwise, one must think about it and this takes time

• Attributes must be processed early- Form, color, motion, position

• Time to process is independent of number of irrelevant objects (distracters).


Visualization 44

L Pre-Attentive Processing, Example

8658972698469726897643589226598655453124685397

8658972698469726897643589226598655453124685397

Search for the 3’s


Visualization 45

L Pre-Attentive Attributes, Details

• Form- Line orientation- Line length- Line width

- Deviation from collinear lines

- Size- Curvature

- Spatial grouping- Added marks

- Number of group symbols

• Color- Hue- Intensity

• Motion- Flicker- Direction

• Spatial Position- 2D position- Stereoscopic depth- Convex/concave shape

from shading


Visualization 46

L Gestalt Principles

• Pragnanz: - Structure is seen as simply

as possible.

• Proximity:- Nearby objects tend to be

grouped.

• Similarity:- Similar items tend to be

grouped.

• Closure:- Nearby contours tend to be

united.

• Continuation:- Grouping tends to occur

along simple curves.

• Common fate:- Elements that move

together tend to be grouped.

• Familiarity:- The familiar or meaningful

tends to be grouped.


Visualization 47

L

Coding of Data


Visualization 48

L Three Types of Data

• Nominal (= or ≠, e.g., apples, oranges, pears)• Ordinal (< relation, e.g., 1st, 2nd, ...)

- Ordinal Time

• Quantitative (can do arithmetic)- Spatial- Geographical- Time


Visualization 49

L Visual Structures for Data Presentation

• Spatial substrate- Up to three dimensions

• Position encoding techniques- Composition (orthogonal placement, the scatter plot)- Alignment - Folding (SeeSoft)- Recursion (e.g., the desktop metaphor)- Overloading (multiple plots in the same space, tiling)


Visualization 50

L Composition


Visualization 51

L Alignment


Visualization 52

L Folding in SeeSoft


Visualization 53

L Recursion


Visualization 54

L Overloading


Visualization 55

L Visual Structures

• Marks- Points, lines, areas, volumes

• Graphical attributes of the marks- Position (spatial)- Size- Gray Scale- Orientation- Color- Texture- Shape

Extent

Differential

Limited Extent,Differential


Visualization 56

L Effectiveness of Graphical Attributes

Attribute Quantitative Ordinal NominalPosition + + +Size + + +Gray scale o + -Orientation o o +Color o o +Texture o o +Shape - - +


Visualization 57

L Attribute Qualities

• Position- X, Y are strongest- Z interacts with size

• Size- Reasonable differences limit number of categories- Small differences can be perceived if adjacent and

the same shape.


Visualization 58


• Gray scale- Hard to perceive many discrete steps (about 4 max.)- Interactions with background make absolute value

perception difficult

- Small differences are however relatively easy to detect


Visualization 59

L Attribute Qualities, Color

• Subject to interference- Blue X and box are the same

color

- Blue+red causes focus problems

• People can recognize about 12 distinct colors

• These colors are culturally independent

• Summary- Especially good for categories

XX

whiteblack

redyellow green

green yellow

blue brown

pinkpurpleorangegray


Visualization 60


• Orientation- Rotation can express

values

- Perception of absolute difference limited to about 45°

+ higher for adjacent symbols

- Perception tends to blend areas of nearly identical adjacent symbols

• Texture- Best adapted to

comparisons- Contrast/Intensity can give

some absolute values- Similar adjacent areas

blend

• Shape- No nature mapping to

value- Useful for nominal data

with many values


Visualization 61

L Questions?


Visualization 62

L References

• Card, S., Mackinlay, J., and Shneiderman, B. eds. Readings in Information Visualization Using Vision to Think, Morgan Kaufmann, 1999, ISBN 1-55860-533-9.

• Wiss, U. & Carr, D. An empirical study of task support in 3D information visualizations, Proceedings IEEE Conference on Information Visualization (IV’99), 392-399. (http://www.ida.liu.se/~davca/postscript/3visStudy.pdf)

• Carr, D., "Guidelines for Designing Information Visualization Applications", Proceedings of ECUE'99, Stockholm, Sweden, December 1-3, 1999. (http://www.ida.liu.se/~davca/postscript/VizGuidelines.pdf)

• Ware & Franck, Evaluating stereo and motion cues for visualizinginformation nets in three dimensions; ACM Trans. Graph. 15, 2, Apr. 1996), 121-140.

• Ware, Information Visualization: Perception for Design; Morgan Kaufmann, 2000, ISBN 1-55860-511-8.

Documents

Information Visualization - Start page at · · 2002-12-08Human-Computer Interaction Fall 2002 8 ... • What is information visualization? • What do we need to do? • Guidelines