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.

A Vega-Lite specification for a Bar Chart

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.

Mapping a binned field and its count to a bar mark produces a histogram.
The binning transformation can be used to create a binned scatterplot as well.

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.

Applications powered by Vega-Lite: Voyager, a recommendation-powered visualization browser (left), and Polestar, a visualization specification tool (right).

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.

HCI & Design at UW

Stories about research and teaching from the Design Use…

UW Interactive Data Lab

Written by

Data visualization and interactive analysis research at the University of Washington.

HCI & Design at UW

Stories about research and teaching from the Design Use Build group at the University of Washington.

More From Medium

More from HCI & Design at UW

More from UW Interactive Data Lab

Also tagged Data Science

Also tagged Data Science

tSNE Degrades to PCA

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade