1. Representing Data using
Static and Moving
Patterns
Colin Ware
UNH

2. Introduction



Finding patterns is key to information
visualization.
Expert knowledge is about understanding
patterns (Flynn effect)
Example Queries: We think by making
pattern queries on the world




Patterns showing groups?
Patterns showing structure?
When are patterns similar?
How should we organize information on the
screen?

4. The dimensions of space

5. The “What” Channel
Patterns of patterns

6. Two parts


Part I: Static Patterns
Part II: Patterns in Motion

7. Part I: Static Patterns

Gestalt Laws








[Max Westheimer, Kurt Koffka, and Wolfgang
Kohler (1912)]
Proximity
Similarity
Continuity
Symmetry
Closure
Relative Size
Figure and Ground

8. Proximity

Emphasize
relationship by
proximity

Spatial
Concentration
a
x
b

9. Proximity

10. Similarity (Continued)
•Separable dimensions
a
•Integral dimensions
b

12. Connectedness

Connectedness assumed in Continuity
a
c
b
d

13. Continuity

Visual entities tend to be smooth and
continuous
a
b
c

14. Continuity in Diagrams

Connections using smooth lines
a
b

15. Graph aesthetics (experiment)
In
x
b
a
Continuity (inv bendiness)

16. Results
rt = -4.970 + 1.390spl + 0.01699con + 0.654cr + 0.295br
spl: Shortest path length
con: continuity
cr: crossings
br: branches
1 crossing adds .65 sec
100 deg. adds 1.7 sec
1 crossing == 38 deg.

17. Symmetry

Symmetry create visual whole

Prefer Symmetry

18. Symmetry (cont.)

Using symmetry to show Similarities
between time series data

19. Closure

Prefer closed contours
a
b

20. Closure (cont.)

Closed contours to show set relationship
A
B
C
D

21. Extending the Euler diagram

22. Closure (cont.)

Segmenting screen


Creating frame of reference
Position of objects judged based on enclosing
frame.

23. Relative Size

Smaller components tend to be perceived
as objects

prefer horizontal and vertical orientations

24. Figure and Ground

Symmetry, white space, and closed
contour contribute to perception of figure.

25. Figures and Grounds (cont.)

Rubin’s Vase

Competing recognition processes

26. Field, Hayes and Hess
Contour finding mechanisms

27. More Contours
a

b
Direct application
to vector field
display

28. Vector fields

Contours and
pen strokes, 3D,
shading

29. Vector Field
Visualization
Laidlaw

31. Evaluation






Direction
Magnitude
Advection
Global pattern
Local pattern
Nodal points

32. Algorithms


Optimizing trace density (poisson disk)
Flexible methods for rendering (enhanced
particle systems).

33. Transparency



Continuity is important in transparency
x < y < z or x > y > z
y < z < w or y > z > w
x
w
y
b
a
z

34. Laciness (Cavanaugh)
a

b
Layered data: be
careful with
composites of
textures
c
d

35. Patterns in Diagrams

Patterns applied
a
c
b
d

36. Visual Grammar of diagrams

37. Semantics of structure

38. Treemaps and hierarchies



Treemaps use areas (size)
SP tree
Graph Trees use connectivity (structure)
a
b
a
b
c
f
d e g
h
i
www.smartmoney.com
a bc
i
de
f gh

39. Part II: Patterns in Motion


How can we use motion as a display
technique?
Gestalt principle of common fate

40. Limitation due to Frame Rate
λ


Can only show
motions that
are limited by
the Frame
Rate.
We can
increase by
using additional
symbols.
a
b
c

41. Motion as a visual attribute
(Common fate)

correlation between points:


frequency, phase or amplitude
Result: phase is most noticeable

42. Motion is Highly Contextual

Group moving objects in hierarchical
fashion.
a
b

43. Frame as motion context


The stationary Dot is perceived as
moving in (a).
The circle has no effect on this
process in (b).
a
b

44. Using Causality to display
causality

Michotte’s claim:
direct perception of
causality

45. A causal graph

46. Michotte’s Causality Perception
10
0%
D e t Lu c i g
i c a nhn
r
Dl ydl u c i g
ea e a n hn
N cua t
o a s liy
5%
0
10
0
T e( s c
i me .)
m
20
0

47. Visual Causal Vectors

48. Experiment


Evaluate VCVs
Symmetry about time of contact.

49. Results
Perceived effect
Cu a r lat n h
a s l e io s ip
p
1
S m re tio s i
o e la n hp
p
3
N r lat n h
o e io s ip
p
2
-1
.0
0
.5
-0
.5
0
.0
T ere tiv toco ta (se o d
im la e
n ct c n s)
1
.0

50. Motion Patterns that attract
attention (Lyn Bartram)



Motion is a good attention getter in
periphery
The optimal pattern may be things that
emerge, as opposed to simply move.
We may be able to perceive large field
patterns better when they are expressed
through motion (untested)

51. Anthropomorphic Form from
motion


Pattern of moving dots (captured from
actor body) – Johansson.
Attach meaning to movements (Heider
and Semmel)
a
b

52. Conclusion





Gestalt Laws are useful as design
guidelines.
Patterns should be present in luminance
Patterns should be the appropriate size
Motion is under-researched, but evidence
suggest its power.
Simple motion coding can be used to
express communication, causality,
urgency, happiness? (Braitenberg)