Outline of today 1. Introduction 2. Visual perception Principles 1. Pre-attentive processing 2. Sequential, Goal-Directed Processing 3. Building Blocks of Info Vis 1. Detection of Color, Shapes, Boundary, Etc. 2. Gestalt Laws 3. Color Model 4. Glyph Construction 4. Tufte ‘s Principles of Graphical Excellence 5. Shneiderman’s Mantra and References

1.1. Start with the Problem Data TransferData Web, Wiki Books, Papers, Scientific data, Biotech, Shopping People Stock/finance News Vision: 100 MB/s Ears: <100 b/s Telepathy Smell Taste How? Two slides courtesy of Chris North

1.1. The Purposes of Info Vis Activities Exploration Sense-Making Communication TechnologyInformation Visualization Scientific Visualization Graphical Presentation Immediate GoalsUnderstanding Diagnose Causality of Phenomena, Predict Future Trend End GoalGood Decision Analysis–Understand your data better for better decision Presentation –Communicate and inform others more effectively,

The Challenges Scale, Challenge often arises when data sets become very large Dimensionality Scientific Data -> Require Accuracy Informatics Data -> Require Comphrensibility Diversified data types Numerical Ordinal Nominal

task × data type taxonomy

Analytics Gap Analytic gaps –“obstacles faced by visualizations in facilitating higher-level analytic tasks, such as decision making and learning.”  Worldview Gap  Rationale Gap

4. Application of Precepts

Tableau Multi-view Visualization

1.1. Form follows Function The task is to use the proper tools and visual entities to encode the data to achieve the two major purposes Your options for Styles Static Visual are position, color, size, shape, texture, etc. Your have option of Interactive Visual/Animation to show multiple different perspectives on the data Tools, R, MATLAB, EXCELL, Tableau, Paraview, etc. Questions Which American Modern Architect quoted it from which American sculptor? What is its impact to Software Architecture Design?

1.2. Psychophysics Psychophysics is a discipline within Psychology that quantitatively investigates the relationship between physical stimuli and the sensations and perceptions they effect. Psychophysics has been described as "the scientific study of the relation between stimulus and sensation. Applying methods of physics to measuring human perceptual systems, Examples, How fast must light flicker until we perceive it as constant? What change in brightness can we perceive?

1.2. Cognitive psychology Cognitive psychology is a discipline within Psychology exploring internal mental processes. It is the study of how people perceive, remember, think, speak, and solve problems. It accepts the use of the scientific method, and generally rejects introspections as a valid method of investigation It explicitly acknowledges the existence of internal mental states (such as belief, desire and motivation) unlike behaviorist psychology It application to visual perception is to understanding how people think, here, how it relates to perception

1.2. Semiotics Semiotics is a discipline within linguistics, is the study of sign processes or signification and communication, signs and symbols. It is usually divided into the three following branches: Semantics: Relation between signs and the things to which they refer; their denotata Syntactics: Relations among signs in formal structures Pragmatics: Relation between signs and their effects on the people who use them The study of symbols and how they convey meaning

2. Perceptual Processing Definition: Perception is the process of attaining awareness or understanding of sensory information. The word "perception" comes from the Latin words perceptio, percipio, and means "receiving, collecting, action of taking possession, apprehension with the mind or senses.” Seek to better understand visual perception and visual information processing Multiple theories or models exist Need to understand physiology and cognitive psychology

2 One (simple) Model Two stage process Parallel extraction of low-level properties of scene Sequential goal-directed processing Stage 1 Early, parallel color, texture, shape, spatial attributes Stage 2 processing of object identification (using memory) and spatial layout, action Ware 2000

2.1 Stage 1 -Low-level, Parallel Neurons in eye & brain responsible for different kinds of information Orientation, color, texture, movement, etc. Arrays of neurons work in parallel Occurs “automatically” Rapid Information is transitory, briefly held in iconic store Bottom-up data-driven model of processing Often called “pre-attentive” processing

2.1. Pre-attentive Processing How does human visual system analyze images? Some things seem to be done pre-attentively, without the need for focused attention Generally less than ms (eye movements take 200 ms) Seems to be done in parallel by low-level vision system

