Vega is a visualization grammar, a declarative format for creating, sharing, and exploring interactive visualization designs. With Vega, you can describe data visualizations in a JSON format, and it provides a set of tools to render these visualizations in web applications.
Declarative Visualization
This code sample demonstrates how to create a simple bar chart using Vega's declarative JSON format. It defines the data, scales, axes, and marks to render the chart.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "table", "field": "amount"},
"range": "height",
"nice": true
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
}
]
}Interactive Visualization
This code sample demonstrates how to add interactivity to a Vega visualization. It includes a tooltip that displays the data values when hovering over the bars in the chart.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"type": "linear",
"domain": {"data": "table", "field": "amount"},
"range": "height",
"nice": true
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "black"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [{"test": "datum === tooltip", "value": 0}, {"value": 1}]
}
}
}
]
}D3.js (Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It uses HTML, SVG, and CSS. Unlike Vega, which uses a declarative JSON format, D3 provides a more imperative approach, giving developers fine-grained control over the visualization.
Chart.js is a simple yet flexible JavaScript charting library for designers and developers. It offers a variety of chart types and is easy to use with a straightforward API. Compared to Vega, Chart.js is more focused on ease of use and simplicity, making it a good choice for quick and simple visualizations.
Plotly.js is a high-level, declarative charting library built on D3 and stack.gl. It supports a wide range of chart types and is known for its interactivity and ease of use. Plotly.js provides a higher level of abstraction compared to D3, similar to Vega, but with a focus on scientific and engineering applications.
Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.
For documentation, tutorials, and examples, see the Vega website. For a description of changes between Vega 2 and later versions, please refer to the Vega Porting Guide.
Use npm or yarn to install Vega for use in third-party libraries or applications.
Using npm:
npm install vega
or using yarn:
yarn add vega
If you would like to install the Vega command line utilities (vg2pdf, vg2png, vg2svg), see the vega-cli package.
Interested in contributing to Vega? Please see our contribution and development guidelines, subject to our code of conduct.
Looking for support, or interested in sharing examples and tips? Post to the Vega discussion forum or join the Vega slack organization!
Read about future plans in our roadmap.
This package builds the bundled Vega library files and the JSON schema. It also includes a high-level test suite. If performing local development:
yarn build to build both browser and node.js bundles.yarn test to run the test suite.FAQs
The Vega visualization grammar.
The npm package vega receives a total of 144,274 weekly downloads. As such, vega popularity was classified as popular.
We found that vega demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.