Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
vega-lite
Advanced tools
Vega-lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications.
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.
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"}
}
}
]
}
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 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.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 provides a higher-level grammar for visual analysis, akin 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 detailed visualization specifications in the form of Vega specification language. Vega-Lite produces default values for visualization components (e.g., scales, axes, and legends) in the output Vega specification using a rule-based approach, but users can explicit specify these properties to override default values.
Try using Vega-Lite in the online Vega Editor.
The complete schema for specifications as JSON schema is at vega-lite-schema.json.
Note: Vega-Lite is still in alpha phase and we are working on improving the code and documentation. Our syntax might change slightly before we release 1.0. See our wiki pages for the development roadmap and how you can contribute. If you find a bug or have a feature request, please create an issue.
We have more example visualizations in our gallery.
{
"data": {"url": "data/barley.json"},
"mark": "point",
"encoding": {
"x": {"type": "quantitative", "field": "yield","aggregate": "mean"},
"y": {
"sort": {"field": "yield", "aggregate": "mean", "reverse": false},
"type": "ordinal",
"field": "variety"
},
"row": {"type": "ordinal", "field": "site"},
"color": {"type": "ordinal", "field": "year"}
}
}
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": [
{"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": {"type": "ordinal", "field": "a"},
"y": {"type": "quantitative", "field": "b"}
}
}
Make sure you have node.js. (We recommend using homebrew and simply run brew install node
.)
Then, cd into your local clone of the repository, and install all the npm dependencies:
cd vega-lite
npm install
Since Vega-Lite is written in Typescript, you should also install TypeScript
npm install -g typescript
We use the atom editor with typescript support. If you don't want to see intermediate files (.js
, .js.map
), you can "Hide VCS Ignored Files" in the tree-view
plugin.
You can run npm run build
to compile Vega-Lite and regenerate vega-lite-schema.json
. More commands are available in npm run
.
During development, it can be convenient to rebuild automatically or run tests in the background.
You can npm run watch:dev
to start a watcher task that lints and runs tests when any .ts
file changes.
You can use npm run watch:build
to start a watcher task that re-compiles Vega-Lite when .ts
files related to VL change.
The previous two commands run very fast but don't run all tasks that you may want. If you are okay to use a slow command, you can use npm run watch:all
to start a watcher task that when any .ts
file changes:
vega-lite-schema.json
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.
FAQs
Vega-Lite is a concise high-level language for interactive visualization.
The npm package vega-lite receives a total of 99,189 weekly downloads. As such, vega-lite popularity was classified as popular.
We found that vega-lite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.