Interface Controls

Function	Key	Gesture	Description
Slide Overview	O		Toggle the Overview of all slides.
Toolbar	T		Toggle the visibility of the toolbar.
All Slides	A		Toggle display of all slides on one page.
First Slide	Home	Shake	Navigate to first slide.
Previous Slide	←, Page Up	Swipe right, Tap/click left margin, Tilt left, Tip left	Navigate to previous slide.
Next Slide	→, Page Down, Space	Swipe left, Tap/click right margin, Tilt right, Tip right	Advance to next slide.
Last Slide	End		Navigate to last slide.
Print Settings	P		Toggle the Print Settings Panel. Print settings are preserved in browser local storage.
Settings	S		Toggle the Settings Panel. Settings are preserved in browser local storage.
Help	H		Toggle the Help Panel.
Table of Contents	C		Toggle the Table of Contents (slide titles).
Decrease Font Size	-		Decrease slide font size. With Shift, decrease interface font size.
Reset Font Size	R		Reset slide font size. With Shift, reset interface font size.
Increase Font Size	+		Increase slide font size. With Shift, increase interface font size.
Jump to Slide	[J] 0-99 Return		Jump to a specific slide.
Close all Panels	Escape		Close all open panels.

Responsive Visualization Patterns and Tools

David Egger
706.424 Seminar/Project Interactive and Visual Information Systems WS 2023
Graz University of Technology

Tue 12 Dec 2023

https://responsive-patterns-and-tools-slides.netlify.app

Responsive Visualization

Responsive visualizations adapt to device characteristics.
Wider factors affecting perception of visualizations [Horak, Aigner, Brehmer, Joshi and Tominski 2021] include:
- Usage factors
- Environmental factors
- Device factors
- Data factors
Why is responsive visualization important?

Visualizations must be capable of being displayed on desktops devices and laptops. — Visualizations must be capable of being displayed desktops and laptops.
Photo by Glenn Carstens-Peters on Unsplash

Visualizations must be capable of being displayed on smartphones. — Visualizations must be capable of being displayed on mobile devices.
Smartphone photo by Yura Fresh on Unsplash
Tablet photo by Roberto Nickson on Unsplash

Visualizations must be capable of being displayed on tablets. — Visualizations must be capable of being displayed on mobile devices.
Smartphone photo by Yura Fresh on Unsplash
Tablet photo by Roberto Nickson on Unsplash

Visualizations must be capable of being displayed on smart watches. — Visualizations may even be capable of being displayed on wearables like smart watches.
Photo by Sabina on Unsplash

Reason 1: Today's Web is Mobile

Reason 2: Scaling Down Whole Visualization is Not Sufficient

A grouped bar chart is not readable anymore, if scaled down too much.

Responsive Web Design

Originated from need to avoid horizontal scrolling.
Term “Responsive Web Design” coined by Ethan Marcotte [Marcotte 2010]:
- Flexible grids
- Flexible images
- Media queries
Responsive design strategies:
- Desktop-First
- Mobile-First
- Everything-in-Parallel
Content elements on web pages, such as images and charts (visualizations), also have to become responsive.

Modern CSS Techniques

“Modern CSS” techniques allow new approaches [Shadeed 2023]:

CSS Flexbox
CSS Grid
CSS comparison functions
Size container queries
Container query units
Style container queries

Responsive Visualization Patterns

“Design Patterns and Trade-Offs in Responsive Visualization for Communication” [Kim, Moritz and Hullman 2021]:
- Targets = What is changed (data, encoding, interaction, narrative, references/layout).
- Actions = How something is changed (recompose, rescale, transpose, reposition, compensate).
- Pattern = Applying Action to Target to get from State A to State B.
Types of responsive visualization pattern:
- Visual Patterns: Change Visual Representation.
- Interaction Patterns: Enable User to Interact with Visualization.
- Data Patterns: Transform Underlying Data.

Visual Patterns

V1: Scaling Chart Down
V2: Repositioning Element Labels
V3: Using Tooltips Instead of Element Labels
V4: Rotating Axis Labels
V5: Shortening Labels and Titles
V6: Scaling Labels Between Minimum and Maximum Size
V7: Scaling Down Visual Elements
V8: Hiding Elements and Labels
V9: Rotating Chart 90°
V10: Using a Different Chart

Interaction Patterns

I1: Supporting Toolbar and Menus
I2: Filtering Dimensions and Records
I3: Supporting Zooming

Data Patterns

D1: Applying Data Generalization
D2: Applying Data Aggregation
D3: Applying Group Markers

Example 2

Includes Patterns:

V3: Using Tooltips Instead of Element Labels
V4: Rotating Axis Labels
V5: Shortening Labels and Titles
V6: Scaling Labels Between Minimum and Maximum Size
V7: Scaling Down Visual Elements
V8: Hiding Elements and Labels
I1: Supporting Toolbar and Menus

