Vega-Lite graphics companion

Last updated: January 2019

The Interactive Graphics Companion provides the raw JSON for creating different data visualisations in Vega-Lite. An accompanying blog post on Medium provides an overview of Vega-Lite and runs through a simple example.

The Companion adopts the structure of the Financial Times’ Visual Vocabulary by categorising different chart types by the data relationships that they best illustrate.

The data used throughout the Companion derive from Gapminder which are available under the Creative Common Attribution License 4.0.

Setup

To start creating charts and maps in Vega-Lite all you need is their online editor. If you prefer to use your own text editor (e.g. Atom) you'll need to drop your code into a JSON file and embed it in an HTML page using Vega-Lite's Vega-Embed JavaScript function. You can find a boilerplate html file here.

Change over time

Line (single)

Source: Gapminder

Line (multiple)

Source: Gapminder

Column

Source: Gapminder

Area chart

Source: Gapminder

Area chart (stacked)

Source: Gapminder

Circle timeline

Source: Gapminder

Steamgraph

Source: Gapminder

Correlation

Scatterplot

Source: Gapminder

Bubble chart

Source: Gapminder

Deviation

Diverging bar

Source: Gapminder

Distribution

Histogram

Source: Gapminder

Dot plot

Source: Gapminder

Barcode plot

Source: Gapminder

Boxplot

Source: Gapminder

Magnitude

Bar

Source: Gapminder

Bar (labels)

Source: Gapminder

Paired column

Source: Gapminder

Part-to-whole

Stacked column/bar

Source: Gapminder

Ranking

Slope

Source: Gapminder

Spatial

Basic choropleth (rate/ratio)

Source: Gapminder

Proportional symbol (count/magnitude)

Source: Gapminder