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

Copyright © 2023 by David Egger, except as otherwise noted. This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence.

Responsive Visualization

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

Market share of device types by page views.
StatCounter: Desktop vs Mobile vs Tablet Market Share Worldwide

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

Modern CSS Techniques

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

Responsive Visualization Patterns

Responsive Visualization Patterns

Visual Patterns

Interaction Patterns

Data Patterns

Example 1

Includes Patterns:

  • V2: Repositioning Element Labels
  • V3: Using Tooltips Instead of Element Labels
  • V5: Shortening Labels and Titles
  • V7: Scaling Down Visual Elements
  • V9: Rotating Chart 90°
  • I1: Supporting Toolbar and Menus
  • I2: Filtering Dimensions and Records (partially):
Market share of device types by page views. Interactive stacked bar chart rendered via RespVis.

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

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
City Population
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, 49 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.
Hoffswell Visualization System
Techniques for Flexible Responsive Visualization Design [Hoffswell, Li and Liu 2020]
Copyright © 2020 Association of Computing Machinery and used under § 42f.(1) of Austrian copyright law

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.
MobileVisFixer example transformations
MobileVisFixer: Tailoring Web Visualizations for Mobile Phones Leveraging an Explainable Reinforcement Learning Framework[Wu, Tong, Dwyer, Lee, Isenberg and Qu 2021]
Copyright © 2021 IEEE and used under IEEE Thesis / Dissertation Reuse Rule

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