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


https://www.edocr.com/v/rbwy63w1/jgzheng/vism-in-dashboard-design

Visual Information Seeking Mantra
in Dashboard Design
IT 7113 Data Visualization
http://idi.kennesaw.edu/it7113/
J.G. Zheng
Fall 2024
https://www.edocr.com/v/rbwy63w1/jgzheng/vism-in-dashboard-design
Overview
• visual information seeking mantra: concepts
and applications in data visualizations and
dashboards
A key feature of data visualization is the
interactive exploration and analysis of
data and visualizations.

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.
3
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
Notes
• VISM is an interactive process of information
seeking behaviors
– It is a general design best practice for visual designs
– It can also be applied to interactive dashboard
design
• VISM is a high-level best practice, not a
universal standard
• Use cases
– Exploring large number of data items
– Exploring data that have complex hierarchy or
relationships

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/

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/s
earch-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.

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://www.arcgis.com/apps/Cascade/index.html?appid=4eff1f0e80344639b918cbd99b8523ff


https://blog.mapbox.com/clustering-millions-of-points-on-a-map-with-supercluster-272046ec5c97

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
• https://blog.mapbox.com/clustering-millions-of-points-
on-a-map-with-supercluster-272046ec5c97
• Zillow, redfin

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

Filtering
•
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.
Filtering through 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

https://www.tableau.com/data-insights/dashboard-showcase/explore-nationwide-us-census-engagement

Map-based Selection/Filter
• Selection of state on a map, instead of a
dropdown list
– https://www.tableau.com/data-
insights/dashboard-showcase/explore-
nationwide-us-census-engagement

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
• 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
16
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.

https://finviz.com/bubbles.ashx


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


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

View Switch Cases
• Switch between table, chart, or map view
• 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)

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

Overlay
• Details or extras are displayed in the same
place covering the original view
– using various view switching techniques
https://www.datapine.com/blog/interactive-dashboard-features/
The clicking one
“channel” will bring in the
“country” view (extras)

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 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/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.
• 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.

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

More complicated tooltips
• Show rich info in tooltips
– Finviz.com
• Or even a sub page/dashboard
– https://www.productchart.com/smartphones/

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

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.
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.
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.

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


https://www.iiis.org/CDs2016/CD2016Spring/papers/ZA490ND.pdf

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
here
Details in an
overlay pop-up
Details in another
comparison view
More details in
another page
Details
comparison page
Relate Examples
• Comparison between peers
– Listing of details
• Comparison: individual to overview, or to
some benchmarking
– Highlight of differences
• Ranking

https://finviz.com/bubbles.ashx

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

https://www.trueup.io/layoffs

Case Study and Exercise
• Apply VISM and improve the following chart
– And other related layoff trackers
https://www.trueup.io/layoffs

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

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

Key Readings
• 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/T
R_96-66.pdf

http://drum.lib.umd.edu/bitstream/1903/5784/1/TR_96-66.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
• 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
• 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