Vega Chart widget

Charting widget based on Vega declarative visualization language.

https://kroki.io/svgbob/svg/eNpT0NPFAHpcCjUKQBCWmp6o4JyRWFQC4tUARTHV1nDp5isUF6Qmg5QoFGem5yXmFCvk64KFoTw4ACtOSSxJVEAGQIPVMQ1WBwBxpiH5

In-ports

spec JSON - The chart configuration as Vega JSON.

signals JSON - Dynamic variables that drive interactive updates.

data Array - The data for chart.

Out-ports

signals Object - The output dynamic variables and selections.

Overview

Vega Chart widget can render a wide variety of data visualizations. The visualizations are configurable using Vega JSON specification. To create a visualization, pass Vega specification to spec input and then connect your data source to the data input.

Vega specification supports data embedded into the specification itself. If you pass the configuration that includes the data in the spec, then leave the data input free. Otherwise the data in the spec will be overwritten.

Vega Chart also supports Vega signals - the dynamic variables that drive interactive updates. You need to explicitly specify which signals Vega Chart will be listening to in widget Settings dialog. You can set/update signal value by sending signal value event to signals input.

{
"data": 3.14,
"meta": {
"type": "KELP_CHART_SIGNAL",
"name": "metric"
}
}

Any change of the value for configured signals will trigger an event on signals output.

note

Vega signals are different from Kelp signals. For clarity, consider Vega signals as dynamic variables inside Vega Chart.

The following is an example of a simple bar chart Vega spec.

Vega bar chart spec
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": [
{
"name": "table",
"values": [
{
"category": "A",
"amount": 28
},
{
"category": "B",
"amount": 5
},
{
"category": "C",
"amount": 43
}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {
"data": "table",
"field": "category"
},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {
"data": "table",
"field": "amount"
},
"nice": true,
"range": "height"
}
],
"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"
},
"stroke": {
"value": "none"
}
}
}
}
]
}

Settings

Title

The title of the widget.

Signals

Declare signals that Vega Chart widget will be listening too. It includes both input and output signals. Click on "+" to add one or more signals.

Hide progress bar

Controls the visibility of widget progress bar. By default, widget progress bar is visible.

Hide help icon

Controls the visibility of help icon. By default, help icon is visible.

Related

Learn More