http://idi.kennesaw.edu/it7113/


https://www.edocr.com/v/l0pp3ral/jgzheng/visual-interactivity

Designing Interactivity in
Data Visualization
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2024
https://www.edocr.com/v/l0pp3ral/jgzheng/visual-interactivity

https://www.edocr.com/v/rbwy63w1/

Overview
• What is interactivity, exactly?
• What are the three levels of interactivity support and
their features in data visualization and dashboard?
• Visual Information Seeking Mantra: concepts and
applications in interactive data visualizations and
dashboards
– For a more detail lecture see
https://www.edocr.com/v/rbwy63w1/
A key feature of data visualization is the
interactive exploration and analysis of
data and visualizations.

https://www.slideshare.net/tillnagel/nagel-unfolding-thecityworkshops

Interactivity (in Data Visualization)
•
Interactivity is the functionality provided by the (visualization)
system/application to let users interact with the visualization or
the system/application through a user interface.
• So, the visualization itself becomes dynamic based on user
actions, providing different views of data.
• The overall analytical or reporting application can also become
interactive and support more user needs.
Image from https://www.slideshare.net/tillnagel/nagel-unfolding-thecityworkshops
Interactivity in the Visual Exploration and
Analytics Process
•
Interaction is a general feature in computing systems and
applications. It is a process that users and systems can
“work together”.
•
Interactivity is an important aspect of data exploration
and analysis, as both are interactive processes.
– Interactivity can also support other analytics tasks like data
preparation, data cleanse, model training, etc.
• Visual interactivity focuses on the interactions in various
forms of data visualizations (charts, maps, dashboards,
etc.)
•
Interactivity is essential in visual analytics where
discoveries are driven by intensive interactions with
visualizations.

http://www.dataversity.net/fact-fiction-smart-data-visualization-tells-tale/

Why Interactive?
• Enable multiple perspectives
–
“Static visuals can offer only pre-composed “views” of data, so multiple static views are needed to
present a variety of perspectives on the same information. A fixed image is ideal when alternate views
are neither needed nor desired, and required when publishing to a static medium, such as print.” -
Quotes from chapter 1 of the book “Interactive Data Visualization for the Web” by Scott Murray.
• Reduce complexity
– The number of views can grow significantly in many cases because of the multi-dimensionality of the
data. Presenting all of them is impossible. Even presenting multiple of them maybe cluttered and
crowded.
–
Interactivity enables a more prioritized and focused view in a limited space.
• Ease cognitive load
– The number of items and data presented at one time may be too much and overwhelming for a user;
interaction features can help user focus.
• Enables customization and exploration
– Dynamic, interactive visualizations can empower people to explore the data themselves with their own
intentions and paths.
• Encourage engagement with the data
– With animated transitions and well-crafted interfaces, some visualizations can make exploring data feel
more like playing a game or telling a story. Interactive visualization can be a great medium for engaging
an audience who might not otherwise care about the topic or data at hand.
– Make visualizations smart or tell a story: http://www.dataversity.net/fact-fiction-smart-data-visualization-
tells-tale/
Three Levels of Interactivity Capabilities
• How exactly are interactions designed? We can view
interactivity at three levels
Level
Description
Examples
Lower level:
UI system
Interaction is an operational feature provided by
the underlying system. These are usually
determined by the hardware (and some system
software part). Most of these interactions are
generic and available to all applications.
• Mouse and keyboard actions: click, drag,
drop, hover, scrolling, etc.
•
Touch oriented: tap, swipe, pinch, etc.
•
Touch gestures
• VR controls
• Hand gesture
Mid-level:
sensory
enhancement
Interaction supports the general purpose of
sensory enhancement to ease the cognitive load.
These are the most generic and fundamental
interaction actions to many types of information
use tasks.
Most of these are supported by software
applications.
• Select
• Highlight
•
Zoom
• View switch
•
Toggle
Higher level:
application/task
support
Interactivity directly supports a user-centered
process toward a goal (such as decision making).
They are very task oriented. These are more
complex tasks and usually consist of multiple
steps and interaction features from the other two
levels.
• Visual information seeking (exploration)
• Searching, browsing, navigation
• Multidimensional analysis
• What-if analysis, parameter setting
• Story-telling
• Other analytical activities: compare,
forecast, etc.
Focus of this
module
We will cover
this particular
technique in this
module.
We do not focus on
the lower level of
interaction capability
in this class.
We do not focus on the
higher-level interaction
capability, as each one could
be a special topic. We only
study one of them in this
module. Students may choose
a research project.
Mid-level Interaction Types
• Many mid-level interaction supports the general purpose of sensory
enhancement to ease the cognition load.
– These are the most generic and fundamental interaction actions.
– Many mid-level interactions are focused on attention shifting.
• Major purposes of interaction at this level
– Data manipulation/adjustment: affecting data scope and perspectives, as
well as metric values and results.
– Presentation adjustment: directly affecting the visual effects.
Common mid-level interaction action types used in data visualization:
1. Selection
2. Highlighting
3. Zooming
4. View switching (including toggle)
1. Selection
• Selection is the action to select choices from
a list, or to select objects and elements on a
visualization
– Selection is usually the first step toward follow-
up actions or interactions, such as highlight,
filtering, viewing details, etc.
• Selection techniques
– Point selection
– 1D range selection
– 2D area selection (selecting an area directly on
a chart or map)

