Introducing Vega-Lite
Today we are excited to announce the official 1.0 release of Vega-Lite, a high-level format for rapidly creating visualizations for analysis and presentation. With Vega-Lite, one can concisely describe a visualization as a set of encodings that map from data fields to the properties of graphical marks, using a JSON format. Vega-Lite also supports data transformations such as aggregation, binning, filtering, and sorting, along with visual transformations including stacked layouts and faceting into small multiples.
A High-level Language for Visualization
As you might have guessed, Vega-Lite is built on top of Vega, a visualization grammar built using D3. Vega and D3 provide a lot of flexibility for custom visualization designs; however, that power comes with a cost. With Vega or D3, a basic bar chart requires dozens of lines of code and specification of low-level components such as scales and axes. In contrast, Vega-Lite is a higher-level language that simplifies the creation of common charts. In Vega-Lite, a bar chart is simply an encoding with two fields.
The Design of Vega-Lite
Vega-Lite was inspired by other high-level visualization languages such as Wilkinson’s Grammar of Graphics, Wickham’s ggplot2 for R, and the VizQL formalism underlying Tableau. Motivated by the design of these languages as well as the underlying Vega and D3 systems, we arrived at a number of principles to guide the design of Vega-Lite.
Favor composition over templates. While chart templates (as found in spreadsheet programs) can be convenient, they limit the visualization types that can be created. Instead, Vega-Lite uses a compositional approach, describing a visualization based on the properties of graphical marks. This approach not only supports an expressive range of graphics, it also helps users rapidly refine and move between chart types. For example, you can create a histogram by mapping a binned field and the count of all records to a bar mark. You can then quickly edit the specification to create other types of visualizations, such as binned scatterplots.
Provide sensible defaults, but allow customization. Vega-Lite’s compiler automatically chooses default properties of a visualization based on a set of carefully designed rules. However, one can specify additional properties to customize the visualization. For example, the stacked bar chart on the left has a custom color palette. Vega-Lite uses a concise syntax, enabling rapid creation of visualizations without unduly restricting subsequent customization.
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.
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.
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!
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:
- Reading the Vega-Lite getting started tutorial.
- Playing with Vega-Lite in the online Vega Editor.
- Building your own applications with Vega-Lite.
- Subscribing to Vega mailing list and following us on Twitter and Medium.
- Contributing to the project.
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.
