About
This website contains interactive example visualizations to demonstrate constraint-based breakpoints.
This is the companion/demo website for our paper (available online here):
Sarah Schöttler, Jason Dykes, Jo Wood, Uta Hinrichs, and Benjamin Bach.
Constraint-Based Breakpoints for Responsive Visualization Design and Development. IEEE
Transactions on Visualization and Computer Graphics (2024).
Explore our interactive demos!
This video walks you through the population map example in detail, and briefly shows the other examples (recommended to watch in full-screen):
Code Specification
We implemented our design framework as a Svelte component <ResponsiveVis />.
Designers can use the component to create a responsive visualization by supplying a
specification. At minimum, the specification must include multiple views. For each view, the
specification must provide (1) a Svelte component that creates this visualization and implements
its view constraints, (2) the dataset to be visualized, and optionally, (3) parameters for the
visualization and (4) parameters for the view constraints.
Below, we show an annotated excerpt from the specification for the UK Election example. This specification includes three views; for each view, the type of view, dataset, parameters (omitted here--this includes any configuration options for the visualization like color schemes), and constraints are specified. The full file, running the live demo, is available here.
Implemented Visualization Components
For our four examples, we implemented six Svelte components which we used to create a total of 13 different views across four example visualizations. We list these below, indicating the constraints implemented in each.
VegaLiteWrapper
A wrapper for Vega-Lite.
View component code on GitHub
Used in: Movies Scatterplot, Population Map
Implemented constraints:
maxOverplotting: measures and limits the amount of overplotting in a scatterplot. In this example, we quantify overplotting by first computing how many pairs of circles overlap in the scatterplot, i.e., we check for each possible pair of circles whether they overlap or not. We record overlap as a value between 0 and 1 for each of these pairs, where 1 indicates identical positions and 0 indicates no overlap. We then sum all these values and divide that by the number of possible pairs (a number equivalent to all circles fully overlapping).
NetPanorama
A wrapper for NetPanorama, a declarative grammar for networks.
View component code on GitHub
Used in: Networks
Implemented constraints:
minAdjacencyMatrixLabelSize: requires a minimum size for the labels in an adjacency matrix, to be provided in px. Setting a minimum size for the labels automatically creates a minimum size for each matrix cell.minArcDiagramLabelSize: requires a minimum size for the labels in an arc diagram, to be provided in px. Setting a minimum size for the labels automatically creates a minimum distance between the nodes.
ChoroplethMap
A choropleth map created with D3.
View component code on GitHub
Used in: UK Election Map
Implemented constraints:
minAreaSize: specify a minimum size for the smallest area on the map. We identify the smallest area on the map and check if its area is above the specified size in px.maxAspectRatioDiff: specify a maximum difference between the aspect ratio of the map and the container. We determine the natural aspect ratio of the map, and compare this to the current aspect ratio of the container. We then check if the container is wider or narrower than the map by more than the specified percentage.
CircleMap
A proportional circle map with a Dorling cartogram option, created with D3.
View component code on GitHub
Used in: Population Map
Implemented constraints:
minCircleRadius: specify a minimum radius for the smallest circle on the map. We identify the smallest circle on the map and check if it is above the specified minimum radius.maxAspectRatioDiff: specify a maximum difference between the aspect ratio of the map and the container. We determine the natural aspect ratio of the map, and compare this to the current aspect ratio of the container. We then check if the container is wider or narrower than the map by more than the specified percentage.
HexMap
A hexagonal grid map created with D3 and the d3-hexjson library.
View component code on GitHub
Used in: UK Election Map
Implemented constraints:
minHexSize: specify a minimum width for the hexagons on the map. All hexagons are the same size, so we check if their width is above the provided minimum width.maxAspectRatioDiff: specify a maximum difference between the aspect ratio of the map and the container. We determine the natural aspect ratio of the map, and compare this to the current aspect ratio of the container. We then check if the container is wider or narrower than the map by more than the specified percentage.
WaffleChart
A waffle-chart-like visualization created with D3.
View component code on GitHub
Used in: UK Election Map
Implemented constraints:
- No constraints.
Overview by Constraint Type
The following table presents all constraints that we have implemented grouped by the three general types we introduce in the paper:| Size | Overlap | Aspect Ratio |
|---|---|---|
minAdjacencyMatrixLabelSize | maxOverplotting | minAspectRatio |