2.2. Stage 2 -Sequential, Goal-Directed Splits into subsystems for object recognition and for interacting with environment Increasing evidence supports independence of systems for symbolic object manipulation and for locomotion & action First subsystem then interfaces to verbal linguistic portion of brain, second interfaces to motor systems that control muscle movements

2.2. Stage 2 Attributes Slow serial processing Involves working and long-term memory More emphasis on arbitrary aspects of symbols Top-down processing

3. Key Perceptual Properties Brightness Color Texture Shape Size Foreground and Background

3. What Kinds of Tasks? Target detection Is something there? Boundary detection Can the elements be grouped? Counting How many elements of a certain type are present?

3. How Many 3’s?

3. How Many 3’s?

3.1 Detect Object of Certain Hue Hue Can be done rapidly (pre-attentively) by people Surrounding objects called “distractors” Determine if a red circle is present

3.1 Detect Object of Certain Shape Determine if a red circle is present Shape Can be done pre-attentively by people

3.1. Detect Hue and Shape Determine if a red circle is present Cannot be done pre-attentively Must perform a sequential search Conjunction of features (shape and hue) causes it

3.1. Detect the Boundary Is there a boundary in the display? Left can be done pre-attentively since each group contains one unique feature Right cannot (there is a boundary!) since the two features are mixed (fill and shape)

3.1. Hue Versus Shape Is there a boundary? Shape Left: Boundary detected pre-attentively based on hue regardless of shape Right: Cannot do mixed color shapes pre- attentively

3.1. Hue Versus Brightness Is there a boundary? Left: Varying brightness seems to interfere Right: Boundary based on brightness can be done pre-attentively

3.1. Pre-attentive Features Certain visual forms lend themselves to pre-attentive processing Variety of forms seem to work Nice on-line tutorial and example applet Chris Healey, NC State Prior pictures taken from site A lot more features such as text, stereoscopic depth, etc.

3.1 Potential PA Features Length Width Size Curvature Number Terminators Intersection closure Hue Intensity Flicker direction of motion binocular lustre stereoscopic depth 3-D depth cues lighting direction

3.2. Gestalt Laws Background German psychologists, early 1900’s Attempt to understand pattern perception Founded Gestalt school of psychology Provided clear descriptions of many basic perceptual phenomena Now, it is called Gestalt Laws of Pattern Perception

3.2. Gestalt Laws Proximity Things close together are perceptually grouped together Similarity Similar elements get grouped together Connectedness Connecting different objects by lines unifies them Continuity More likely to construct visual entities out of smooth, continuous visual elements

3.2. Gestalt Laws Symmetry Symmetrical patterns are perceived more as a whole Closure A closed contour is seen as an object Relative Size Smaller components of a pattern as perceived as objects Figure & Ground Figure is foreground, ground is behind

3.3. Color Model HVS model Hue -what people think of color, (Ratio of RGB) Value -light/dark, ranges black white //Brightness Saturation -intensity, ranges hue gray (Magnitude of RGB) Sensory response to electromagnetic radiation in the spectrum between wave lengths micrometers White Black Hue Saturation

3.3 Color for Categories Can different colors be used for categorical variables? Yes (with care) Ware’s suggestion: 12 colors: red, green, yellow, blue, black, white, pink, cyan, gray, orange, brown, purple From Ware, 04

3.3. Possible Sequences

3.3. Heat Map

3.3 Color Brewer

3.3. Using Color For large regions, don ‟ t use highly saturated colors (pastels a good choice) Do not use adjacent colors that vary in amount of blue Don’t use high saturation, spectrally extreme colors together (causes after images) Use color for grouping and search Beware effects from adjacent color regions (my old house - example)

Exercise, Tell me the colors of each row BlueGreenYellowOrange Black Red Purple Yellow Red Orange Black Green Yellow Blue PurpleOrange

3.3. Shape, Symbol Can you develop a set of unique symbols that can be placed on a display and be rapidly perceived and differentiated? Application for maps, military, etc. Want to look at different pre-attentive aspects

