Constraint-Based Breakpoints for Responsive Visualization Design and Development

TL;DR

This paper tackles the problem that traditional responsive visualizations rely on device breakpoints tied to viewport size, which fail to account for changes in data or visualization parameters. It proposes constraint-based breakpoints, where each view is governed by constraints on element size, overlap, and aspect ratio, and uses a view landscape to map display sizes to the most suitable view. A prototype library in Svelte is demonstrated across geographic, network, and multivariate visualizations, with two complementary design workflows (Constraint-led and View-led) and a view stack of multiple designs. The contributions include a formal framework for constraint-based breakpoints, practical workflows, and a working library with interactive demos, offering a data-aware approach to responsive visualization that adapts to dataset changes and diverse display contexts.

Abstract

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

Figures (9)

• Figure 1: Motivating example demonstrating problems with conventional device breakpoints from designer and viewer perspectives, and how they are addressed by constraint-based breakpoints.
• Figure 2: View landscapes for (a) a simple responsive visualization with two views and a fixed-width device breakpoint and (b) a responsive visualization with constraint-based breakpoints, illustrating which views (different colors) are shown for each width-height combination.
• Figure 3: Illustration of how the view stack and view constraints are used to generate the view landscape.
• Figure 4: Two workflows for designing with constraint-based breakpoints: In the Constraint-led process, the designer iteratively adds views with constraints until the view landscape is filled. In the View-led process, all views are designed upfront, then ordered and assigned constraints.
• Figure 5: Step-by-step overview of the design process for the Population Map example: we generally followed a Constraint-led approach, but decided to modify view #3 after examining the final visualization. The interactively resizable demo is available online: https://responsive-vis.github.io/breakpoints/demos/population-map.