Vega-lite

Vega is a visualization grammar that allows users to describe visualizations in JSON and render it using SVG or Canvas. Vega-lite is a higher-level language built on top of Vega that automates some constructions and makes the JSON specification significantly shorter. Vega-Lite gets automatically compiled into Vega before rendering.

Vega-Lite specifications describe visualizations as encoding mappings from data to properties of graphical marks (e.g., points or bars). The Vega-Lite compiler automatically produces visualization components including axes, legends, and scales. It determines default properties of these components based on a set of carefully designed rules. This approach allows Vega-Lite specifications to be concise for quick visualization authoring, while giving user control to override defaults and customize various parts of a visualization.

Pros

• The declarative JSON specification is platform-independent (see Altair for Python, Vega-lite for Julia, Vega-lite for R, Vega-lite for Rust).
• Looks modern and slick with the default settings.
• Quick way to implement basic charts and chart compositions.
• Many examples and tutorials available.
• Gains industry traction (e.g., Wikipedia is using Vega specifications; Vega-Lite viewer is built into JupyterLab).

Cons

• The creation of more complex visualizations requires a deep understanding of the Vega-lite visualization grammar.
• Limited to available marks and visual encoding channels (i.e., less expressivity and fine-grained control than D3).

Resources

• Official Vega-lite tutorials
• Visualization curriculum of interactive notebooks, using Vega-Lite (UW Interactive Data Lab)
• Vega-lite example gallery
• Vega-Lite: A Crash Course by Observable [video]

Example

The following Vega-lite specification describes a bar chart. You can use Vega-Embed to embed your visualization in a webpage, as described in the Vega-lite getting started tutorial.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"cat": "A", "value": 28}, {"cat": "B", "value": 55}, {"cat": "C", "value": 43},
      {"cat": "D", "value": 91}, {"cat": "E", "value": 81}, {"cat": "F", "value": 53},
      {"cat": "G", "value": 19}, {"cat": "H", "value": 87}, {"cat": "I", "value": 52}
    ]
  },
  "width": 750,
  "height": 300,
  "mark": "bar",
  "encoding": {
    "x": {"field": "cat", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Alternatives

Other visualization libraries in JavaScript are, for example, D3, Highcharts, ECharts, FusionCharts, and react-vis.

Tools based on Vega-lite: Altair (Python), Vega-lite for Julia, Vega-lite for R, and Vega-lite for Rust

Vega and Vega-lite are results of research projects by the UW Interactive Data Lab.