# A Design Space for Static Visualizations with Several Orders of Magnitude

Katerina Batziakoudi, Florent Cabric, S Rey, Jean-Daniel Fekete

► To cite this version:

Katerina Batziakoudi, Florent Cabric, S Rey, Jean-Daniel Fekete. A Design Space for Static Visualizations with Several Orders of Magnitude. EuroVis 2024 -, May 2024, Odense, Denmark. hal-04873100

HAL Id: hal-04873100

https://inria.hal.science/hal-04873100v1

Submitted on 8 Jan 2025

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# A Design Space for Static Visualizations with Several Orders of Magnitude

K. Batziakoudi†<fnref n="1" />,<fnref n="2" /> ID, F. Cabric‡<fnref n="2" /> ID, S. Rey§<fnref n="1" /> ID, and J.-D. Fekete¶<fnref n="2" /> ID

## Abstract

We describe the design space for visualizations with attributes spanning several orders of magnitude, termed Orders of Magnitude Values (OMVs), and present OMVis, a tool for the interactive exploration of this design space. We divide OMVs into mantissa and exponent for separate visual encoding, similar to scientific notation. We create visualizations combining an OMV with another attribute—nominal, ordinal, time, or quantitative—using various marks and visual channels following the rules of the Grammar of Graphics. We refine this space by enforcing integrity constraints from visualization literature, aiming to enhance the effectiveness of the generated visualizations.

## CCS Concepts

* Human-centered computing → Visualization systems and tools; Visualization theory, concepts and paradigms;

## 1. Introduction

We introduce a design space for static visualizations of datasets with Order of Magnitude Values (OMVs). OMVs are quantitative attributes that span a broad range of exponents (four or more [HW-BvL20]) when presented in scientific notation. These values are pivotal across a variety of public interest sectors, such as finance, health, social media, and environmental monitoring. Creating effective static visualizations that accurately represent these diverse magnitudes is essential, both for printed media and for providing a preliminary informative overview before any interactive exploration. Current visualization methods rely on linear or logarithmic scales to visualize values, leading to limitations in performing simple tasks for OMVs. In particular, linear scales prevent the reading of smaller magnitudes and their comparisons, while logarithmic scales are challenging for the general public to understand [CSMD22, RSDG20, MMB*18], and they don't effectively support quantitative comparisons [HSBW13]. These issues underscore the ongoing challenge in effectively visualizing values that span multiple orders of magnitude in a single view.

In recent visualization studies [HSBW13, BDJ14, HWBvL20, BES*22, BBSvL24], authors have proposed effective visualizations for OMVs by dividing the OMV into two components: mantissa

and exponent. This method mirrors the scientific notation, which, for example, denotes the value 58,000 as $5.8E4$ where 5.8 represents the mantissa and four denotes the exponent of the value, interpreted as $5.8 \times 10^4$. Such separation facilitates the visual encoding of both components, introducing the challenge of preserving their numerical relationship. Our aim is to investigate the effectiveness of visualizations for OMVs beyond the six designs previously proposed in the literature.

We start from the principles of the Grammar of Graphics [Wil05], and we describe a visualization in our design space as a combination of data, marks, and visual channels. With a focus on effectiveness, we refine this design space by imposing integrity constraints derived from the literature on graphical perception and visualization, following a similar approach to the one used by visualization recommendation systems [MWN*19, ZB23]. To explore the viable combinations of these dimensions, we developed OMVis, a web-based visualization tool. This tool facilitates the interactive exploration of effective combinations, offering various exporting options for visualization designers and developers.

## 2. Related Work

Recent studies in visualization, applying the concept of scientific notation, separate an OMV into its exponent and mantissa parts [BDJ14, HWBvL20, HSBW13, BBSvL24]. Hlawatsch et al. [HSBW13] introduced Scale-Stack Bar Chart (SSB), stacking magnitudes at multiple linear scales. Borgo et al. [BDJ14] visualized exponents and mantissa as overlapping bars, termed Order of Magnitude Markers (OMM). Höhn et al. [HWBvL20] presented Width-

<footnote n="1">¹Berger-Levrault, France</footnote>

<footnote n="2">²Université Paris-Saclay, CNRS, Inria, France</footnote>

<footnote>† Berger-Levrault, Université Paris-Saclay, CNRS, Inria</footnote>

<footnote>‡ Université Paris-Saclay, CNRS, Inria</footnote>

<footnote>§ Berger-Levrault</footnote>

