Vega is a visualization grammar for defining a chart’s appearance and interactive behavior in JSON. A specification describes the intended result rather than manually drawing every visual element, helping turn data into clear, interactive web visualizations. section 3.1 section 3.1.1
A Vega specification starts with metadata such as a schema version, description, width, and height. Its main sections connect data to visual output: data supplies or loads values, scales map fields to display ranges, axes present scales, marks draw graphical elements, and signals drive interaction. section 3.1.1
Listing 3.1 The basic structure of a Vega JSON file
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic example in Vega",
"width": 600,
"height": 400,
"data": [],
"scales": [],
"axes": [],
"marks": [],
"signals": []
}
This skeleton shows the top-level shape of a Vega JSON file before data, scales, axes, marks, and signals are filled in. section 3.1.1
Build a chart by making each layer explicit:
- Define one or more data sources, either with inline values or a CSV location and format. section 3.1.1
- Create scales that map data fields such as x and y onto the chart’s width and height. section 3.1.1
- Add axes associated with those scales, then add marks such as a line that reads from the data. section 3.1.1
- Add signals and mark updates when the view should react to events such as mouseover and mouseout. section 3.1.1
An interactive line chart
A small inline dataset with x and y values can feed linear x and y scales. Bottom and left axes expose those scales, while a line mark positions each value through the scales. A mouseover signal can then update the line’s stroke so the hovered datum changes its color. Render the resulting specification in the Vega Editor to test it. section 3.1.1
Vega sits beneath Vega-Lite and Altair. Vega-Lite offers a higher-level declarative language for common charts, while Altair provides a Python-facing API built on Vega-Lite. Working directly in Vega offers a route to custom visualizations when a higher-level interface is not sufficient. section 2.1 section 3.1
