Vega Tutorials
Last updated
Last updated
These tutorials introduce you to common Vega specification patterns so you can start creating visualizations quickly and easily. Each tutorial uses a code example that demonstrates a particular Vega feature or pattern. The tutorial covers basic Vega concepts and serves as the foundation for some of the tutorials that follow, and introduces you to the API for communication with the backend. Other tutorials provide more in-depth information about specific Vega implementations.
Use these tutorials to gain a better understanding of Vega by experimenting with them to create new visualizations on your own HEAVY.AI system and database. You can also to make adjustments to Vega code and see real-time changes in charts.
For information about the Vega specification syntax and properties, see .
Because the tutorials focus on the Vega specification, they use a simple client implementation that sends the render request to the HEAVY.AI server and handles the response:
Common index.html
Common vegademo.js
On a connection error, you can view the error message to determine the cause of the error. To determine the cause of Vega specification errors, catch and handle the renderVega()
exception.
The renderVega()
function sends the exampleVega
JSON structure described in the tutorials. covers Vega library dependencies and the renderVega()
function in more detail.
- Provides an overiew of Vega and a simple example to visualize tweets.
- Maps a continuous, quantitative input domain to a continuous output range. Uses the same visualization as , but elaborates on the runtime environment and implementation steps.
- Builds on the tutorial by color-coding tweets according to language.
- Introduces marks
by creating a heatmap visualization of political donations.
- Shows how to use the marks
, which uses an implicit polygon data table format. The visualization in the tutorial is a map of zip codes, color-coded according to average political contribution amount.
- Describes the three modes of accumulation rendering and provides some implementation examples. The data used contains information about political donations, including party affiliation, the amount of the donation, and location of the donor.
- Shows how to create Vega-based visualizations with render properties that are driven by aggregated statistics. Use Vega transform aggregation and formula expressions to automate the process of gathering statistical information about a rendered query.
- Describes how to use SQL extension functions in Vega to map meters to pixels and improve map rendering.