http://91-divoc.com/pages/covid-visualization/


https://www.tableau.com/about/blog/2020/9/virtual-gartner-bi-bake-analytics-anyone-anywhere-any-data

Point Selection
• Single point selection
– Selection of a single point or value
– Example: http://91-
divoc.com/pages/covid-visualization/
(selecting a single point for more details)
• Multi-point selection
– Multiple points are selected
– See example on the right
• Selection can be done using
– traditional UI controls (dropdown, radio
button, checkbox, etc.) or
– clicking/hovering directly on the visual.
Example of two-point
selection by simple hovering
(animated GIF)
https://www.tableau.com/ab
out/blog/2020/9/virtual-
gartner-bi-bake-analytics-
anyone-anywhere-any-data

https://finviz.com/bubbles.ashx

Range Selection
• 1D range selection
– A range of values are
selected: price range,
date range, etc.
– Sliders are often used
• 2D area selection
(selecting an area
directly on a chart or
map)
– Shaped region:
rectangular, circle, etc.
– Connected lines or
polygon: connecting
multiple points
– Freehand (lasso):
zillow.com
https://finviz.com/bubbles.ashx (range sliders on the right side and
top)
Tableau’s built-in support for rectangle area selection

http://graphics.wsj.com/avengers-team/

2. Highlight
• Highlighting (in interaction) is a temporary visual feedback to user selection by changing visual
properties like color, texture, size, etc. It draws user attention toward the highlighted items.
• Preattentive attributes and gestalt principles are used to create the grouping and distinction of
highlighted elements or areas.
– Color contrast, order of data items, association (linkeage) between objects, etc.
• Highlighting is commonly activated by
– mouse hover (temporary)
–
specific click, tap, or hold-and-drag (explicit)
http://graphics.wsj.com/avengers-team/
Mouse hover changes
the column color and
texture style.
Mouse hover highlights
the row and column
reference in gray.

https://finviz.com/bubbles.ashx


https://finviz.com/map.ashx


https://googletrends.github.io/search-election-election-night/


https://finviz.com/map.ashx


https://googletrends.github.io/search-election-election-night/

3. Zooming
• Zooming (in and out) is an interaction technique of shifting focus at different
levels (e.g., overview level, details level) of a visualization
• Various zooming designs
– External (outside the visuals) zooming controls: buttons/sliders
https://finviz.com/bubbles.ashx
– Mouse scroll on top of the visual: https://finviz.com/map.ashx
– Mouse click in the visual https://googletrends.github.io/search-election-election-night/
– Direct “select-to-zoom” on the visualization (Tableau, Datapine)
• Design practices: provide more than one zooming techniques.
https://finviz.com/map.ashx (mouse scroll and external controls)
Click-to-zoom: one click to zoom
in and another to zoom out.
https://googletrends.github.io/sea
rch-election-election-night/

https://finviz.com/map.ashx

