Skip to content

Input Vega Vega Lite Visualization Specs

Younghoon Kim edited this page Sep 29, 2020 · 1 revision

Input Vega/Vega-Lite Visualization Specifications

The current Gemini has two constraints for input Vega visualization specifications.

  1. Vega visualizations need to have no more than 1 axis for x and y. In other words, the current Gemini only supports the single-view charts and cannot animate the facetted/multi-view charts.

  2. Vega visualization specs need to specify name for each mark, axis, and legend component. It is required for Gemini to match the components between the two given visualization specifications. Without specifying their names, Gemini cannot match them and not know how the components of the start spec change to the end spec. The following is how to put the name of each component.

  • Mark The name of the mark can be set on the name property.
{
  "name": "marks",
  "data": ...,
  "encoding": ...,
  ...
}
  • Axis The name of the axis can be set on the encode.axis.name.
// The name this axis is "x-axis"
{
  "scale": "x",
  "orient": "bottom",
  ...,
  "encode": {"axis": {"name": "x-axis"}}
}
  • Legend The name of the legend can be set on the encode.legend.name.
// The name this legend is "legend0"
{
  "stroke": "color",
  "symbolType": "circle",
  ...,
  "encode": {
    "legend": {"name": "legend0"},
    ...
  }
}

Gemini also help this naming for Vega-Lite specification via vl2vg4gemini function, which compiles a Vega-Lite spec to a Vega spec while putting the names on the axes ("x", "y" for the x-axis and y-axis respectively) and legends ("legned0", "legend1", ...)

Clone this wiki locally