Introducing Vega-Lite
By: Uw Interactive Data Lab
Tags: Visualization, D3, Data Science

Support programmatic generation, sharing, and reuse. Like Vega, Vega-Lite can serve as a standalone file format for visualizations. In particular, Vega-Lite is designed to be a convenient format for automatic visualization generation by visual analysis tools. Examples of applications that use Vega-Lite are Voyager, a recommendation-powered visualization browser for data exploration, and Polestar, a web-based visual specification interface inspired by Tableau. Moreover, one can reuse Vega-Lite specifications across datasets with similar schemas.

The online Vega editor shows the Vega-Lite specification and the compiled Vega specification side-by-side.

Leverage Vega’s performance, flexibility across platforms, and expressivity. Vega-Lite specifications are compiled into Vega specifications and rendered using Vega’s runtime, which supports both browser-side and server-side rendering via SVG or Canvas. Vega-Lite directly benefits from Vega’s architecture. While Vega-Lite focuses on commonly-used charts, one can create more advanced designs by starting with Vega-Lite and then further customizing the resulting Vega specification.

The Future of Vega-Lite

With the 1.0 release, Vega-Lite provides a useful tool for visualization on the web. That said, we are even more excited about what comes next.

Composition and Interaction. A powerful aspect of modular approaches to visualization is the ability to create sophisticated graphics by composing simple ones. A static visualization typically provides at most a handful of insights into the data. The true power of visualization lies in the ability to interact with data and see it from multiple perspectives. So, we are building new methods for composite, interactive visualizations in Vega-Lite. In the coming months, Vega-Lite will add support for both layering and composing views side-by-side. We are also developing ways to describe not just visual encodings, but interaction techniques using a concise, composable, high-level syntax. For example, we will support linked views with cross-filtering.

Brushing and Linking in the Vega cross-filter example, inspired by Mike Bostock’s Crossfilter.js library. Vega-Lite will support describing this kind of interaction techniques in the near future.

Scalability. As Vega-Lite is a declarative language, we can reason about its behavior and automatically optimize and distribute computation. For example, a server could pre-aggregate data and send data in a compressed binary format to the browser. As a result, visualizations of large data sets can load more quickly and be more responsive. Moreover, this optimization should be possible without any changes to a Vega-Lite specification!

Lyra, a visualization design tool.

Design Tools. Creating visualizations with Vega-Lite should be easy, but we hope to make it even easier. We are developing a design validator that helps identify potentially ineffective visualizations. For example, a horizontal bar chart with an x-axis starting at a non-zero value is a valid specification, but it might cause readers to misinterpret the relative differences between values. We will also introduce support for theming in both Vega and Vega-Lite to customize the default look-and-feel. Plus, the next version of Lyra, a visualization design tool, will use Vega-Lite’s rule-based system for rapidly creating visualizations.

Learn and Use Vega-Lite

If you are interested in taking Vega-Lite for a spin, you can start visualizing and join the community today by:

This post was authored by Kanit “Ham” Wongsuphasawat, Dominik Moritz and Jeffrey Heer. We would like to thank all of the Vega-Lite contributors and the UW Interactive Data Lab for their assistance in the development of Vega-Lite.