<footnote>¶ Université Paris-Saclay, CNRS, Inria</footnote>
<figure><img src="image_2.png" /><figcaption>**Figure 1:** *Our tool OMVis for the interactive exploration of the design space.*</figcaption></figure>

Scale Bar Charts (WSB), using position Y for mantissa and color plus width for the exponent. Braun et al. [BES*22] used color in their Order of Magnitude Color (OMC) scheme to map exponents to hue and mantissa to a color scale. Focusing on large-scale time-series, Braun et al. [BBSvL24] introduced Order of Magnitude Horizon Graph (OMH) and Line chart (OML), with OMH using position Y for mantissa and color intensity for exponents, and OML combining SSB's position with OMC's color scheme.

### 3. Design Space

This design space is informed and constrained by 1) implementations of the Grammar of Graphics [Wil05, Wic10, SMWH17, Plo], particularly the Plot [Plo] library, which is used in our study, 2) studies on visualization effectiveness [ZB23, MWN*19], and 3) the literature about visualization of large value ranges [BDJ14, BB-SvL24]. We restrict our design space to static visualizations of tabular data with a single OMV attribute with positive exponents. We also focus only on the Cartesian coordinate system, use one mark to visualize both mantissa and exponent and exclude logarithmic scales. Considering our boundaries and following the Grammar of Graphics, we describe a visualization as a combination of data, marks, and visual channels. Therefore, our dimensions are:

* **Data:** An OMV value divided into mantissa and exponent and another attribute—nominal, ordinal, time, or quantitative

* **Marks:** points, lines, and areas

* **Visual channels:** Position X, Position Y, Row, Column, Length, Area, Color Intensity, Color Hue, and Shape

We refine the design space by applying a set of integrity constraints [MWN*19]. These constraints are related to: the **layout** (visualizations that contain at least one position channel), the expressiveness of **channels** (e.g., Color Hue only for nominal data), the type of a **mark** (e.g., Shape can only be used for point marks), and the **interference** with identity channels (e.g., combining Shape and Length could lead to a new Shape).

### 4. OMVis Tool

OMVis (Figure 1) is a web-based, open-source tool designed for the interactive exploration of visualizations that encode the exponent and mantissa of an OMV separately. Developed using ReactJS [Rea] and incorporating DuckDB [Duc] for efficient data management,

<figure><img src="image_3.png" /><figcaption>**Figure 2:** *The exponent is encoded with Column and Color Intensity, the mantissa with Position X and the Sentiment (ordinal attribute) is encoded with Position Y*</figcaption></figure>

the tool leverages Observable Plot [Plo] for generating visualizations. OMVis comprises two primary components: 1) an interactive menu for navigating through all possible combinations of data, visual variables, and marks, and 2) the generated visualization and exporting options. Within the menu, users have the capability to upload or choose a dataset from our provided database. They are then prompted to select an OMV for division into its mantissa and exponent parts, followed by the choice of additional attributes (nominal, ordinal, time, or quantitative). Next, users select a mark—point, line, or area—and assign visual channels to the mantissa, exponent, and chosen attributes. Constraints are enforced by disabling incompatible options; for instance, quantitative visual channels such as length are not applicable for nominal attributes. In the absence of any constraints, a visualization is generated based on these choices. Users have the option to export the generated visualization in various formats, including image files (SVG and PNG) or JavaScript code, facilitating seamless integration into other projects or presentations. Figure 2 is an example of a visualization exported from our tool. We aim to use the tool to generate and evaluate all possible combinations of marks and visual variables for visualizations that include OMVs, separated into mantissa and exponent, along with a second data attribute (nominal, ordinal, quantitative, or date). The primary users of our tool are visualization designers who want to explore different designs for datasets that include OMVs.

### 5. Discussion and Future Work

Our ultimate goal is to understand which factors influence the effectiveness of visualizations with OMVs. The description of the design space and the development of OMVis are the first steps toward this goal. We are currently working on identifying patterns that enhance or reduce the effectiveness of these visualizations. In our future work, we aim to develop design guidelines and recommendations for visualization designers or systems that handle OMVs. Moreover, we plan to empirically evaluate a selection of these visualizations to obtain quantitative data on their effectiveness.

### 6. Acknowledgements

This work has been partially supported by Berger-Levrault.
## References

[BBSvL24] BRAUN D., BORGO R., SONDAG M., VON LANDESBERGER T.: Reclaiming the horizon: Novel visualization designs for time-series data with large value ranges. *IEEE Trans. Visual. Comput. Graph.* (Jan. 2024), 1161–1171. URL: https://ieeexplore.ieee.org/document/10290958/, doi:10.1109/TVCG.2023.3326576. 1, 2

