UW Interactive Data Lab
IDL logo

Declarative Interaction Design for Data Visualization

Arvind Satyanarayan, Kanit Wongsuphasawat, Jeffrey Heer. ACM User Interface Software & Technology (UIST), 2014
Figure for Declarative Interaction Design for Data Visualization
Schematic for declarative overview + detail interaction. Mouse events in an overview (top) feed selection predicates based on drag start and end coordinates. Scale inversion is used to map the pixel range to date values, lifting the pixel-level selection to a query over the source data. This query is used to drive a filter transform for the focus view (bottom).
Declarative visualization grammars can accelerate development, facilitate retargeting across platforms, and allow language-level optimizations. However, existing declarative visualization languages are primarily concerned with visual encoding, and rely on imperative event handlers for interactive behaviors. In response, we introduce a model of declarative interaction design for data visualizations. Adopting methods from reactive programming, we model low-level events as composable data streams from which we form higher-level semantic signals. Signals feed predicates and scale inversions, which allow us to generalize interactive selections at the level of item geometry (pixels) into interactive queries over the data domain. Production rules then use these queries to manipulate the visualization’s appearance. To facilitate reuse and sharing, these constructs can be encapsulated as named interactors: standalone, purely declarative specifications of interaction techniques. We assess our model’s feasibility and expressivity by instantiating it with extensions to the Vega visualization grammar. Through a diverse range of examples, we demonstrate coverage over an established taxonomy of visualization interaction techniques.
  title = {Declarative Interaction Design for Data Visualization},
  author = {Satyanarayan, Arvind AND Wongsuphasawat, Kanit AND Heer, Jeffrey},
  booktitle = {ACM User Interface Software \& Technology (UIST)},
  year = {2014},
  url = {https://idl.uw.edu/papers/reactive-vega},
  doi = {10.1145/2642918.2647360}