visual interactivity

An overview of data visualization interactivity in IT 7113 at Kennesaw State University - updated in 2023.
About Jack Zheng

Faculty of IT at Kennesaw.edu
visualization interactive data visual interaction user interaction data visualization visual interact http www view Select Data Level Zoom detail view switch http finviz
An overview of data visualization interactivity in IT 7113 at Kennesaw State University - updated in 2023.
About Jack Zheng

Faculty of IT at Kennesaw.edu
visualization interactive data visual interaction user interaction data visualization visual interact http www view Select Data Level Zoom detail view switch http finviz
Interactivity in Data Visualization
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2023
https://www.edocr.com/v/l0pp3ral/jgzheng/visual-interactivity
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
A key feature of data visualization is the 
interactive exploration and analysis of 
data and visualizations.
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.
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:
 Selection
 Highlighting
 Zooming
 View switching (including toggle)
Select
• 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)
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
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
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.
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/
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.
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. 
It can also display visualizations that are not 
necessary to appear 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.
View Switch Cases
• Switch between table, chart, or map view
– https://www.federalreserve.gov/releases/z1/dataviz/z
1/balance_sheet/chart/
– https://www.federalreserve.gov/releases/z1/dataviz/h
ousehold_debt/state/map/
• Switching between summary view and detail view
• View change by aggregation levels (drill down)
• Dynamic view change by setting changes, 
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
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.
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/
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.
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
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.
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/
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.
Advanced Zooming Technique
• Multi-level zooming
– Multiple zoom levels like Google Maps
• Dynamic cluster or clustered points
– Dynamic cluster map: dynamically cluster higher 
concentrated locations into clusters.
– Example:
• https://www.arcgis.com/apps/Cascade/index.html?ap
pid=4eff1f0e80344639b918cbd99b8523ff
• Zillow, redfin
Counterexample
• https://www.trueup.io/layoffs
– The visual does not provide a zoom-in feature. It 
is difficult to see smaller parts.
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
28
Side-by-Side Display
• An alternative is to display the details 
in an area to the side (or top/beneath). 
• This area will always be displayed. 
– It is useful if the details need to be 
frequently referred to.
– But at the same time, it takes more 
screen space. 
https://www.tableau.com/ab
out/blog/2020/9/virtual-
gartner-bi-bake-analytics-
anyone-anywhere-any-data
Details are display 
on top.
Click-Through
• Click-through usually leads to another page/report 
upon clicks. 
•
It can be used together with pop-up/tool-tip or inline 
expansion to show even more details.
Pop-up first, then 
click through.
In-line expansion, 
then click through.
VISM 2.0
• The claimed 2.0 version enriches the linear 
model of the original VISM.
• One important addition is the “relate” task 
that provides additional interactivity to 
enable multi-views or view-switch at/across 
all three levels, especially at details levels.
• Example
– https://www.productchart.com/smartphones/
Extended reading:
https://www.iiis.org/CDs2016/CD
2016Spring/papers/ZA490ND.pdf
view switching 
is also here
Details in an 
overlay pop-up
Details in another 
comparison view
More details in 
another page
Details comparison 
page (relate)
VISM Case Study https://finviz.com/bubbles.ashx
Overview: big picture 
with all stocks.
Zoom and Filter: 3 filters are 
applied: sector, income range, and 
sales range. The view is zoomed in 
with only 5 companies left.
Details on Demand: 
• Hovering (tooltip) “CVX” and more 
details will be displayed in a floating 
panel.
• Double-clicking will offer click-through 
to a better expanded view of a stock on 
another page.
More settings and 
filters on the side
Hovering the sector 
label will highlight the 
stocks in this sector
Case Study and Exercise
• Apply VISM and improve the following chart
– And other related layoff trackers
https://www.trueup.io/layoffs
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?
Key Readings
• Interactive Dashboards: 
http://www.datapine.com/blog/interactive-
dashboard-features/
• 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
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