John Kruse

1
MSSE SEng 5115 - GUIVisualization

• John Kruse
• University of Minnesota

2
Data Visualization

• Represents data based on perceptual principles
• Capitalize on our ability to see patterns
  interpret visual scenes
• Uses experiential / perceptual representation
• 2 or more variables in relationship to each other
• Different levels of scale or granularity
• Simultaneous, or in quick succession
• Related, but systematically different objects /
  attributes
• Simultaneous
• In close succession, where simultaneous is not
  feasible

3
What Visualizations Show

• Patterns, overall relationships
• Trends over time, space
• Outliers
• Existence of objects
• Of different kinds
• Population/count of objects
• Of different kinds

4
Multi-variate displays

• How many dimensions or attributes
• can we load onto 2-dimension?
• and be comprehensible / usable?

5
Visual Information Seeking Mantra

• Overview first
• Zoom and filter
• Then details-on-demand
• Schneiderman, U of Maryland, HCIL

6
Basic Visual Perception

• We perceive structure
• Similarity
• Proximity
• Continuity

7

• Closure
• Area
• Symmetry

8
Perception as interpretation

• Not always simple, not always stable
• Causality
• http//research.yale.edu/perception/causality/laun
  ching.mov
• http//research.yale.edu/perception/causality/laun
  ching.mov

9
Pop-out

• Singletons are easily seen
• Distinctive perceptual input

10
The big picture plus details

• Zooming
• Zoomworld, in The Humane Interface, Jef Raskin
• Big picture, navigation to details
• MS Word, LN exported examples

11
Sources

• Gallery of Data Visualization
• http//www.math.yorku.ca/SCS/Gallery/
• Ben Schneiderman
• HCIL Human-Computer Interaction Laboratory
• University of Maryland
• http//www.cs.umd.edu/hcil/categorizedsearch/
• Spotfire
• Product for information visualization

12
Information Visualization Software Repository

• Information Visualization Software Repository
  project, started in 2000.
• Used to teach the Information Visualization class
  at Indiana University

13
Variables as function of Time
Trains Eastbound, Westbound
Los Angeles
Omaha
New York
Mon 0800
Mon 2100
Tues 0300
Tues 1430
14
Time 1 variable 1 event

• Legal file tracking
• Timeline of inventories
• Measure of misplaced items at time points

Figure 2 Handheld Tracker inventories from July
10 until September 18. The analyses and detailed
data shown below are based on the sweeps called
out with the yellow arrows.
15
Variables as function of 2-d space

• Snapshot, or point in time
• Averages over time period
• http//www.wunderground.com/cgi-bin/findweather/ge
  tForecast?query55401
• http//www.dot.state.mn.us/tmc/trafficinfo/traffic
  .html
• http//stuff.mit.edu/people/brianmca/Adventures20
  in20California_files/ContourMap_large.jpg

16
Flow of materials

• Distribution of goods by rail in France
• http//www.math.yorku.ca/SCS/Gallery/

This particular flow map uses line thickness in a
similar way to show the distribution of goods by
rail throughout France, with different colors
distinguishing different railway lines.
17
Flow of materials

• Legal files
• Done with Excel
• Discrete 2-d space

18
Variables as function of space time

• Minards graph of Napoleans march
• http//www.edwardtufte.com/tufte/minard
• http//www.math.yorku.ca/SCS/Gallery/
• Tufte, Visual Display of Quantitative Information

19
More examples

• Re-Visions of Minard
• Michael Friendly, York University
  http//www.math.yorku.ca/SCS/Gallery/minard/minard
  .pdf
• Map of the market
• http//www.smartmoney.com/marketmap

20
2 variables. Time, then time quality

• Time taken Time x Quality

21
2 variables. One is understood better

• Number of non-categorized is much less for one
  variable than for the other

22
Categories Scale, perspective

• Quantities as a function of category/attribute
• Overview
• Zoom filter
• The 30,000-foot view
• Can allow statistics by perceptual judgment
• Plus ability to see details examples

23
Overview
24
Cute. And useful
25
Zooming in, easily(Way too slow from CD-ROM,
but)
26
Visual Information Seeking Mantra

• Overview first
• Zoom and filter
• Then details-on-demand
• Schneiderman, U of Maryland, HCIL

27
Spotfire

• A commercial application for data visualization
• http//www.spotfire.com/products/gallery.cfm
• http//www.spotfire.com/products/gallery.cfm
• Lots of applications
• A power tool
• Requires some learning curve
• Demo
• link

28
Continuum Designing Timelines for Hierarchies,
Relationships and Scale

• UIST 2007, Paul André, Max L. Wilson, Alistair
  Russell, Daniel A. Smith, Alisdair Owens, m.c.
  schraefel
• demo
• Google timelines
• Timelines for stock data
• http//finance.google.com/finance?qNYSE3ABSC

29
Quantities by category / attribute

• Treemaps
• (Schneidermans Concept, Sun work)
• Decomposition of hierarchy by successive
  divisions
• Vertically, horizontally, vertically
• http//www.cs.umd.edu/hcil/treemap/
• Top 100 iTunes
• http//www.hivegroup.com/demos/itunes/itunes.html
• World Population
• http//www.hivegroup.com/world.html

30
Relationships among objects

• Showing networks of sites
• Kartoo is very cool
• Do you understand it?

31
Information visualization

• Perceptual tasks
• Timelines, calendars
• Treemaps, marketmaps
• treecones
• Fisheye views
• More information on area of attention
• Less-detailed information on other, related
  things
• Dynamic linking of information

32
Ben Schneiderman

• Designing the User Interface Strategies for
  Effective Human-Computer Interaction (4th
  Edition)
• Ben Shneiderman and Catherine Plaisant
• Leonardo's Laptop Human Needs and the New
  Computing Technologies
• http//www.cs.umd.edu/ben/

33
Principles of categorized search result
visualization

• We are developing a set of search result
  visualization principles, based on the premise
  that consistent, comprehensible visual displays
  built on meaningful and stable classifications
  will better support user understanding of search
  results.
• Represent a sufficiently large number of results
  (100-1000)
• Organize results by meaningful, stable
  classifications, complemented by automated
  clustering
• Arrange important text (title, snippet, URL) for
  efficient scanning and skimming
• Support multiple visual presentations and
  classifications
• Tightly couple category labels to all results for
  that category.
• Use a stable visual substrate
• Visually encode quantitative attributes
• Bill Kules and Ben Shneiderman

34
The Challenger Disaster

• Tufte, Visual Explanations Images and
  Quantities, Evidence and Narrative
• about pictures of verbs, the representation of
  mechanism and motion, process and dynamics,
  causes and effects, explanation and narrative

35
Additional web sites

• Tuftes web site
• http//www.edwardtufte.com/
• Reporting dashboards
• Information Dashboard Design The Effective
  Visual Communication of Data
• Stephen Few
• http//www.perceptualedge.com/examples.php