Search code examples
jsonchartsvisualizationvega-litevega

How To Set Dynamic Max Domain in VegaLite

I have a vega-lite plot that streams data, and I want the domainMax for x-axis to always be one value higher than the extent of the data.

I'm using ExprRef to specify what I want

"encoding": {
    "x": {
      "field": "time",
      "type": "quantitative",
      "scale": {
        "domainMax": {
          "expr": "extent(datum.time)[1] + 1"
        }
      },
   }
}

But I get the following error in Vega Editor Logs

[Error] datum is not defined

The full spec can be found here: Open in Vega Editor

Any help would be appreciated

Solution

  • I don't think you can refer to a datum there. Try this:

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 200,
  "height": 200,
  "description": "Evolution of sigma_x and sigma_y",
  "data": {
    "name": "sx_sy",
    "values": [
      {
        "time": 74.54999999999791,
        "sigma_x,sigma_y": -0.6484937856688245,
        "type": "σx"
      },
      {
        "time": 74.54999999999791,
        "sigma_x,sigma_y": 0.7451802282585529,
        "type": "σy"
      },
      {
        "time": 74.5999999999979,
        "sigma_x,sigma_y": -0.6857527970817522,
        "type": "σx"
      },
      {
        "time": 74.5999999999979,
        "sigma_x,sigma_y": 0.7108925884044653,
        "type": "σy"
      }
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "max", "field": "time", "as": "max"}]}
  ],
  "params": [{"name": "max", "expr": "data('data_0')[0]['max']"}],
  "mark": {"type": "line", "clip": true},
  "encoding": {
    "x": {
      "field": "time",
      "type": "quantitative",
      "scale": {"domainMax": {"expr": "max+0.1"}},
      "axis": {
        "labelFontSize": 20,
        "titleFontSize": 25,
        "title": "time (seconds)"
      }
    },
    "y": {
      "field": "sigma_x,sigma_y",
      "type": "quantitative",
      "scale": {"domain": [-1, 1]},
      "axis": {"labelFontSize": 20, "titleFontSize": 25, "title": "σx, σy"}
    },
    "color": {
      "field": "type",
      "type": "nominal",
      "legend": {"labelFontSize": 20, "title": ""}
    }
  }
}