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.