Constraint-Based Breakpoints for Responsive Visualization Design and Development

Fuente: arXiv
Salvato in:
Dettagli Bibliografici
Autori principali: Schöttler, Sarah, Dykes, Jason, Wood, Jo, Hinrichs, Uta, Bach, Benjamin
Natura: Preprint
Pubblicazione: 2024
Soggetti:
Accesso online:
Tags: Aggiungi Tag
Nessun Tag, puoi essere il primo ad aggiungerne!!
_version_ 1866917767241793536
author Schöttler, Sarah
Dykes, Jason
Wood, Jo
Hinrichs, Uta
Bach, Benjamin
author_facet Schöttler, Sarah
Dykes, Jason
Wood, Jo
Hinrichs, Uta
Bach, Benjamin
contents This paper introduces constraint-based breakpoints, a technique for designing responsive visualizations for a wide variety of screen sizes and datasets. Breakpoints in responsive visualization define when different visualization designs are shown. Conventionally, breakpoints are static, pre-defined widths, and as such do not account for changes to the visualized dataset or visualization parameters. To guarantee readability and efficient use of space across datasets, these static breakpoints would require manual updates. Constraint-based breakpoints solve this by evaluating visualization-specific constraints on the size of visual elements, overlapping elements, and the aspect ratio of the visualization and available space. Once configured, a responsive visualization with constraint-based breakpoints can adapt to different screen sizes for any dataset. We describe a framework that guides designers in creating a stack of visualization designs for different display sizes and defining constraints for each of these designs. We demonstrate constraint-based breakpoints for different data types and their visualizations: geographic data (choropleth map, proportional circle map, Dorling cartogram, hexagonal grid map, bar chart, waffle chart), network data (node-link diagram, adjacency matrix, arc diagram), and multivariate data (scatterplot, heatmap). Interactive demos and supplemental material are available at https://responsive-vis.github.io/breakpoints/.
format Preprint
id arxiv_https___arxiv_org_abs_2409_01339
institution arXiv
publishDate 2024
record_format arxiv
spellingShingle Constraint-Based Breakpoints for Responsive Visualization Design and Development
Schöttler, Sarah
Dykes, Jason
Wood, Jo
Hinrichs, Uta
Bach, Benjamin
Human-Computer Interaction
This paper introduces constraint-based breakpoints, a technique for designing responsive visualizations for a wide variety of screen sizes and datasets. Breakpoints in responsive visualization define when different visualization designs are shown. Conventionally, breakpoints are static, pre-defined widths, and as such do not account for changes to the visualized dataset or visualization parameters. To guarantee readability and efficient use of space across datasets, these static breakpoints would require manual updates. Constraint-based breakpoints solve this by evaluating visualization-specific constraints on the size of visual elements, overlapping elements, and the aspect ratio of the visualization and available space. Once configured, a responsive visualization with constraint-based breakpoints can adapt to different screen sizes for any dataset. We describe a framework that guides designers in creating a stack of visualization designs for different display sizes and defining constraints for each of these designs. We demonstrate constraint-based breakpoints for different data types and their visualizations: geographic data (choropleth map, proportional circle map, Dorling cartogram, hexagonal grid map, bar chart, waffle chart), network data (node-link diagram, adjacency matrix, arc diagram), and multivariate data (scatterplot, heatmap). Interactive demos and supplemental material are available at https://responsive-vis.github.io/breakpoints/.
title Constraint-Based Breakpoints for Responsive Visualization Design and Development
topic Human-Computer Interaction
url https://arxiv.org/abs/2409.01339