Information Visualisation - Lecture 3

@wassx#ILV Informationsvisualisierungen
Information
Visualisation
Information
Visualisation
Lecture 3 - Visualisation

#ILV Informationsvisualisierungen 2
A story…

Cognition
Sitting in park, reading newspaper.
Suddenly something appears in the corner of your eye.
You raise the hand to block.
Afterwards you recognise that a ball nearly hit your face.

Cognition
Lesson learned #1
Vision is fast, but reason is slow.

Cognition
Lesson learned #2
Your brain calculated estimated position of impact and
prompt your arms to react.

Cognition
Lesson learned #3
Seeing, perceiving and knowing are different phenomena.

Gestalt Laws

Gestalt Laws
Attempt to understand pattern perception. Clear
description of many basic perceptual phenomena.
1912 - Gestalt school of psychology 
(Max Wertheimer, Kurt Koffka and Wolfgang Köhler)
Koffka WertheimerKöhler

Gestalt Laws

Gestalt Laws
Proximity
Spatial proximity is a powerful organising principle.
Things which are close together are perceived as a group.
Additionally it has perceptual efﬁciency.
Easier to pick information close to fovea, less
time and effort will be spent in neural
processing and eye.
(-> cognitive load)

Gestalt Laws

Gestalt Laws
Similarity
Shapes of individual pattern elements can also determine
how they are grouped. 
Similar elements tend to be grouped together.
Texture and color are separate channels
Useful when design targets differentiation.
Users can easily attend to either one pattern or the other.

Gestalt Laws

Gestalt Laws
Connectedness
Steve Palmer and Irvin Rock argued that connectedness
was overlooked by Gestalt psychologists.
Palmer, Stephen; Neff, Jonathan; Beck, Diane (1997). "Grouping and Amodal Perception". In Rock, Irvin. Indirect perception. MIT Press/Bradford Books series in cognitive psychology.
Connectedness can be more powerful than proximity,
color, shape or size. Connecting with lines express
relationships (node-link diagram)

Gestalt Laws

Gestalt Laws
Continuity
Humans are more likely to construct visual entities out of
visual elements that are smooth and continuous.

Gestalt Laws
Continuity

Gestalt Laws

Gestalt Laws
Symmetry
Symmetrically arranged pairs of lines are perceived more
strongly as forming a visual whole than a pair of parallel
lines.
Makes pattern comparisons easier. Dakin and Herbert
suggests that we are most sensitive to symmetrical patterns
that are small in terms of visual angle ( <1 degree horizontally
and <2 degrees vertically, and centered around the fovea)
http://www.ncbi.nlm.nih.gov/pmc/articles/PMC1689030/pdf/9608727.pdf

Gestalt Laws

Gestalt Laws
Closure and Common Region
Perceptual tendency to close contours that have gaps in
them. (-> data ink ratio)
Wherever a closed contour is seen, regions of space are
divided into "inside" and "outside".
Region enclosed by a contour becomes a common region.
Common region much stronger than proximity.

Gestalt Laws
Closure and Common Region

Gestalt Laws
Figure and Ground
https://www.pinterest.com/pin/562387072188816835/

Gestalt Laws
Figure and Ground
https://www.pinterest.com/pin/562387072188816835/
Brain decides what is the foreground (ﬁgure) in a scene.
Decision is made on various cues: movement, color, size,…
If not clear, ﬁgure competes with ground (cognitive load)

Gestalt Laws
https://www.youtube.com/watch?v=nuH6dIcgaoU

Gestalt Laws
Common Fate
Mental grouping of entities which move in the same
direction or have a common destination.
Objects which share a common motion.
https://www.windyty.com/?53.878,-27.993,4

Hands-on #3
Find a information graphic or visualisation and discuss
in one paragraph the use of the Gestalt Principles.
(Good example / bad example)
~15min

Visual Properties for Encoding

Designing Data Visualizations, Noah Iliinsky & Julie Steele
Choosing Appropriate Visual Encodings
Different properties for different type of data.
Key factors of a visual property are:
1. property is naturally ordered
2. how many distinct values reader can easily differentiate

Natural Ordering
„Natural Order“ is determined by our visual system and
„software“ in our brains by unintentionally assigning an
order, or ranking to different values of that property.
Independent of language, culture, convention,…

Natural Ordering
quantitative differences
ordinal differences

Natural Ordering
How about COLOR?

Natural Ordering
No.

