UW Interactive Data Lab
IDL logo

Vega-Lite: A Grammar of Interactive Graphics

Arvind Satyanarayan, Dominik Moritz, Kanit Wongsuphasawat, Jeffrey Heer. IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2017
Figure for Vega-Lite: A Grammar of Interactive Graphics
Visualizations authored with Vega-Lite. From left-to-right: layered line chart combining raw and average values, dual-axis layered bar and line chart, brushing and linking in a scatterplot matrix, layered cross-filtering, and an interactive index chart.
Materials
PDF | Video | Software | Best Paper Award
Abstract
We present Vega-Lite, a high-level grammar that enables rapid specification of interactive data visualizations. Vega-Lite combines a traditional grammar of graphics, providing visual encoding rules and a composition algebra for layered and multi-view displays, with a novel grammar of interaction. Users specify interactive semantics by composing selections. In Vega-Lite, a selection is an abstraction that defines input event processing, points of interest, and a predicate function for inclusion testing. Selections parameterize visual encodings by serving as input data, defining scale extents, or by driving conditional logic. The Vega-Lite compiler automatically synthesizes requisite data flow and event handling logic, which users can override for further customization. In contrast to existing reactive specifications, Vega-Lite selections decompose an interaction design into concise, enumerable semantic units. We evaluate Vega-Lite through a range of examples, demonstrating succinct specification of both customized interaction methods and common techniques such as panning, zooming, and linked selection.
BibTeX
@article{2017-vega-lite,
  title = {Vega-Lite: A Grammar of Interactive Graphics},
  author = {Satyanarayan, Arvind AND Moritz, Dominik AND Wongsuphasawat, Kanit AND Heer, Jeffrey},
  journal = {IEEE Trans. Visualization \& Comp. Graphics (Proc. InfoVis)},
  year = {2017},
  url = {https://uwdata.github.io/papers/vega-lite},
  doi = {10.1109/TVCG.2016.2599030}
}