View Browsing via Panning/Scrolling
• View browsing is the movement of a partial view region (like a zoomed-in area) in the complete
visualization.
– Often used together with zoom-in.
• Usually used for visualizations with a lot of elements that could not show details if presented all
at once in one screen.
•
This kind of interaction allows user to focus on part of the visualization/report at a detailed level.
And move to other parts by moving the viewport window (through panning or scrolling).
• Example
– https://finviz.com/map.ashx (drag to move after zooming in)
Click the button
to zoom in.
Drag the view window
(panning) to view other
parts of complete map.
4. View Switching
• View switching is a broad category of interactivity that features
visualization change (overwritten) upon request
– The new (updated or alternate) visualizations will replace the current one
• View switching can save screen space in dashboard by offering more
visuals in the same region.
•
It can display visualizations that are not necessary to appear at the
same time.
•
It may add memory load as users do not see content at the same time.
This is a common tab
design for static view
switch: each tab shows a
different visualization. Tabs
provide view switching and
save screen space.

https://www.federalreserve.gov/releases/z1/dataviz/z1/balance_sheet/chart/


https://www.federalreserve.gov/releases/z1/dataviz/household_debt/state/map/


https://finviz.com/bubbles.ashx


https://www.datapine.com/blog/interactive-dashboard-features/


https://www.datapine.com/blog/interactive-dashboard-features/

View Switching Cases
• Switching between table, chart, or map view
– https://www.federalreserve.gov/releases/z1/dataviz/z1/
balance_sheet/chart/
– https://www.federalreserve.gov/releases/z1/dataviz/ho
usehold_debt/state/map/
• Switching between summary view and detail view
– Between various detail levels (drill up/down)
• Switching based on settings, including parameters,
metrics, or dimensions, and other properties
– https://finviz.com/bubbles.ashx
A toggle button to
show/hide more rows.
Dynamic switching:
based on the selection of
date aggregation level.
https://www.datapine.com/blog/interactive-dashboard-features/
https://www.datapine.com/blog/interactive-dashboard-features/
The clicking one “channel”
will bring in the “country”
view (extras)
Toggle
• Toggle is a kind of view switching between
only two views or states
• Toggle can be used to show contents when
needed, but hide them when not needed
• Toggle styles
– Overlay - complete view switch
– Expand/collapse, using button click
– Pop-up, using button click
– Tool tip, using mouse hover

https://www.datapine.com/blog/interactive-dashboard-features/

Overlay
• An alternative view is displayed in the exact
same area covering the original view
– using various view switching techniques like tabs,
in-visual selection, etc.
https://www.datapine.com/blog/interactive-dashboard-features/
Clicking one “channel”
will switch to the
“country” view
In-line Expansion
•
In-line expansion shows the
details right under the chosen
item upon request and will fold or
hide (collapse) when the action
is completed.
• The example on the right shows
in-line expansion of drill down
from the year level to the month
level.
• Drill down is the process to
display lower aggregation level
details.
•
It is usually on demand based on
user’s selection.
Expansion/collapse button to
show/hide lower-level (drill-down)
details by inserting details directly
beneath the current row.

https://www.datapine.com/blog/interactive-dashboard-features/


https://www.datapine.com/blog/interactive-dashboard-features/

Pop-up
• A pop-up is overlaid panel or window over existing user interface without
completely moving away from the current task.
– Extras and details can be displayed in a pop-up when needed, and they are easily closed
when not needed.
– Pop-ups usually covers a large portion of the screen and blocks the underlying UI.
– Pop-ups are usually activated/closed by explicit actions like clicks (rather than mouse
hovering).
• Pop-up example
– https://www.datapine.com/blog/interactive-dashboard-features/ feature 2
https://www.datapine.com/blog/interactive-dashboard-features/

https://finviz.com/bubbles.ashx


https://finviz.com/map.ashx


http://91-divoc.com/pages/covid-visualization/


https://public.tableau.com/app/profile/levy2725/viz/2015-163-and-D-ness/Dashboard1


https://www.datapine.com/blog/interactive-dashboard-features/

Tooltip
•
Tool tip or data tip is the small amount of extra information displayed when user hovers the
mouse on a target object. The showing is temporary and will be dismissed once the mouse
moves out of the object.
– No mouse clicks are required – more efficient exploration.
– Loads fast
– Only interferes with the display for a short time.
– Sometimes tooltips can show more information including another chart https://finviz.com/bubbles.ashx
•
Tooltip Example
– https://finviz.com/map.ashx
– http://91-divoc.com/pages/covid-visualization/
– https://public.tableau.com/app/profile/levy2725/viz/2015-163-and-D-ness/Dashboard1
https://www.datapine.com/blog/int
eractive-dashboard-features/
This is an example of tool-tip
which displays exact
numbers only when the
mouse moves into a column.
This is an example of annotation designed
as a tool-tip, using a in-page pop-up.
Annotation is the extra explanation or
additional information incorporated in the
visual. Normally excessive annotations
interferes with visual presentations, so
using tooltip can hide them until needed.