[BDJ14] BORGO R., DEARDEN J., JONES M. W.: Order of magnitude markers: An empirical study on large magnitude number detection. *IEEE Trans. Vis. Comput. Graph.* 20, 12 (Dec. 2014), 2261–2270. URL: https://doi.org/10.1109/TVCG.2014.2346428, doi:10.1109/TVCG.2014.2346428. 1, 2

[BES*22] BRAUN D., EBELL K., SCHEMANN V., PELCHMANN L., CREWELL S., BORGO R., VON LANDESBERGER T.: Color coding of large value ranges applied to meteorological data. In *Visualization and Visual Analytics (VIS) (2022), IEEE, pp. 125–129. URL: https://ieeexplore.ieee.org/document/9973199/, doi:10.1109/VIS54862.2022.00034. 1, 2

[CSMD22] CICCIONE L., SABLÉ-MEYER M., DEHAENE S.: Analyzing the misperception of exponential growth in graphs. *Cogn.* 225 (Aug. 2022), 105112:1–10511211. URL: doi.org/10.1016/j.cognition.2022.105112, doi:10.1016/j.cognition.2022.105112. 1

[Duc] Duckdb. https://duckdb.org/. Accessed on 02-Apr-2024. 2

[HSBW13] HLAWATSCH M., SADLO F., BURCH M., WEISKOPF D.: Scale-stack bar charts. *Comput. Graph. Forum* 32, 3pt2 (2013), 181–190. URL: https://doi.org/10.1111/cgf.12105, doi:10.1111/cgf.12105. 1

[HWBvL20] HÖHN M., WUNDERLICH M., BALLWEG K., VON LANDESBERGER T.: Width-scale bar charts for data with large value range. In *Proceedings of EuroVIS - Short Papers* (2020), pp. 1–5. URL: https://diglib.eg.org/handle/10.2312/evs20201056, doi:10.2312/EVS.20201056. 1

[MMB*18] MENGE D. N. L., MACPHERSON A. C., BYTNEROWICZ T. A., QUEBBEMAN A. W., SCHWARTZ N. B., TAYLOR B. N., WOLF A. A.: Logarithmic scales in ecological data presentation may cause misinterpretation. *Nature Ecology & Evolution* 2, 9 (2018), 1393–1402. URL: https://doi.org/10.1038/s41559-018-0610-7, doi:10.1038/s41559-018-0610-7. 1

[MWN*19] MORITZ D., WANG C., NELSON G. L., LIN H., SMITH A. M., HOWE B., HEER J.: Formalizing visualization design knowledge as constraints: Actionable and extensible models in Draco. *IEEE Trans. Vis. Comput. Graph.* 25, 1 (Jan. 2019), 438–448. URL: https://doi.org/10.1109/TVCG.2018.2865240, doi:10.1109/TVCG.2018.2865240. 1, 2

[Plo] Observable plot. https://observablehq.com/plot/. Accessed on 02-Feb-2024. 2

[Rea] Reactjs. https://react.dev/. Accessed on 02-Apr-2024. 2

[RSDG20] ROMANO A., SOTIS C., DOMINIONI G., GUIDI S.: The scale of COVID-19 graphs affects understanding, attitudes, and policy preferences. *Health Econ.* 29, 11 (Nov. 2020), 1482–1494. URL: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7461444/, doi:10.1002/hec.4143. 1

[SMWH17] SATYANARAYAN A., MORITZ D., WONGSUPHASAWAT K., HEER J.: Vega-lite: A grammar of interactive graphics. *IEEE Trans. Vis. Comput. Graphics* 23, 1 (Jan. 2017), 341–350. doi:10.1109/TVCG.2016.2599030. 2

[Wic10] WICKHAM H.: A layered grammar of graphics. *Journal of Computational and Graphical Statistics* 19, 1 (2010), 3–28. URL: http://www.jstor.org/stable/25651297, doi:10.1198/jcgs.2009.07098. 2

[Wil05] WILKINSON L.: The Grammar of Graphics. Springer-Verlag New York, Inc., 2005. doi:https://doi.org/10.1002/wics.118. 1, 2

[ZB23] ZENG Z., BATTLE L.: A review and collation of graphical perception knowledge for visualization recommendation. In *Proceedings of the Conference on Human Factors in Computing Systems (CHI) (2023), ACM, pp. 820:1–820:16. URL: https://doi.org/10.1145/3544548.3581349, doi:10.1145/3544548.3581349. 1, 2