A Spatial-Constraint Model for Manipulating Static Visualizations

TL;DR

This work introduces a spatial-constraint model that treats visualization elements as physical objects governed by gravity, collision, support, and fixed constraints, enabling interactive manipulation of static charts without changing underlying data. The four atomic constraints are mapped to forces and integrated into a force-directed optimization (via D3) to drive visual objects to new equilibria after user actions, supporting tasks such as navigation, filtering, reordering, re-encoding, and aggregation. A prototype extracts control points from existing charts, infers constraints, and provides direct manipulation interfaces for objects, axes, and constraints, demonstrated on 2D bar/area/line/bubble visualizations with real-world cases and a user study. Results indicate intuitive interactions and meaningful layout improvements, suggesting practical impact for activating static visualizations in analysis tasks and offering a foundation for future interaction authoring and intelligent behavior.

Abstract

We propose a spatial-constraint approach for modeling spatial-based interactions and enabling interactive visualizations, which involves the manipulation of visualizations through selection, filtering, navigation, arrangement, and aggregation. We proposes a system that activates static visualizations by adding intelligent interactions, which is achieved by associating static visual objects with forces. Our force-directed technique facilitates smooth animated transitions of the visualizations between different interaction states. We showcase the effectiveness of our technique through usage scenarios that involve activating visualizations in real-world settings.

Figures (20)

• Figure 1: We present a spatially-constrained conceptual model. Building upon this conceptual model, we have implemented a prototype system. These interactions can facilitate various user interaction tasks and accommodate diverse user intentions.
• Figure 2: A chart can be constructed using four fundamental constraints: fixed, collision, support, and gravity constraints. These constraints facilitate the direct manipulation of the visualization, encompassing (a) and (b) the manipulation of visual objects, (c) manipulation of axes, and (d) manipulation of constraints. Spatial constraints are translated into forces that prompt positional changes in visual objects, analogous to how forces impact the positions of physical objects. The resultant converged state enables a variety of interactive tasks, including rearrangement, deletion, and navigation.
• Figure 3: The position of the existing visual objects will be updated after some visual objects are removed.
• Figure 4: Constraints for exemplary visualizations. Each column corresponds to a visualization type, and each row represents a specific category of atomic constraints.
• Figure 5: Baseline axes and ticks of bar charts and area charts.