Introduction to
Interactivity
Amy Zhang
Department of Informatics, University of Bergen
[Link]@[Link]
DIGI118 Høst / Autumn 2025
For effective and expressive encoding…
• Arrange tables
using spatial
position and region
• Four design choices
• Express values
• Separate, order,
align regions
• Axis orientation
• Layout density
Basic charts for tabular data
Interactivity
To engage!
Manage complexity of data,
On-the-fly hypothesis testing,
To record/trace our activities...
👀
Visualization
Show the user!
Visual Data Science
Interaction
Tell the computer!
📋
Questions for Module 3
1. How can interaction facilitate an
iterative, visual conversation with
out data?
2. What types of charts can different
combinations of marks and
channels produce?
Next video: Beyond basic charts
Beyond
Basic Charts
Amy Zhang
Department of Informatics, University of Bergen
[Link]@[Link]
DIGI118 Høst / Autumn 2025
Recall: Tabular data visualization
Effective and expressive encoding
• Arrange tables
using spatial
position and region:
• Express values
• Separate, order, align
regions
• Axis orientation
• Layout density
Histogram
Age distribution on the Titanic
Data: 1 quantitative attribute with
derived key (bin) and value (count/bin)
Mark: line
Channel:
• Position (derived key)
• Length/area
(encode numerical attribute)
Task: Attribute distribution/extrema
Scalability: Discretize to dozens,
hundreds of bins
T. Munzner, Visualization Analysis and Design (CRC Press, 2014), Chp 13
Histogram
Different size
Data: 1 quantitative attribute with Length Area
derived key (bin) and value (count/bin)
Mark: line
Channel:
?
• Position (derived key)
• Length/area
(encode numerical attribute)
*Bin size matters!
Affects how visualization is read Equal size = Length or Area
Population =
[12, 13, 14,
24, 22, 27,
31, 39, 36,
T. Munzner, Visualization Analysis and Design (CRC Press, 2014), Chp 13 51, 52, 53, 54, 55, 56, 57, 58, 59]
Histogram
Age distribution on the Titanic
Data: 1 quantitative attribute with
derived key (bin) and value (count/bin)
Mark: line
Channel:
• Position (derived key)
• Length/area
(encode numerical attribute)
[Link](df).mark_bar().encode(
alt.X(“Age”, bin=True),
*Binalt.Y(“count()”)
size matters!
Affects
) how visualization is read
T. Munzner, Visualization Analysis and Design (CRC Press, 2014), Chp 13
Radial Polar Area Charts
Data: 1 categorical key attribute,
1 quantitative value attribute
Mark: Area
Channels: Length, Color
Task: part-to-whole judgements
Scalability: 2-4 categories
[Link]
Stacked Bar Chart
Secondary key
Data: 2 categorical keys, 1 quantitative
value
Mark: vertical stack of line marks Not aligned on
common axis
Channels
• length
• color (hue)
• spatial regions (one per stacked bar) Aligned on
common axis
Task: Lookup, part-to-whole, find trends
Scalability: Same as regular for primary
key, stacking key more limited (up to one
dozen)
Primary key
Normalized Stacked
Bar Chart
• Stacked bar chart
normalized to full
vertical height
• Comparisons
between
subgroups easier
Streamgraph
2 keys, 1 value
Data: multidimensional table with 1 ordered
key (time), 1 categorical key (tracked entity),
1 quantitative value (counts)
Derived data: quant. attribute to order layers
Mark: Area
Channels: Position, Color (hue)
Task: Lookup, part-whole, find trends
Scalability: hundreds of key on main axis,
keys of tracked entity dozens-hundreds
[Link]
Heatmap
2 keys, 1 value
Data: 2 categorical keys, 1 quantitative
value
Marks: Area
Channels: 2D matrix alignment of
marks, Color by quantitative attribute
Task: find clusters, outliers, summarize
Scalability: 1K categorical levels, 1M
items; only 3-11 color bins
Scatterplot Matrix (SPLOM)
• Matrix of scatterplots
• Many keys and values
• Usually show only upper
or lower triangle (avoid
redundancy)
• Scalability
• one dozen attributes
• dozens to hundreds of
items
SPLOM vs Parallel Coordinates
Parallel sets
• Extends parallel
coordinates for
categorical data
• Frequencies of
categories and
relations
• Line-sets are
uniform length,
adding up to 100%
Bendix, Kosara, & Hauser 2005
Arranging
networks
and trees
• Network = graph
• Show relationships
between elements (nodes)
• Nodes and links can also
have attributes
Force-Directed Node-Link Diagram
• Simulate physical forces such as
charge repulsion and edge constraints
• Arrange network data in an organic
and aesthetic way
• Multiple libraries enable
implementation e.g., D3, Plotly, but
not Vega-Altair :(
• Can be computationally expensive
(may require optimization)
• Can become ‘stuck’ in sub-optimal
arrangements
Adjacency Matrix
• Strengths
• Great for dense graphs
• Visually scales well
• Identify clusters
• Limitations
• Abstract visuals
• Hard to follow paths
Enclosure: Treemaps
• Enclosure = hierarchy
• Fill space based on a size
metric for nodes
• Usually rectangles, but
other possible shapes are
squares, circles, Voronoi
Visualization Techniques for Hierarchical Data
[Link]
Words as Nominal Data
• High dimensional (10,000+)
• Words have meanings and relations!
• Correlations: Norway, Bergen, Hardangervidda
• Order: April, February, January, June, March, May
• Membership: Tennis, Running, Swimming, Hiking, Piano
• And more: Hierarchy, antonyms & synonyms, entities, …
Word Cloud
Word frequency
• Visualizes the number
of words (word count /
frequency)
• Encodes frequency
with size and color
saturation
• ‘Bag of words’ ignores
order and context
Word Trees
Word frequency
in context
• Keeps word
order and
context
• Similar to tree
network diagram
• Encodes word
frequency to size
Wattenberg et al.
[Link]
Visualization Techniques for Textual Data
[Link]
Recall: Fields
• A field contains attribute values associated
with cells
• Each cell contains one or more measurements
or calculations from a continuous domain
• Scalar - 1 attribute per cell e.g., temperature
• Vector - 2 or more attributes per cell e.g.,
wind direction, wind magnitude
• Cells are sampled to a grid of discrete
positions
2D Scalar Field
Data: Scalar eld
Mark: Area (separate and align on
grid discretized from eld)
Channel:
• Color by quantitative attribute
(colormap makes a di erence!)
• Position for the underlying grid
Tasks: nd outliers, patterns,
trends (esp with time)
gridded/xarray_cartopy_demo.py
fi
fi
fi
ff
3D Scalar Field
Data with 3D position (x, y, z)
encoded to one visual attribute
Examples
• 3D isosurfaces
• Volume rendering
[Link]
2D Vector Field
• Hedgehog Plot: Direct visualization of the
ow vectors on a grid
• Normalized arrows vs. scaling with velocity
• Sometimes limited expressivity
(missing a temporal component)
• Can work well in 2D, but 3D is more
problematic
• May be combined with other methods
fl
3D Vector Field
• Geometric ow visualization:
Derived geometric data from
original eld
• Extract geometric structures that
re ect ow characteristics, e.g.,
• Stream line, -ribbon, -surface
• Pathlines, streaklines, timelines, etc.
McLoughlin et al. 13
fl
fl
fi
fl
Summary
Beyond basic charts
Tables: Histogram, Stacked charts, Heatmap,
Scatterplot matrix, Parallel sets
Networks: Node-link diagram, Adjacency matrix,
Enclosure diagram e.g., Treemaps
Text: Word Cloud, Word Trees
Fields: 2D scalar, 3D scalar, 2D vector (hedgehog
plot), 3D vector (flow visualization)
Next video: Visualizing maps
Visualizing Maps
Amy Zhang
Department of Informatics, University of Bergen
[Link]@[Link]
DIGI118 Høst / Autumn 2025
Recall: Geometry
• Information of item shapes with
explicit spatial positions
• Key task: Shape identification
• Can be hierarchical at multiple scales
• e.g., geographic dataset with local,
regional, national, global info
• Geometry data often overlaid with
other information
Planetary movements as cyclic inclinations over time
Unknown astronomer, sometime in the 10th century
Cartography
• Cartography = earliest
seeds of visualization
• First modern
cartographic atlas in
1570 (Teatrum Orbis
Terrarum by Abraham
Ortelius)
Chen, C. H., Härdle, W., Unwin, A., & Friendly, M. (2008). A brief history of data visualization. Handbook of data visualization, 15-56.
Geometry
Cartographic projection
• Earth’s spherical coordinate
system: lat, lon
• coordinates are basic element latitude
of geometry data
• lon, lat -> x, y coordinates (align
with math notation)
• Position: array of coordinates in
order longitude
[Link]
Src : David Grellscheid, UiB
Geometry
Cartographic projection
• All map projections produce some sort
of surface distortion
• What do you care about showing?
• Considerations:
• Area
• Bearing
• Distance
• Shape
Cylindrical
Projections
Conic
Projections
Azimuthal
Projections
[Link]
Chloropleth Map
Data: Spatial coordinates with one
numerical value per coordinate region
Mark: Area
Channel: Color (sequential continuous
map usually ideal)
Task: Understand spatial relationships,
identify and compare magnitudes (similar
idea to heatmaps) Unemployment rates by county
Scalability: tens to hundreds of items
T. Munzner, Visualization Analysis and Design (CRC Press, 2014), Chp 9
[Link]
Chloropleth Map
Issues
• Spurious correlations
• can be resolved by
normalising, e.g. incidence
per 100 persons
• Large regions emphasized
when they perhaps should
not have done so
Symbol Maps
• Symbol represents
aggregated data
[Link]
• Retain spatial
positions in
background (context)
• Avoids some of issues
with chloropleth idiom
Hexbin Maps Is the northern
bit of Scotland
really that
• Spatially aggregates influential?
data into cells of
uniform size e.g.,
by population Where are all of
the Londoners?
• Encode categories
with color
[Link]
Summary
Visualizing maps
Geometry dataset specifies information about
the shape of items with explicit spatial positions
Cartography: most historic areas of visualization
Any cartographic projection will distort — you
decide which feature (area, bearing, distance,
shape) to preserve
Issues with chloropleth maps include spurious
correlations and emphasized large regions
Next video: Interactivity - Basics
Interactivity: Basics
Amy Zhang
Department of Informatics, University of Bergen
[Link]@[Link]
DIGI118 Høst / Autumn 2025
Visual design idiom
What does it look
like?
How encode
Interaction idiom
How do I
manipulate it?
Why interactivity?
To engage!
Manage complexity of data...
On-the-fly hypothesis testing...
To record/trace our activities...
Efficiency
Principle
“The gains from using an interactive visual
approach should outweigh the
computational resources and human
effort necessary to carry out the analysis.”
Interactive Visual Data Analysis
Tominski & Schumann 2020
Shneiderman’s
Visual Information-
Seeking Mantra
Overview first,
zoom and filter,
details on demand
The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations, Shneiderman 1996
Taxonomy of interactions
Heer & Shneiderman 2012
1. Data and View Specification
Visualize, Filter, Sort, Derive
2. View Manipulation
Select, Navigate, Coordinate, Organize
3. Process and Provenance
Record, Annotate, Share, Guide
Heer and Shneiderman 2012
Data and view specification
• Visualize
• Filter
• Sort
• Derive
Heer and Shneiderman 2012
Data and view specification
Visualize: Embed attributes
58
Data and view specification
Visualize: Embed attributes
[Link](df).mark_bar().encode(
alt.X(“Age:Q”),
alt.Y(“count():Q”),
color = “Class:N”,
tooltip = [“Age:Q”, “Class:N”, “count():Q”]
)
59
Data and view specification
Filter: Reduce items
60
Data and view specification
Sort: Reorder and regroup items
[Link]
61
Data and view specification
Sort: Reorder and regroup items
[Link](df).mark_bar().encode(
alt.X(“State:N”).sort(“ascending”),
alt.Y(“Population:Q”)
)
[Link]
62
Data and view specification
Aggregate: items
Application of edge bundling on maps
Source: Holten et al. 2009. Force-Directed Edge Bundling for Graph Visualization.
63
Data and view specification
Aggregate: items
Application of edge bundling on maps
Source: Holten et al. 2009. Force-Directed Edge Bundling for Graph Visualization.
64
Data and view specification
Aggregate: dimensions
Garrison, L., Müller, J., Schreiber, S., Oeltze-Jafra, S., Hauser, H., & Bruckner, S. (2021). Dimlift: Interactive hierarchical data
exploration through dimensional bundling. IEEE Transactions on Visualization
65 and Computer Graphics, 27(6), 2908-2922.
View manipulation
• Select
• Navigate
• Coordinate
• Organize
Munzner, Visualization Analysis and Design 2014, Fig 12.4
Heer and Shneiderman 2012
View manipulation
Select: items
67
View Manipulation
Navigate: Zoom and Pan
View Manipulation
Navigate: Zoom and Pan
[Link](df).mark_bar().encode(
alt.X(“Age:Q”),
alt.Y(“count():Q”),
color = “Class:N”
).interactive()
View Manipulation
Navigate: Scroll
View this gorgeously impactful visualization
View manipulation
Changing items over time
71 [Link]
View manipulation
Changing items over time
[Link] 72
Process and Provenance
• Record analysis histories for
revisitation, review, and
sharing
• Annotate patterns to
document findings
• Share views and annotations
to enable collaboration
• Guide users through analysis
tasks or stories
Heer and Shneiderman 2012
A
B C
Liu et al. 2022, web tool here
Summary
Interactivity: Basics
Visual information-seeking mantra: “Overview
first, zoom and filter, details on demand”
Interaction taxonomy:
• Data and View Specification
• View Manipulation
• Process and Provenance
Next video: Interactivity - Multi-chart
Interactivity: Multi-Chart
Amy Zhang
Department of Informatics, University of Bergen
[Link]@[Link]
DIGI118 Høst / Autumn 2025
Taxonomy of interactions
Heer & Shneiderman 2012
Share data and view
1. Data and View Specification specifications across
Visualize, Filter, Sort, Derive multiple charts
2. View Manipulation Coordinate and
Select, Navigate, Coordinate, Organize organize views across
multiple charts
3. Process and Provenance
Record, Annotate, Share, Guide
Heer and Shneiderman 2012
View Manipulation
Coordinate and Organize: Multiple Views
• Faceting: a separation of information into
different views
• Why facet? Eyes > memory
• Approaches
• Place side by side (juxtapose/partition)
• Layer on top of (superimpose)
Visualization Analysis and Design, Munzner 2014
Juxtaposed views
Side by side (can be same/subset/totally different data)
(titanic dataset)
(Palmer penguins dataset)
Superimposed
views
Google Maps layers
View manipulation
Shared interactions
Visualization Analysis and Design, Munzner 2014
Linked Highlighting
Brushing + Linking
Cross filtering
Laura Garrison - Protein Beasts
Shared Navigation
Scatterplot matrix with linked
navigation interactions
Interaction Caveats!
• Interaction costs time
• Cognitive load?
• Users may not interact with your visualization in
the way that you hope/at all (90%?!?! – Aisch 2016)
• Controls vs “invisible” functionality
86
Summary
Interactivity: Multi-chart
Fundamental interaction techniques:
• Coordination through juxtaposed and
superimposed views, shared interactions
Good visualizations are task-dependent
• Choose the right interaction technique
• Consider the semantics of the data domain
Next video: Visual data science
Visual Data Science
Amy Zhang
Department of Informatics, University of Bergen
[Link]@[Link]
DIGI118 Høst / Autumn 2025
Interaction and layout
approaches more important
with increasing scale
Visualization Analysis and Design, Munzner 2014
Layouts/encodings to
manage scale
Interaction and analysis
approaches with increasing scale
Visualization Analysis and Design, Munzner 2014
Data Science
Extract knowledge and insights
from data, often using advanced
analytics methods from:
• Mathematics
• Statistics
• Algorithms
• Machine learning Src: Kiranshastry - Flaticon
Dhar, V. (2013). Data science and prediction. Communications of the ACM, 56(12), 64-73.
Visual Data Science
…combines the design of visualizations,
interactions and computational methods
to enable an effective combination of
human and machine capabilities to
facilitate data-intensive problem solving.
—Catagay Turkay
Why visual data science?
Visualization can help generate new questions,
especially for ill-defined problems.
What if I remove/adjust
What do my data look like? a parameter?
What are the
Do I trust the
requirements for a
data/model?
more complex model?
Keim, D., Andrienko, G., Fekete, J. D., Görg, C., Kohlhammer, J., & Melançon, G. (2008). Visual analytics: Definition, process, and
challenges. In Information visualization (pp. 154-175). Springer, Berlin, Heidelberg.
Possible Datasets for VDS
Multivariate data
👀
Visualization
Show the user!
Visual Data Science
Interaction
Tell the computer!
📋
Simple Example Histogram of temperatures
Cooling jacket
• Show visual
Simple Example Histogram of temperatures
Cooling jacket
• Show visual
🖌
Brush high temps
• Brush interesting area (>90°[±2°])
Simple Example Histogram of temperatures
Cooling jacket
• Show visual
🖌
Brush high temps
• Brush interesting area (>90°[±2°])
Show linked view
• Show visual (in a linked view)
Focus + context visualization in 3D
Simple Example Histogram of temperatures
Cooling jacket
• Show visual
🖌
Brush high temps
• Brush interesting area (>90°[±2°])
Show linked view
• Show visual (in a linked view)
• Locate relevant features
Locate features 👀
Focus + context visualization in 3D
Simple Example Histogram of temperatures
Cooling jacket
• Show visual
🖌
Brush high temps
• Brush interesting area (>90°[±2°])
Show linked view
• Show visual (in a linked view)
• Locate relevant features
Key interactions for insights:
• Brushing+linking Locate features 👀
• Focus+context Focus + context visualization in 3D
Nested interactive analysis loops
Show
L1
Combine Brush
L2
Attribute Multiple
views
derivation & sets
L3
Adv. brushing
Simple Complex Adv. brush
Layered 🖌 🖌
🖌 🧠
information
Show
L1 temp.
🖌 vel.
norm.
vel.
space Brush
AND OR
Access different L2 SUB […]
levels of information
through interaction
and analytics L3
Attribute derivation
L4 Feature extraction Vortex
Simple
Layered Show
🖌
information L1 temp. vel.
space Brush
Access different L2
levels of information
through interaction
and analytics L3
L4
Simple Complex
Layered Show
🖌 🖌
🖌
information L1 temp. vel.
space Brush
AND OR
Access different L2 SUB […]
levels of information
through interaction
and analytics L3
L4
Simple Complex Adv. brush
Layered 🖌 🖌
🖌 🧠
information
Show
L1 temp.
🖌 vel.
norm.
vel.
space Brush
AND OR
Access different L2 SUB […]
levels of information
through interaction
and analytics L3
Attribute derivation
L4
Simple Complex Adv. brush
Layered 🖌 🖌
🖌 🧠
information
Show
L1 temp.
🖌 vel.
norm.
vel.
space Brush
AND OR
Access different L2 SUB […]
levels of information
through interaction
and analytics L3
Attribute derivation
L4 Feature extraction Vortex
L1: Show & Brush 🖌
Brushing+linking
• Tightest interactive visual
analysis loop
• Show data
(explicitly presented)
• One brush
(1 view, 1+ attributes)
Brush on right view of one parameter range shows
ensembles with this parameter value range
Patterns of brushing
🖌 Local investigation
👀
🖌
👀
Feature localization
L2: Between the lines
Combinations
• Logical combinations of
brushes (AND, OR, SUB)
• Feature definition language
• e.g., in the cooling jacket,
find a region of hot flow,
relatively dry, near a
boundary
L3: Dive Deeper
Attribute derivation
• See some data feature
of interest
• What mechanism from
data science can give
me this (easily)?
• Extract new attribute
through attribute
derivation
• Brush new attribute to Similarity brushing (Muigg et al. 2008)
get feature
L3 Depends on User Goals
What does user want to see? 👀
• Relative values
normalization... These questions/
• Change methods are generic!
derivatives...
• Statistical properties Not application-
averages...
dependent.
• And more!
data mining...
Simple Complex Adv. brush
L4: Application- 🖌 🖌
🖌 🧠
specific feature
extraction
Show
L1 temp.
🖌 vel.
norm.
vel.
Brush
• Interactions become
more specific to AND OR
domain interests L2 SUB […]
and tasks
• Deep drill-down for L3
information Attribute derivation
L4 Feature extraction, e.g.
Blood flow
Vortex
L4 Example: Extract vortices for flow analysis
Systole Diastole Systole
Evaluation of a Semi-Automatic Vortex Flow Classification, Meuschke et al. 2016
Summary
Visual data science
Useful blending of techniques for data
exploration and analysis
General suite of approaches with applications
to many different domains
Brings user cognition/perception into the loop
as opposed to fully automated solutions
Next module: Visualization in practice
Further reading
• Heer, J., & Shneiderman, B. (2012). Interactive dynamics for visual
analysis. Communications of the ACM, 55(4), 45.
• Munzner, T. (2014). Visualization analysis and design. AK Peters Visualization Series,
CRC Press, Visualization Series, Chp 11-14 [web material for book]
• Nature Points of View: Data visualization article collection [online collection]
• Tominski, T., Schumann, H. (2020). Interactive Visual Data Analysis. AK Peters
Visualization Series, CRC Press, Visualization Series.
• Vega-Altair: Declarative Visualization in Python, Interactivity and selections [online
notebook]
Slide acknowledgments: Laura Garrison, Tamara Munzner, Stefan Brukner, Jeffrey Heer