3.4. Glyph Suppose that we use two different visual properties to encode two different variables in a discrete data set color, size, shape, lightness Will the two different properties interact so that they are more/less difficult to untangle? Integral -two properties are viewed holistically Separable -Judge each dimension independently

3.4. Integral-Separable red-green Shape height Shape color direction motion color x, y position Integral Separable yellow-blue black-white shape width size Size Shape direction motion size, shape, color

3.4. Encodings When you want to communicate one type of variable, which visual property should you use? Accuracy Ranking

3.4. Encodings Ranking Of Perceptual Tasks

4. About Edward Tufte

1. Tufte ‘s Principles of Graphical Excellence Graphical excellence requires telling the truth about the data Graphical excellence consists of complex ideas communicated with clarity, precision and efficiency Graphical excellence is the well-designed presentation of interesting data---a matter of substance, of statistics, and of design Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space Graphical excellence is nearly always multivariate

1. Top Principles Tell the truth Graphical integrity Do it effectively with clarity, precision… Design aesthetics

2. Graphical Integrity, Example 1, Stock Market Crash?

Example, Continue

2. Chart Integrity Where ’s baseline? What’s scale? What’s context?

Example 2, Vol. 1, p. 54 (1), Where is 0? Note Middle ‘70

Example 2, Vol. 1, p. 54 (2), What is the base line units?

Vol. 1, p. 57 Scale?

Vol. 1, p. 61 Scale?

Vol. 1, p. 75 Great Work!

2. Watch Size Coding Height Width Area Volume How do you interpret these size coding?

Vol. 1, p. 69 Area = Value ?

Vol. 1, p. 62 Volume = Value ?

2. Measuring Misrepresentation Visual attribute value should be directly proportional to data attribute value P. 62, “Data Don’t Lie, But, People Do”

3. Design Aesthetics Basic Principles 1. Maximize data-ink ratio 2. Maximize data density 3. Use small multiples 4. Show mechanism, process, dynamics, and causality 5. Utilize narratives of space and time 6. Use Color Effectively

3.1. Maximize data-ink ratio proportion of graphic’ s ink devoted to the non- redundant display of data- information =

Vol.1, P. 94, Good or Bad

Vol.1, P. 30 Outstanding

3.1. Above All Above all else, show the data Maximize the data-ink ratio Erase non-data-ink Erase redundant data-ink Revise and edit

3.2. Maximize data Density Density “Data-rich designs give a context and credibility to statistical evidence. Low-information designs are suspect: what is left out, what is hidden, why are we shown so little? High-density graphics help us to compare parts of the data by displaying much information within the view of the eye: we look at one page at a time and the more on the page, the more effective and comparative our eye can be. The principle, then, is: Maximize data density and the size of the data matrix, within reason.” Vol. 1, p 168

Avoid Chartjunk Extraneous visual elements that detract from message

Vol.1, P. 108

3.3, Use small multiples Repeat visually similar graphical elements nearby rather than spreading far apart

Vol. 1, p.43

Good Examples Data is multivariate 

More….

4. Summary, Graphical Displays Should Show the data Induce the viewer to think about substance rather than about methodology, graphic design the technology of graphic production, or something else Avoid distorting what the data have to say Avoid Chartjunk Present many numbers in a small space Make large data sets coherent Encourage the eye to compare different pieces of data Reveal the data at several levels of detail, from a broad overview to the fine structure Serve a reasonably clear purpose: description, exploration, tabulation, or decoration Be closely integrated with statistical and verbal descriptions of a data set

1.4, Short Summary, Content is King Quality, relevance and integrity of the content is fundamental What’s the analysis task? Make the visual design reflect that Integrate text, chart, graphic, map into a coherent narrative

5. Shneiderman’s Mantra Overview first For good orientation Zoom and Filter Focus on what matters Details-on-demand Pin-down to the discovery Discourse – Next question? Zoom and Filter Details-on-demand Summary - Answer what you found?

4. References Book Information Visualization Perception for Design 2ndedition Colin Ware Morgan Kaufmann Healey website and article aley/PP/index.html

Good Color Advice Maureen Stone’s website Many references and links She frequently offers tutorials about color at conferences