Natural Ordering
Color (hue) is NOT naturally ordered.
„Ordering“ based on social conventions about color and
ordering by wavelength in the physical world.
But no non-negotiable natural ordering built into our brain.
3 4vs.

Natural Ordering
But luminance and
saturation are naturally
ordered.

Distinct Values
Reader must be able to perceive, differentiate and
remember distinct values.
Big amount of values.

https://www.behance.net/gallery/11685745/Datavisualisation-of-a-Game-of-Thrones

Redundant Encoding
If unused visual properties are left, consider using them for
redundantly encode dimensions.
Using more channels makes
acquisition of information
faster, easier and more
accurate.

Don’t forget…

Compatibility with Reality
Align encodings with things and relationships known from
reality.
Compatibility
Extra cues from physical world and cultural conventions.

http://www.mymarketresearchmethods.com/wp-content/uploads/2013/01/visualization1.png

Think for whom you are designing for.
Keep in mind ~7% of males have some kind of color
weakness.
Check used colors with appropriate tools:
Colorblind Vision
Photoshop
Online tools….

Visualising Patterns over Time

http://projects.flowingdata.com/life-expectancy/

http://skedasis.com/d3/slopegraph/

Visualising Proportions

Visualising Relations

http://mbostock.github.io/d3/talk/20111116/iris-splom.html

http://bl.ocks.org/mbostock/4063530

sankey

Spotting Differences

http://bl.ocks.org/tjdecke/5558084

Chernoff faces

Visualising Spatial Relationships

Airport data

http://ssz.fr/parite/

http://avtanski.net/projects/gps/

Checklist

Checklist
Determine Your Goals and Supporting Data
• What information need are you attempting to satisfy with this
visualization?
• What values or data dimensions are relevant in this context?
• Which of these dimensions matter; matter most; and matter least?
• What are the key relationships that need to be communicated?
• What properties or values may make some individual data points
more interesting than the rest?
• What actions might be taken once the reader’s information need
is satisﬁed, and what values will justify that action?
Designing Data Visualizations, Noah Iliinsky & Julie Steele, O'Reilly 2011

Checklist
Consider Your Reader
• What information does the reader need to be successful?
• How much detail does the reader need?
• How long does the reader have to make any learned information
effective?
• What learned or cultural assumptions does the reader have that
may affect your design choices?

Checklist
Select Axes, Layout, and Placement
• Can you encode your most important data dimension or relationship
with position?
• Is there a secondary grouping, dimension, or relationship that can be
represented spatially? What if you rearrange or invert groupings?
• Does your direction make sense? Where does the data begin and
end? Where should the reader start reading? Which way to the
relationships flow?
• Does the placement of your entities reflect their relationships to
each other?
• Does the placement of your entities reflect their relationship to
reality?

Checklist
Evaluate Your Encoding Entities
• Are you using conventional encodings and formats? If not, are you
sure you have something better?
• Are you using color to represent quantity? Stop it. Use size or
placement instead.
• Are your shapes, colors, icons, and text evocative of the properties
that exist and that you want to communicate?
• Are you using the same visual encoding for more than one data
dimension? Try to pick another one.
• Are you using extra visual properties to redundantly encode your
data? Good job!

Checklist
Reveal the Data’s Relationships
• Are the most important relationships revealed?
• Do the relationships need to be called out with links or labels? Or a
speciﬁc ﬂag?
• Are all the displayed relationships actually relevant and useful?
• Are you redundantly encoding your links?

Checklist
Choose Titles, Tags, and Labels
• Is the reader from within your industry or outside of it? What about
other readers outside of the core audience group? Consider how this
will affect your vocabulary choices.
• Is it worth using an industry term for the sake of precision (knowing
that the reader may have to look it up), or would a lay term work just
as well?
• Will the reader be able to decipher any unknown terms from
context, or will a vocabulary gap obscure the meaning of all or part of
the information presented?
• Is everything important labeled? Are all of your labels necessary? Is
your key or legend necessary? Is it ordered in a useful way?

Checklist
Analyze Patterns and Consistency
• Have you been consistent in membership, ordering, placement, and
other encodings?
• Things that are the same should look the same. Is that so?
• Things that are different should look different. Is that so?

Information Visualisation - Lecture 3

More Related Content

Viewers also liked

Similar to Information Visualisation - Lecture 3

Recently uploaded

Information Visualisation - Lecture 3