Interactive multi-line chart rendered via RespVis.

Example 3

Includes Patterns:

V3: Using Tooltips Instead of Element Labels
V5: Shortening Labels and Titles
V6: Scaling Labels Between Minimum and Maximum Size
V7: Scaling Down Visual Elements
V8: Hiding Elements and Labels
I1: Supporting Toolbar and Menus
I3: Supporting Zooming

Interactive scatter plot rendered via RespVis.

Responsive Visualization Tools

Responsive Visualization Libraries, Systems, and Tools

Libraries:
- Chart.js
- Plotly.js
- Chartist
- Highcharts
Systems:
- Hoffswell Visualization System
- Power BI
Transformation tools:
- MobileVisFixer
- Setlur Line Chart Resize Algorithm

Evaluation

Evaluation criteria:
- Render method
- Chart variety
- Licensing
- Bundle size
- Popularity
- Performance
- Provided functionality
Evaluation process:
- Create bar charts with provided data for all (available) tools.
- Performance test: Measure frame rate (in fps) while resizing chart for 10 s.
- Conduct performance test with:
  - 7 bars
  - 70 bars

Vienna

1973403

Graz

289440

Linz

210165

Salzburg

155021

Innsbruck

132493

Klagenfurt

101403

Villach

65127

Dataset used for evaluating tools.
Population of six Austrian cities from the world cities dataset [Juanma 2023].

Chart.js

Open-source responsive visualization library.
Drawing via Canvas2D.
Eight base chart types.
Default configuration leads to appealing results.
Offers basic interactivity.
Minified bundle 66.6 KB.
62 k GitHub stars.
Performance: 57 fps with 7-bar chart, 53 fps with 70-bar chart.

Interactive bar chart rendered via Chart.js.

Plotly.js

Open-source responsive visualization library.
Drawing via SVG-DOM (D3).
Over 40 chart types.
Default configuration not straightforward.
Interactive toolbar by default.
Event listeners can be attached to individual elements.
Minified bundle 1.1 MB.
15.9 k GitHub stars.
Performance: 54 fps with 7-bar chart, 20 fps with 70-bar chart.

Interactive bar chart rendered via Plotly.js.

Chartist

Lightweight open-source responsive visualization library.
Drawing via SVG-DOM (D3).
Offers bar, line and pie charts as well as subtypes and variations.
Offers a default, customizable style sheet.
Event listeners can be attached to individual elements.
Minified bundle 11.7 KB.
13.3 K GitHub stars.
Performance: 57 fps with 7-bar, 20 fps with 70-bar chart.

Interactive bar chart rendered via Chartist

Highcharts

Commercial responsive visualization library.
Free for non-commercial and educational purposes.
Source available, but not open-source.
Drawing via SVG-DOM.
Offers over 50 different visualization types.
Offers smooth default animations on initial load.
Event listeners can be attached to individual elements.
Minified bundle 96.5 KB.
11.5 K GitHub stars.
Performance: 56 fps with 7-bar, 52 fps with 70-bar chart.

Interactive bar chart rendered via Highcharts.

Hoffswell Visualization System

Responsive visualization system.
Tool not publicly available.
Built with Vega-Lite.
Multiple visualization views in parallel.
Modifications are applied to all views by default.
Views can be locked or unlocked for propagation.
If two views are unlocked, differences are adjustable.
Example gallery contains created visualizations and showcase videos.

Power BI

Responsive visualization system.
Set of services provided by microsoft.
Enables collecting, analyzing, transforming data.
Enables creating and collaborative sharing of visualizations and reports.
Visualization will adapt automatically if size is changed during development.
Different reports for mobile and desktop view can be created.
Visualizations will not automatically adapt in published reports.

Wide version of bar chart created in Power BI.

Narrow version of bar chart created in Power BI.

MobileVisFixer

Visualization transformation tool
Automatically transforms existing SVG based graphics into mobile friendly ones
Uses reinforcement-learning-based approach
Published in IEEE Transactions on Visualization and Computer Graphics 2021
Tool not publicly available
Short demo video is available.

Setlur Line Chart Resize Algorithm

Visualization transformation tool.
Implementation of algorithm via HTML, JavaScript and D3.
Source code not publicly available.
Based on cartographic generalization principles.
Automatically resizes line charts to fit different size requirements.
Algorithm:
1. Resize chart.
2. Identify elements.
3. Assign semantic importance.
4. Compute spatial metrics.
5. Apply generalization.

Setlur Line Chart Resizing Example — Semantic Resizing of Charts Through Generalization: A Case Study with Line Charts [Setlur and Chung 2021]
Creative Commons Attribution 4.0 International (CC BY 4.0) licence

