Docs
...
Vega Chart widgets

Vega Chart widgets in Decision Optimization experiments

Last updated: Feb 29, 2024
Vega Chart widgets in Decision Optimization experiments

The Vega Chart widget in the Visualization view uses Vega-Lite specifications to create different types of chart (bar charts, point charts, and so on) .

If you leave spec empty, a simple bar chart is automatically generated with the first string column in x-axis and the first number in y-axis.

Vega-Lite enables data filtering and transformation. For example, strings can be transformed into dates.

To learn more about Vega-Lite, see Vega-Lite - A High-Level Visualization Grammar.

The following advanced example shows the specification for a grouped bar chart based on a population data table. This example shows how to filter data and how to compute a virtual column:

{
  "name": "Population Grouped Bar Chart",
  "type": "Chart",
  "props": {
    "data": "population",
    "spec": {
      "transform": [
        {
          "filter": "datum.year == 2000"
        },
        {
          "calculate": "datum.sex == 2 ? 'Female' : 'Male'",
          "as": "gender"
        }
      ],
      "mark": "bar",
      "encoding": {
        "column": {
          "field": "age",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "sum",
          "field": "people",
          "type": "quantitative",
          "axis": {
            "title": "population",
            "grid": false
          }
        },
        "x": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "rangeStep": 12
          },
          "axis": {
            "title": ""
          }
        },
        "color": {
          "field": "gender",
          "type": "nominal",
          "scale": {
            "range": [
              "#EA98D2",
              "#659CCA"
            ]
          }
        }
      },
      "config": {
        "facet": {
          "cell": {
            "strokeWidth": 0
          }
        },
        "axis": {
          "domainWidth": 1
        }
      }
      }
    }
  }