Introducing Vega-Lite 2.0

UW Interactive Data Lab
4 min readOct 31, 2017

We are excited to announce the official version 2 release of Vega-Lite, a high-level language for rapidly creating interactive visualizations.

Vega-Lite enables concise descriptions of visualizations as a set of encodings that map data fields to the properties of graphical marks. Vega-Lite uses a portable JSON format that compiles to full specifications in the larger Vega language. Vega-Lite includes support for data transformations such as aggregation, binning, filtering, and sorting, as well as visual transformations such as stacking and faceting into small multiples.

In addition to an expressive range of static visualizations, Vega-Lite 2.0 adds support for flexible combinations of charts and interactions such as panning, zooming, interactive filtering, and linked selection. Version 2 introduces three major additions: view composition, interaction, and Vega 3 support.

View Composition

A powerful aspect of modular approaches to visualization is the ability to create sophisticated graphics by composing simple ones. Vega-Lite has four operators to compose charts: layer, facet, concat and repeat. With layer, you can stack charts on top of each other and Vega-Lite automatically determines how to align the axes and share scales. Facet subdivides the data into groups and creates a chart for each partition. Concat combines arbitrary charts into dashboard layouts. Finally, repeat is a data-driven way to concatenate charts.

Most importantly, these operators can be combined! Authors can create rich multi-view graphics within one declarative specification. The example below compares weather data in New York and Seattle, layering data for individual years and averages within a repeated template for different measurements.

Three charts that show different weather measures throughout the year in Seattle and New York. you can create this chart in Vega-Lite with layering and repeating views. Try it out!

The layer, facet, concat, and repeat operators comprise a view algebra for creating a wide range of multi-view visualizations. For more about details about flexible chart composition, see the Vega-Lite documentation.

Interaction

Multi-view visualizations provide a valuable way to get an overview of many variables at once. However, to investigate further and see data from multiple perspectives, interaction is critical. Vega-Lite version 2 introduces ways to describe not only visual encodings, but also to specify interaction techniques using a concise and composable syntax for selections.

In Vega-Lite 2.0, visualization authors specify the type of selection they would like (e.g., a point or interval selection), along with possible transformations. The Vega-Lite compiler then automatically synthesizes appropriate input handling logic to implement the interaction. Once defined, interactive selections can be used to parameterize the visualization, for example to filter data, highlight points, and determine scale ranges to pan or zoom a plot.

The plot below uses an interval selection, which causes the chart to include an interactive brush (shown in grey). The brush selection parameterizes the red guideline, which visualizes the average value within the selected interval.

An interactive moving average in Vega-Lite 2. Try it out!

View composition and interactive selections can be combined. Below, we use an interval selection over a set of histograms showing the distributions of different flight statistics. The selection parameterizes a filter for the yellow bars, creating a coordinated interaction commonly referred to as brushing & linking or cross-filtering. As a viewer adjusts the selection, they can immediately see how the other distributions change in response.

A crossfilter interaction in Vega-Lite 2. Try it out!

More details about Vega-Lite’s interaction primitives can be found in the documentation. For a more formal treatment, see the (best paper winning) InfoVis 2016 research paper on the Vega-Lite language design.

For a tour of these and other features, watch our OpenVis Conf talk:

Vega-Lite OpenVis Conf talk

Vega 3 Support

Finally, another major change in Vega-Lite 2.0 is that it now targets the new Vega 3.0 language. Among other advances, Vega 3 introduces a more performant reactive dataflow runtime and richer support for interaction, layouts, data transformation, binned scales, and more.

In addition to the developments above, we have attempted to make Vega-Lite more consistent and powerful. As one example, data transforms are now specified using an array notation, giving authors more control over the execution order of filters, formula calculations, binning, and aggregation.

We are excited to see what others will build with Vega-Lite! We are especially encouraged that Jupyter Lab (the next generation of Jupyter Notebooks) will ship with Vega and Vega-Lite by default. We are also working with the Altair team to release a new version of the Altair Python API for Vega-Lite. Look for that in the months to come to create interactive, multi-view visualizations directly within the Jupyter data science environment!

Feeling inspired? Check out the example gallery and applications that use Vega-Lite. Read tutorials and documentation at vega.github.io/vega-lite/. Source code is available on GitHub at https://github.com/vega/vega-lite. For updates, follow the Vega project on Twitter at @vega_vis.

This post was written by Dominik Moritz, Kanit “Ham” Wongsuphasawat, Arvind Satyanarayan, and Jeffrey Heer.

--

--

UW Interactive Data Lab

Data visualization and interactive analysis research at the University of Washington. http://idl.cs.washington.edu/