Resources

Responsive Visualization Tools Repository:
https://github.com/blindguardian50/responsive-visualization-tools

Responsive Visualization Tools Demos:
https://responsive-visualization-tools.netlify.app/

RespVis Repository:
https://github.com/tugraz-isds/respvis

RespVis Demos:
https://respvis.netlify.app/

Slides:
https://responsive-patterns-and-tools-slides.netlify.app

References

Andrews, Keith [2018]. Responsive Visualisation. CHI 2018 Workshop on Data Visualization on Mobile Devices (MobileVis 2018) (Montréal, Québec, Canada). 21 Apr 2018. https://mobilevis.github.io/assets/mobilevis2018_paper_4.pdf.

Andrews, Keith, David Egger, and Peter Oberrauner [2023]. RespVis: A D3 Extension for Responsive SVG Charts. Proc. 27th International Conference Information Visualisation (IV 2023) (Tampere, Finland). 25 Jul 2023, pages 19–22. doi:10.1109/IV60283.2023.00014. https://ftp.isds.tugraz.at/pub/papers/andrews-iv2023-respvis.pdf.

Hernández, Juanma [2023]. World cities database. 31 Mar 2023. https://www.kaggle.com/datasets/juanmah/world-cities.

Hoffswell, Jane, Wilmot Li, and Zhicheng Liu [2020]. Techniques for Flexible Responsive Visualization Design. Proc. ACM Conference on Human Factors in Computing Systems (CHI 2020) (Online). ACM, 25 Apr 2020, Paper 648, pages 1–13. doi:10.1145/3313831.3376777. https://jhoffswell.github.io/website/resources/papers/2020-ResponsiveVisualization-CHI.pdf.

Horak, Tom, Wolfgang Aigner, Matthew Brehmer, Alark Joshi, and Christian Tominski, [2021]. Responsive Visualization Design for Mobile Devices. In: Mobile Data Visualization. Edited by Bongshin Lee, Raimund Dachselt, Petra Isenberg, and Eun Kyoung Choe. CRC Press, 23 Dec 2021. Chapter 2, pages 33–65. ISBN 0367534711. doi:10.1201/9781003090823-2. https://imld.de/cnt/uploads/Horak2021_Mo bileDataVisBook_Chap02_Responsive.pdf .

Kim, Hyeok, Dominik Moritz, and Jessica Hullman [2021]. Design Patterns and Trade-Offs in Responsive Visualization for Communication. Computer Graphics Forum 40.3 (29 Jun 2021), pages 459–470. doi:10.1111/cgf.14321. https://arxiv.org/abs/2104.07724.

Marcotte, Ethan [2010]. Responsive Web Design. 25 May 2010. https://alistapart.com/article/responsive-web-design/.

Setlur, Vidya and Haeyong Chung [2021]. Semantic Resizing of Charts Through Generalization: A Case Study with Line Charts. 2021 IEEE Visualization Conference (VIS 2021) (Online). IEEE, Oct 2021, pages 1–5. doi:10.1109/VIS49827.2021.9623306. https://www.vidyasetlur.com/recent-papers

Shadeed, Ahmad [2023]. The Guide To Responsive Design In 2023 and Beyond. 01 Feb 2023. https://ishadeed.com/article/responsive-design/.

Wu, Aoyu, Wai Tong, Tim Dwyer, Bongshin Lee, Petra Isenberg, and Huamin Qu [2021]. MobileVisFixer: Tailoring Web Visualizations for Mobile Phones Leveraging an Explainable Reinforcement Learning Framework. IEEE Transactions on Visualization and Computer Graphics 27.2 (Feb 2021), pages 464– 474. doi:10.1109/TVCG.2020.3030423. https://hal.inria.fr/hal-03001709/.

Rslidy Version 1.0.1 GitHub

Interface Controls

Responsive Visualization Patterns and Tools

David Egger 706.424 Seminar/Project Interactive and Visual Information Systems WS 2023 Graz University of Technology

Tue 12 Dec 2023

Responsive Visualization

Reason 1: Today's Web is Mobile

Reason 2: Scaling Down Whole Visualization is Not Sufficient

Responsive Web Design

Modern CSS Techniques

Responsive Visualization Patterns

Responsive Visualization Patterns

Visual Patterns

Interaction Patterns

Data Patterns

Example 1

Example 2

Example 3

Responsive Visualization Tools

Responsive Visualization Libraries, Systems, and Tools

Evaluation

Chart.js

Plotly.js

Chartist

Highcharts

Hoffswell Visualization System

Power BI

MobileVisFixer

Setlur Line Chart Resize Algorithm

Resources

References

David Egger
706.424 Seminar/Project Interactive and Visual Information Systems WS 2023
Graz University of Technology