An overview of data visualization foundational concepts and theories in the second module of the class IT 7113 Data Visualization at Kennesaw State University - updated in 2025.
About Jack Zheng
Faculty of IT at Kennesaw.edu
http://idi.kennesaw.edu/it7113/
https://www.edocr.com/v/e6ql9njn/jgzheng/data-visual-foundation
Data Visualization
Foundational Concepts and Theories
IT 7113 Data Visualization
J.G. Zheng
Spring 2025
http://idi.kennesaw.edu/it7113/
https://www.edocr.com/v/e6ql9njn/jgzheng/data-visual-foundation
Overview
The foundational theories and concepts covered in this lecture notes:
• Representing data - data visualization process
– Visual mapping
– Visual attributes/variables/properties (SCOPeS)
– Visual perception and cognition
• Presenting data
– Pre-attentive processing
– Gestalt principles
Data visualization is a cross disciplinary field which has its theoretical roots in human
information behavior and cognitive science. This lecture notes summarize some of the
major theories and concepts that support our data visualization developments.
Some brief understanding of these concepts can broaden our knowledge of the field. We
are not going to dive deeply in these theories but will focus more on their practical
implications, which can be used to guide our data visualization designs and dashboard
developments.
Data Visualization Process
• Generally, visualization can assist human (making things easier)
in processing information on shaping attention, memorizing,
understanding, learning, and communicating.
• Why and how exactly can visualizations help? Let’s examine the
Data Visualization Process first and see how visualizations
impact human perception and cognition (some explanations
from cognitive science, psychology, and physiology studies)
http://dl.acm.org/citation.cfm?id=1082104
The Visualization Process
Extended reading:
A survey, classification and analysis of perceptual concepts and their application for
the effective visualisation of complex information
http://dl.acm.org/citation.cfm?id=1082104
Visualizations directly
impacts and enhances
perception.
The representation
part of the definition
Visual Mapping (Encoding)
• Mapping is the process of connecting visuals
to data (meanings) – the representation part
Visual mapping = data + visual
• The mapping (encoding) should be
appropriate and fitting to the data and the
story to tell
The + here indicates some
kind of defined associations
between the data and visuals
https://www.interaction-design.org/literature/article/visual-mapping-the-elements-of-information-visualization
Three Elements of Visual Mapping
• There are three elements to define for a
data/information visualization
– Spatial substrate
– Graphical (visual) elements
– Graphical properties (visual variables/properties)
[Key reading] The Three Elements of Visual Mapping for Information Visualization
https://www.interaction-design.org/literature/article/visual-mapping-the-elements-of-
information-visualization
The Spatial Substrate
• The spatial substrate is the space in which we’re
going to create the visualization.
• Most data/information visualization takes place in 2-
dimension spaces
– Or 3D simulation (static or interactive) on a 2D display
•
It is possible to create and project real 3-dimensional
representations in 3D spaces with the help of new
technologies like VR/AR
• Most of time we are designing data visualizations
targeting desktop/laptop computer screens typically
ranging from 12 inch to 27 inches.
– More mobile devices are used to view data visualizations
– Also on larger and even super size screens
Visual Elements
• Visual (or graphical) elements will appear in the spatial
substrate. They represent data items or entities.
• Visual elements are the basic building blocks in a
visualization (a chart or a diagram).
• The most fundamental abstract elements are:
– Points
– Lines
– Surfaces
– Volumes
• More complex elements can be built (combined) upon the
basic elements. Together they can represent almost
anything in a visualization.
http://wiki.gis.com/wiki/index.php/Visual_Variables
https://blogs.ifgi.de/digital-cartography/symbols/visual-variables/
http://metrocosm.com/global-immigration-map/
https://www.edocr.com/v/631d1wpb/jgzheng/SCOPeS
Visual Properties: SCOPeS
• Visual property, or attribute, or variable, is the
“decoration” applied to visual elements to
represent data values
– http://wiki.gis.com/wiki/index.php/Visual_Variables
– https://blogs.ifgi.de/digital-cartography/symbols/visual-
variables/
• A visual property is used to encode different
values of a particular dimension of data
– Multiple visual variables can be used together to
represent multiple dimensions of data
• There are six basic visual properties - easier to be
remembered as “SCOPeS” – my term.
• Motion can be added on top of these basic visual
properties: speed, moving direction, flicker/flash
pattern
– http://metrocosm.com/global-immigration-map/
Size
Color
Orientation
Position
Texture
Shape
Bertin’s Original Visual Variables in his book The
Semiology of Graphics (Jacques Bertin, 1967)
Refer to the lecture notes “Visual Encoding with
SCOPeS Visual Variables/Properties”
https://www.edocr.com/v/631d1wpb/jgzheng/SCOPeS
The Mapping/Encoding
• The value of a data item is mapped to the value of a particular
visual property based on the types of data
• For example:
– Sales amount can be mapped to the length of a rectangular bar.
– Each company (nominal) is mapped to a specific color.
• Some properties can be more effectively represent values of
certain data types than others
Continuous
quantitative data
Numerical values. Example: sales amount, age, height, etc.
Ordinal data
Discrete data, but with an order; often qualitative (for example
month in a calendar year, age groups) but can be quantitative
(ranked).
Nominal
The data is a collection of non-numerical and non-ordered data
(discrete): categorical. Example: departments in the college
https://www.coursera.org/lecture/dataviz-design/cognitive-vs-perceptual-design-distinction-gulX3
Visual Interpretation
• This is the interpretation and
comprehension of the
visualization that happens in
human brain
– Physiological: perception, spatial vision, working
memory
– Psychological: cognition, thinking, deduction, logic,
experience, culture, knowledge
•
It goes through two phases
– Perception (perceptual processing): instinct, immediate
– Cognition (cognitive processing): slower, more deliberate
Extended learning: see a video tutorial for some details: https://www.coursera.org/lecture/dataviz-
design/cognitive-vs-perceptual-design-distinction-gulX3
https://en.wikipedia.org/wiki/Perception
https://www.perceptualedge.com/articles/ie/visual_perception.pdf
Perception
• Perception is the organization, identification, and interpretation of
sensory information in order to represent and understand the presented
information, or the environment.
– https://en.wikipedia.org/wiki/Perception
• Perception happens in the brain, through three types of memories
• Visualizations directly, and can greatly, enhance the perception and
response speeds
– Therefore, it shapes people’s attention
Image from: https://www.perceptualedge.com/articles/ie/visual_perception.pdf
A picture is worth
1000 words (clicks)
https://www.interaction-design.org/literature/article/the-properties-of-human-memory-and-their-importance-for-information-visualization
http://www.users.totalise.co.uk/~kbroom/Lectures/3gs.htm
Sensory Memory
• Visual sensory memory is often known as iconic memory.
• Sensory visual memories are the raw information that the brain receives
(via the optic nerve) from the eye. We store and process sensory
memories automatically – that is without any conscious effort to do so.
• Sensory memories are stored for tiny time periods. They are typically
retained for less than 500 milliseconds.
• The processing of sensory information is called preattentive processing
(e.g. it happens prior to our paying attention to the information). It is a
limited form of processing which does not attempt to make sense of the
whole image received but rather to a small set of features of the image.
• Reference
– https://www.interaction-design.org/literature/article/the-properties-of-human-
memory-and-their-importance-for-information-visualization
Extended reading about visual perception:
http://www.users.totalise.co.uk/~kbroom/Lectures/3gs.htm
https://www.coursera.org/lecture/dataviz-design/cognitive-vs-perceptual-design-distinction-gulX3
Cognition
• Cognition is the comprehension of perceived information and
relate to long term experience and knowledge for understanding
• Needs long term memory support, with existing knowledge and
experience, and often cultures (for example, meaning of colors
like red and green).
• Eventually, perception impacts cognition and supports higher-
level behaviors based on cognition (such as making decisions)
• For example:
System 2 is the cognition
system, where a decision is
needed based on knowledge
and experience.
System 1 is the perception
system, where visualized
objects and patterns are
noticed.
Image from the video https://www.coursera.org/lecture/dataviz-
design/cognitive-vs-perceptual-design-distinction-gulX3
Presenting Data
• The way to present data also has practical influences on people’s
perception.
• A well-presented data visualization can greatly help the perception
and ease short term memory load.
• Two theories or principles help explain in more details on the
perception and their impact on cognition:
1. Pre-attentive processing
2. Gestalt principles
https://www.researchgate.net/publication/245623481
https://www.csc2.ncsu.edu/faculty/healey/PP/index.html
Pre-Attentive Processing
• Any visual processing of that item prior to the act of selection can be called
“preattentive”.
– Wolfe et. al. 2010 https://www.researchgate.net/publication/245623481
• Preattentive processing happens even before perception (or at least the very
early part of perception), e.g., it happens prior to our paying attention to the
information.
•
It is a limited form of processing (of sensory memory) which does not attempt to
make sense of the whole image received but rather to a small set of features of
the image.
• Preattentive processing can help to rapidly draw the focus of attention to a
target with a unique visual feature (i.e., little or no searching is required in the
preattentive case).
– Healey, 2005, https://www.csc2.ncsu.edu/faculty/healey/PP/index.html
• The technique is commonly used in many fields involving visual designs,
including:
– UX/UI and interaction design
– Data/information visualizations (charts, maps, dashboards)
– Web design, product design, shelf display, painting, etc.
http://kenhirakawa.com/significance-of-contrast/
https://www.coursera.org/lecture/dataviz-design/strategic-use-of-contrast-sDV6C
https://www.researchgate.net/publication/245623481
https://www.csc2.ncsu.edu/faculty/healey/PP/index.html
Applying Preattentive Processing in
Visual Attention (Salience)
• Basic technique: using contrast to differentiate the part that needs to
draw attention
– http://kenhirakawa.com/significance-of-contrast/
– https://www.coursera.org/lecture/dataviz-design/strategic-use-of-contrast-
sDV6C
• SCOPeS visual properties are commonly used in pre-attentive visual
design
Extended reading:
“What shall we do with the preattentive
processing stage”
https://www.researchgate.net/publication/
245623481
More examples in “Perception in
Visualization” by Christopher Healey
https://www.csc2.ncsu.edu/faculty/healey
/PP/index.html
Some examples by using various distinctive
visual properties
https://vizzendata.com/2019/12/18/using-preattentive-attributes-color-in-data-viz/
https://finviz.com/map.ashx
Preattentive Example: Color
• Using bright colors for
attention
https://vizzendata.com/2019/12/18/using-
preattentive-attributes-color-in-data-viz/
https://finviz.com/map.ashx
Brighter green/red
indicates higher
percentages.
Brighter color
highlights the key
country and measure
Preattentive Example: Shape
0
1
2
3
4
5
6
2011
2012
2013
2014
2015
KSU
GSU
UGA
AU
GT
0
1
2
3
4
5
6
2011
2012
2013
2014
2015
KSU
GSU
UGA
AU
GT
Adding a circle shape on data
points makes KSU line standing
out and easy to identify.
Sample college ranking trends:
the color coding chosen here
does not distinguish KSU enough.
https://www.slideteam.net/maintenance-kpi-dashboard-showing-order-progress-and-backlog.html
Preattentive Example: Size and Position
https://www.slideteam.net/maintenance-kpi-
dashboard-showing-order-progress-and-backlog.html
Center column (or
top row) and big
size chart indicates
the most important
metric.
https://infovis-wiki.net/wiki/Preattentive_processing
https://www.researchgate.net/publication/245623481
https://www.csc2.ncsu.edu/faculty/healey/PP/index.html
https://www.coursera.org/lecture/dataviz-design/pre-attentive-attributes-of-visualizations-GkLfQ
https://www.coursera.org/lecture/dataviz-design/color-as-a-pre-attentive-attribute-cdYqI
https://www.coursera.org/lecture/dataviz-design/strategic-use-of-contrast-sDV6C
Good Resources on Preattentive
• Quick reference
– https://infovis-wiki.net/wiki/Preattentive_processing
• Articles
– “What shall we do with the preattentive processing stage”
https://www.researchgate.net/publication/245623481
– “Perception in Visualization” by Christopher Healey
https://www.csc2.ncsu.edu/faculty/healey/PP/index.html
• Videos from UCD online course
– https://www.coursera.org/lecture/dataviz-design/pre-attentive-
attributes-of-visualizations-GkLfQ
– https://www.coursera.org/lecture/dataviz-design/color-as-a-
pre-attentive-attribute-cdYqI
– https://www.coursera.org/lecture/dataviz-design/strategic-use-
of-contrast-sDV6C
https://www.webfx.com/blog/web-design/gestalt-principles-applied-in-design/
Gestalt Principles of Perception
• Gestalt principles describes a set of ways how human
perceives images and how visual information are
identified and related from images.
• These principles have profound implication on many
fields involving visual designs, including:
– UX/UI and interaction design
– Data/information visualizations (charts, maps, dashboards)
– Web design
– Graphical design
– Painting/Photography
– Shelf display, catalog, form, etc.
– See how it is applied in general visual designs
https://www.webfx.com/blog/web-design/gestalt-principles-
applied-in-design/
https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization-for-human-perception
https://www.interaction-design.org/literature/topics/gestalt-principles
Basic Gestalt Principles
Proximity
Objects that are close together are
perceived as a group.
Similarity
Objects that share similar attributes
(e.g., color or shape) are perceived as
a group.
Enclosure
Objects that appear to have a
boundary around them (e.g., formed
by a line or area of common color) are
perceived as a group.
Closure
Open structures are perceived as
closed, complete, and regular
whenever there is a way that they can
be reasonably interpreted as such.
Continuity
Objects that are aligned together or
appear to be a continuation of one
another are perceived as a group.
Connection
Objects that are connected (e.g., by a
line) are perceived as a group.
Table from:
https://www.interaction-
design.org/literature/book/t
he-encyclopedia-of-human-
computer-interaction-2nd-
ed/data-visualization-for-
human-perception
More readings:
https://www.interaction-
design.org/literature/topics/
gestalt-principles (with a
video)
https://senturus.com/blog/tableau-tip-add-space-between-groups-of-bars-in-charts/
https://community.tableau.com/thread/140692
https://kb.tableau.com/articles/howto/adjusting-space-between-panes-when-using-a-bar-chart-in-tableau-desktop
Applying Gestalt: Proximity
Note: Tableau does not have an inherent setting to define spacing between the panes and category label
position in a view. We must hack it.
•
https://senturus.com/blog/tableau-tip-add-space-between-groups-of-bars-in-charts/
•
https://community.tableau.com/thread/140692
•
https://kb.tableau.com/articles/howto/adjusting-space-between-panes-when-using-a-bar-chart-
in-tableau-desktop
Put category
name closer to
the subcategory
names.
Add spacing
(proximity) for
visual association.
This is an example created in Tableau
which has some default settings that
cannot be changed: major category
label position on top, and no spacing
between major categories.
https://www.geckoboard.com/best-practice/dashboard-design/
http://www.excelcharts.com/blog/excel-dashboard-catchment-area/
Applying Gestalt: Enclosure
• Enclosure for
grouping, applied to
dashboards
https://www.geckoboard.com/b
est-practice/dashboard-design/
http://www.excelcharts.com/blog/
excel-dashboard-catchment-area/
Shaded side panel for
summary information,
which separates the
details on the right
https://www.webfx.com/blog/web-design/data-visualization-gestalt-laws/
Applying Gestalt: Continuity
• The law of continuity states that our eyes instinctively
group things that are aligned with each other. Let’s go
back to our “Sales by Salesperson” chart example. In the
left chart below, there are abrupt directional changes.
•
In the chart on the right below, the eyes follow a
continuous path; it makes the whole chart more readable
because of the continuous downward direction.
See more examples from
“How to Make Data
Visualization Better with
Gestalt Laws”:
https://www.webfx.com/blog/
web-design/data-
visualization-gestalt-laws/
https://www.storytellingwithdata.com/blog/a-multi-level-makeover-simplifying-a-shrinkage-report
Case Study
• a multi-level makeover: simplifying a
shrinkage report — storytelling with data
https://community.storytellingwithdata.com/exercises/one-little-changeand-a-redesign
Let’s Practice
• A better way
to design
this chart?
•
https://community.storytellingwithdata.com/
exercises/one-little-changeand-a-redesign
See more in “data vis cases and exercises 2”.
https://www.interaction-design.org/literature/topics/gestalt-principles
https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1
https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-and-continuation-gestalt-principles-2
https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3
https://www.scholarpedia.org/article/Gestalt_principles
http://elijahmeeks.com/#essays
https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/
http://excelcharts.com/data-visualization-excel-users/gestalt-laws/
https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-your-data-visualization-design/
https://www.webfx.com/blog/web-design/data-visualization-gestalt-laws/
https://www.coursera.org/lecture/dataviz-design/principles-of-visual-perception-TW6DT
https://www.youtube.com/watch?v=ZWucNQawpWY
https://www.youtube.com/watch?v=20N53khArXA
https://www.youtube.com/watch?v=RWJSC1HU32c
https://www.youtube.com/watch?v=dk7cXdjX2Ys
Good Resources on Gestalt
•
Introduction
– https://www.interaction-design.org/literature/topics/gestalt-principles (with videos)
• Part 1 https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1
• Part 2 https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-connectedness-
and-continuation-gestalt-principles-2
• Part 3 https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-
closure-and-common-fate-gestalt-principles-3
– https://www.scholarpedia.org/article/Gestalt_principles
– http://elijahmeeks.com/#essays
– Design Principles: Visual Perception And The Principles Of Gestalt — Smashing Magazine
– http://excelcharts.com/data-visualization-excel-users/gestalt-laws/
• Best practices
– https://vizzendata.com/2020/07/06/utilizing-gestalt-principles-to-improve-your-data-
visualization-design/
– How to Make Data Visualization Better with Gestalt Laws:
https://www.webfx.com/blog/web-design/data-visualization-gestalt-laws/
• Videos
– https://www.coursera.org/lecture/dataviz-design/principles-of-visual-perception-TW6DT
– https://www.youtube.com/watch?v=ZWucNQawpWY
– https://www.youtube.com/watch?v=20N53khArXA
– https://www.youtube.com/watch?v=RWJSC1HU32c
– https://www.youtube.com/watch?v=dk7cXdjX2Ys
https://www.interaction-design.org/literature/article/visual-mapping-the-elements-of-information-visualization
https://www.interaction-design.org/literature/article/the-properties-of-human-memory-and-their-importance-for-information-visualization
https://fastercapital.com/content/Visualization-Techniques--Visual-Encoding--Translating-Data-into-Visual-Language.html
https://www.edocr.com/v/631d1wpb/jgzheng/SCOPeS
https://www.interaction-design.org/literature/topics/gestalt-principles
https://www.webfx.com/blog/web-design/data-visualization-gestalt-laws/
Key Readings and Resources
• Visualization process
– Visual Mapping – The Elements of Information Visualization:
https://www.interaction-design.org/literature/article/visual-mapping-the-
elements-of-information-visualization
– The Properties of Human Memory and Their Importance for Information
Visualization: https://www.interaction-design.org/literature/article/the-
properties-of-human-memory-and-their-importance-for-information-
visualization
• Visual Variables
– Visualization Techniques: Visual Encoding: Translating Data into Visual
Language https://fastercapital.com/content/Visualization-Techniques--
Visual-Encoding--Translating-Data-into-Visual-Language.html
– Visual Encoding with SCOPeS Visual Variables/Properties
https://www.edocr.com/v/631d1wpb/jgzheng/SCOPeS
• Gestalt principles:
– The Gestalt Principles https://www.interaction-
design.org/literature/topics/gestalt-principles (with video)
– How to Make Data Visualization Better with Gestalt Laws
https://www.webfx.com/blog/web-design/data-visualization-gestalt-laws/
https://www.perceptualedge.com/articles/ie/visual_perception.pdf
https://www.csc2.ncsu.edu/faculty/healey/PP/
https://www.youtube.com/watch?v=GVkXbQOzKNs
https://en.wikipedia.org/wiki/Visual_thinking
https://en.wikipedia.org/wiki/Structural_information_theory
http://fellinlovewithdata.com/guides/7-classic-foundational-vis-papers
http://www.users.totalise.co.uk/~kbroom/Lectures/3gs.htm
https://www.researchgate.net/publication/220691172_Readings_in_Information_Visualization_Using_Vision_To_Think
https://www.coursera.org/lecture/dataviz-design/the-human-brain-and-data-visualization-X9lVx
https://www.coursera.org/lecture/dataviz-design/cognitive-vs-perceptual-design-distinction-gulX3
https://www.coursera.org/lecture/dataviz-design/principles-of-visual-perception-TW6DT
https://www.coursera.org/lecture/dataviz-design/strategic-use-of-contrast-sDV6C
https://www.coursera.org/lecture/dataviz-design/pre-attentive-attributes-of-visualizations-GkLfQ
https://www.coursera.org/lecture/dataviz-design/color-as-a-pre-attentive-attribute-cdYqI
Additional Good Resources
• Perception
– Tapping the Power of Visual Perception by Stephen Few
https://www.perceptualedge.com/articles/ie/visual_perception.pdf
– Perception in Visualization: https://www.csc2.ncsu.edu/faculty/healey/PP/
• Data Visualisation - A Game of Decisions with Andy Kirk
https://www.youtube.com/watch?v=GVkXbQOzKNs
• Other relevant visual processing concepts and theories
– https://en.wikipedia.org/wiki/Visual_thinking
– https://en.wikipedia.org/wiki/Structural_information_theory
– http://fellinlovewithdata.com/guides/7-classic-foundational-vis-papers
– http://www.users.totalise.co.uk/~kbroom/Lectures/3gs.htm
– Card, Mackinlay, and Sheniederman, “Readings in Information Visualization: Using Vision to Think”
https://www.researchgate.net/publication/220691172_Readings_in_Information_Visualization_Using_Visi
on_To_Think
• Video lessons on concepts (from Coursera by University of California, Davis)
– Week 1
•
https://www.coursera.org/lecture/dataviz-design/the-human-brain-and-data-visualization-X9lVx
•
https://www.coursera.org/lecture/dataviz-design/cognitive-vs-perceptual-design-distinction-gulX3
– Week 2
•
https://www.coursera.org/lecture/dataviz-design/principles-of-visual-perception-TW6DT
•
https://www.coursera.org/lecture/dataviz-design/strategic-use-of-contrast-sDV6C
•
https://www.coursera.org/lecture/dataviz-design/pre-attentive-attributes-of-visualizations-GkLfQ
•
https://www.coursera.org/lecture/dataviz-design/color-as-a-pre-attentive-attribute-cdYqI