http://drum.lib.umd.edu/bitstream/1903/5784/1/TR_96-66.pdf


http://www.cc.gatech.edu/~john.stasko/8001/craft05.pdf

Visual Information Seeking Mantra
Visual Information Seeking Mantra is a general design
guideline to design interactive information exploration,
including interactive dashboard design. There are three
steps (views) in the process:
1.
The “Overview” UI component only provides high
level summary information or a complete view of all
data items. Users use overview to identify areas of
interests
2.
Then “Zoom and Filter” provides the next step of
local focused view to examine the area of interests
identified.
3.
“Details on Demand” provides even more details
or additional information, in additional views.
21
References (extended reading):
• Shneiderman, B. (1996, September). The eyes have it: A task by data type taxonomy for information
visualizations. In Visual Languages, 1996. Proceedings., IEEE Symposium on (pp. 336-343).
http://drum.lib.umd.edu/bitstream/1903/5784/1/TR_96-66.pdf
• Craft, B., & Cairns, P. (2005, July). Beyond guidelines: what can we learn from the visual information
seeking mantra?. In Information Visualisation, 2005. Proceedings. Ninth International Conference on (pp.
110-118). IEEE http://www.cc.gatech.edu/~john.stasko/8001/craft05.pdf
Overview
Zoom and
Filter
Details on
Demand

http://www.kasperhornbaek.dk/papers/IJHCS2011_Overview.pdf

Overview
• The “Overview” UI component only provides high level summary
information or a complete view of all data items.
– The overview usually contains a large number of data items, and
some may be aggregated
• Users use overview to
– have a general feel of the complete picture
– Identify high level patterns
–
identify areas of interests
Further reading: the notion of overview in information visualization
http://www.kasperhornbaek.dk/papers/IJHCS2011_Overview.pdf
Zoom and Filter
• Then “Zoom and Filter” provides the next
step of local focused view to examine the
area of interests identified.

https://finviz.com/bubbles.ashx


https://finviz.com/map.ashx


https://googletrends.github.io/search-election-election-night/


https://finviz.com/map.ashx


https://googletrends.github.io/search-election-election-night/

Zoom
• Zooming (in and out) is an interaction technique of shifting focus at different
levels (e.g., overview level, details level) of a visualization
• Various zooming designs
– External (outside the visuals) zooming controls: buttons/sliders
https://finviz.com/bubbles.ashx
– Mouse scroll on top of the visual: https://finviz.com/map.ashx
– Mouse click in the visual https://googletrends.github.io/search-election-election-night/
– Direct “select-to-zoom” on the visualization (Tableau, Datapine)
• Design practices: provide more than one zooming techniques.
https://finviz.com/map.ashx (mouse scroll and external controls)
Click-to-zoom: one click to zoom
in and another to zoom out.
https://googletrends.github.io/sea
rch-election-election-night/

https://finviz.com/bubbles.ashx


https://www.datapine.com/blog/interactive-dashboard-features/


https://www.theguardian.com/uk/interactive/2011/dec/07/london-riots-twitter

Filter
•
Filtering is a way to only include or show items that meet certain conditions, resulting in fewer
items usually.
–
It is similar to selection, and it can be achieved by selection of conditions; but it can also be implemented
based on more dynamic criteria. Filtering can affect how things are presented and calculated.
–
It is similar to zoom-in, but it is applied to data rather than the views.
– A slicer is a kind of filters in multi-dimensional analysis
• Design techniques
– External (outside the visualization) selection/picker controls: radio button, checkbox, slider, selection
buttons https://finviz.com/bubbles.ashx
– Ad hoc filtering based on user’s direct selection
– Condition-based filtering based on attribute value settings
– Direct selection on the visual (like Tableau or DataPine -https://www.datapine.com/blog/interactive-
dashboard-features/ click to filter)
– Visual (chart) filters https://www.theguardian.com/uk/interactive/2011/dec/07/london-riots-twitter
Slider control (outside
the main visual) to filter
items.

https://www.trueup.io/layoffs

