What is vega-lite?
Vega-Lite is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis. Vega-Lite specifications can be compiled to Vega specifications.
What are vega-lite's main functionalities?
Basic Chart
This code sample demonstrates how to create a simple bar chart using Vega-Lite. The data is embedded directly in the specification, and the chart maps the 'a' field to the x-axis and the 'b' field to the y-axis.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
"y": {"field": "b", "type": "quantitative"}
}
}
Interactive Chart
This code sample demonstrates how to create an interactive scatterplot using Vega-Lite. The chart allows users to select a region (brush) to highlight points based on the 'Cylinders' field.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A scatterplot with interactive selection.",
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {
"condition": {
"selection": "brush",
"field": "Cylinders",
"type": "ordinal"
},
"value": "grey"
}
},
"selection": {
"brush": {"type": "interval"}
}
}
Layered Chart
This code sample demonstrates how to create a layered chart using Vega-Lite. The chart combines a line mark and a point mark to visualize stock prices over time.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A layered chart with a line and point marks.",
"data": {"url": "data/stocks.csv"},
"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
},
{
"mark": "point",
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "price", "type": "quantitative"},
"color": {"field": "symbol", "type": "nominal"}
}
}
]
}
Other packages similar to vega-lite
plotly.js
Plotly.js is a high-level, declarative charting library. It supports a wide range of chart types and is highly interactive. Compared to Vega-Lite, Plotly.js offers more built-in interactivity and a broader range of chart types, but it can be more complex to use.
chart.js
Chart.js is a simple yet flexible JavaScript charting library. It offers a variety of chart types and is easy to use for basic visualizations. Compared to Vega-Lite, Chart.js is more straightforward but less powerful for complex, interactive visualizations.
d3
D3.js is a powerful JavaScript library for creating data-driven documents. It provides fine-grained control over the visual appearance and behavior of charts. Compared to Vega-Lite, D3.js offers more flexibility and customization options but requires more effort and expertise to use effectively.
Vega-lite
Vega-lite is work in progress and we are working on improving the code and documentation.
Provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications.
Vega-lite specifications consist of simple mappings of variables in a data set to visual encoding channels such as position (x
,y
), size
, color
and shape
. These mappings are then translated into full visualization specifications using the Vega visualization grammar. These resulting visualizations can then be exported or further modified to customize the display.
Use Vega-lite in the online editor.
If you are using Vega-lite for your project(s), please let us know by emailing us at Vega-lite [at] cs.washington.edu. Feedbacks are also welcomed.
If you find a bug or have a feature request, please create an issue.
The complete schema for specifications as JSON schema is at spec.json.
Example specification
Barleys
{
"data": {"url": "data/barley.json"},
"marktype": "point",
"encoding": {
"x": {"type": "Q","name": "yield","aggregate": "avg"},
"y": {
"sort": [{"name": "yield","aggregate": "avg","reverse": false}],
"type": "O",
"name": "variety"
},
"row": {"type": "O","name": "site"},
"color": {"type": "O","name": "year"}
}
}
Simple bar chart
This is a similar chart as one of the Vega examples in https://github.com/trifacta/vega/wiki/Tutorial. See how much simpler it is.
{
"data": {
"values": [
{"x":"A", "y":28}, {"x":"B", "y":55}, {"x":"C", "y":43},
{"x":"D", "y":91}, {"x":"E", "y":81}, {"x":"F", "y":53},
{"x":"G", "y":19}, {"x":"H", "y":87}, {"x":"I", "y":52}
]
},
"marktype": "bar",
"encoding": {
"y": {"type": "Q","name": "y"},
"x": {"type": "O","name": "x"}
}
}
Setup Instructions
Make sure you have node.js. (We recommend using homebrew and simply run brew install node
.)
Install gulp globally by running
npm install -g gulp
Then install all the npm dependencies:
npm install
You can run gulp
to compile vega-lite or run gulp serve
to open the live vega-lite editor.
Developing Vega-lite and Datalib
Vega-lite depends on Datalib.
If you plan to make changes to datalib and test Vega-lite without publishing / copying compiled datalib all the time, use npm's link function.
# first link datalib global npm
cd path/to/datalib
npm link
# then link vega-lite to datalib
cd path/to/vega-lite
npm link datalib
Now all the changes you make in Datalib are reflected in your Vega-lite automatically.