Removing line marks from the scenegraph once thier datum is removed.

Hey,

I’m trying to make a live line plot with a scrolling window of the last 30 seconds on the x axis. My spec looks like this:

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "autosize": "pad",
  "padding": 20,
  "signals": [
    {
      "name": "xDomain",
      "value": [
        0,
        0
      ]
    }
  ],
  "data": [
    {
      "name": "livedata"
    }
  ],
  "scales": [
    {
      "name": "time",
      "type": "time",
      "range": "width",
      "domain": {
        "signal": "xDomain"
      }
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {
        "data": "livedata",
        "field": "y"
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "time"
    },
    {
      "orient": "left",
      "scale": "y"
    }
  ],
  "marks": [
    {
      "type": "line",
      "from": {
        "data": "livedata"
      },
      "clip": true,
      "encode": {
        "update": {
          "x": {
            "scale": "time",
            "field": "time"
          },
          "y": {
            "scale": "y",
            "field": "y"
          },
          "defined": {
            "signal": "datum.time > xDomain[0]"
          }
        }
      }
    }
  ]
}

I’m achieving the live time scrolling animation by updating the xDomain signal with

view.signal("xDomain", [Date.now() - 30e3 -200, Date.now() - 200]);

via the view API and calling .run() in the browser requestAnimationFrame callback.

The backing data source livedata is updated every ~100ms via the view API call:

view.change('livedata', view.changeset().remove(()=>true).insert(livedata))

Here the livedata variable only contains the last ~30sec of the stream with old data being dropped.

This initially works pretty well, the data is smoothly plotted over time (which each re-render taking ~4ms on my machine). However when left for any period of time it becomes very sluggish with the render time steadily increasing. I believe this is due to the marks on the scene-graph not being removed even after the data backing them has gone. Hence they build up over time and bring the renderer to its knees.

So my Question is: Is there any way to removed marks from the scene-graph after their datum has gone?

I’m basically looking for something akin to d3s

.exit().remove()

I however not find anything in the documentation regarding this.

Cheers, Rob

[jheer]

I agree. I just published vega-dataflow 4.0.2, which includes new safeguards for changeset processing. Your example code now works with these new changes, which will be included in the Vega 4.0.0 release.

[rmcgregor1990]

My actual use case for these live graphs is within a React-Redux application. All the datasets live in the Redux store, so not being able to cleanly override vegas dataset on a re-render is a bit sad.

I guess can perform some form of diff of the new and the old datasets to derive the changeset.

Cheers for taking to the time to look into this, Rob