Counterexample
• https://www.trueup.io/layoffs
– The visual does not provide a zoom-in feature. It
is difficult to see smaller parts.

https://infovis-wiki.net/wiki/Details_on_demand

Details on Demand
• Details on Demand, or Extras on Demand
– shows detailed or additional data and information with a
specific user action
– https://infovis-wiki.net/wiki/Details_on_demand
• Where/how to show extra/details?
– View switching techniques (see earlier slides on view
switch and toggle)
• Overlay or replacement of the current view
• Inline expansion
• Pop-up/Tooltip: toggle overlay
– Side-by-side: same screen different region (side, bottom)
– Click-through to a second screen/page for detailed table,
charts, report, or another dashboard
27

https://www.recordedfuture.com/information-seeking-mantra/


http://www.b-eye-network.com/view/2674


https://finviz.com/bubbles.ashx


https://www.productchart.com/smartphones/


https://www.nytimes.com/elections/2016/results/president


https://public.tableau.com/app/profile/levy2725/viz/2015-163-and-D-ness/Dashboard1

More VISM Cases and Examples
• The mantra has been used intensively in many
application designs, including data visualization and
dashboard design (others like e-commerce product
catalog, etc.).
• Use cases
– https://www.recordedfuture.com/information-seeking-mantra/
– http://www.b-eye-network.com/view/2674
• Examples
– https://finviz.com/bubbles.ashx
– https://www.productchart.com/smartphones/
– https://www.nytimes.com/elections/2016/results/president
– https://public.tableau.com/app/profile/levy2725/viz/2015-163-
and-D-ness/Dashboard1
Designing Interactivity
• Start from the goals and objectives of overall
visualization, and see how to support them through
interactions
• Defines the issues and problems and see how to address
them through interactivity features
– Interactions particularly address the complexity and
crowdedness issues.
• Understand the capability of software application and
devices, and design the interaction accordingly
– Lower-level device features
– Tool capabilities and complexity
• Common concerns
– How much interactivity do we need?
– Present multi-views at the same time or use view switch?

https://www.gooddata.com/blog/interactive-data-visualization/


https://data.europa.eu/apps/data-visualisation-guide/the-information-seeking-mantra


http://drum.lib.umd.edu/bitstream/1903/5784/1/TR_96-66.pdf


https://openclassrooms.com/en/courses/5873606-create-dashboards-with-tableau/6702916-make-your-dashboard-interactive

Key Readings
•
Interactive Data Visualization
https://www.gooddata.com/blog/interactive-data-
visualization/
• The information seeking mantra
– https://data.europa.eu/apps/data-visualisation-guide/the-
information-seeking-mantra
• Shneiderman, B. (1996). The eyes have it: A task by data
type taxonomy for information visualizations.
http://drum.lib.umd.edu/bitstream/1903/5784/1/TR_96-
66.pdf
• Using actions in Tableau for interactions
https://openclassrooms.com/en/courses/5873606-create-
dashboards-with-tableau/6702916-make-your-
dashboard-interactive

https://queue.acm.org/detail.cfm?id=2146416


http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.94.7908&rep=rep1&type=pdf


http://www.cc.gatech.edu/~john.stasko/8001/craft05.pdf


https://www.cc.gatech.edu/~stasko/7450/Papers/cockburn-surveys08.pdf


http://www.kasperhornbaek.dk/papers/IJHCS2011_Overview.pdf

Additional Good Resources
• Publications
–
Interactive Dynamics for Visual Analysis
https://queue.acm.org/detail.cfm?id=2146416
– Yi et al. (2007) Toward a Deeper Understanding of the Role of Interaction in
Information Visualization,
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.94.7908&rep=rep
1&type=pdf
• More VISM
– Craft, B., & Cairns, P. (2005, July). Beyond guidelines: what can we learn
from the visual information seeking mantra?. In Information Visualisation,
2005. Proceedings. Ninth International Conference on (pp. 110-118). IEEE
http://www.cc.gatech.edu/~john.stasko/8001/craft05.pdf
– A Review of Overview+Detail, Zooming, and Focus+Context Interfaces
https://www.cc.gatech.edu/~stasko/7450/Papers/cockburn-surveys08.pdf
– The notion of overview in information visualization
http://www.kasperhornbaek.dk/papers/IJHCS2011_Overview.pdf