javascriptvega-litevegavega-lite-api

How to get store a changing signal value in a java variable using the VEGA API?


I embedded my vega visualisation into html and want to use some variables as inputs for further javascript specifications.

How can I bind a javascript variable to a VEGA signal which can change depending on my interaction with the visualisation? I want the variable to change online with the changing VEGA signal. Is this possible?

I am able to see my variables in the console using the signal listener:

    view.addSignalListener('num_points', function(name, value) {
                    points = value ;
                    console.log(points)
                    console.log(name + ': ' + value);
                    document.getElementById("demo").textContent = points;
                    });

I thought the easiest way is to simply bind the variable to an Element (here called "demo") and access the value for later purpose. However, even though when changing the variable the text content of the element is changing correctly, fetching the text content for later purposes remains with the initial value thus does not get updated. I also tried using view.signal('name'), however, it does not do anything for me.


Solution

  • Use Vega View API's addSignalListener to listen for changes to signal and update a variable accordingly:

    let points:
    const view = new vega.View(vega.parse(yourVegaSpec))
      .renderer('canvas')
      .initialize('#view')
      .hover()
      .run();
    view.addSignalListener('num_points', function(name, value) {
      points = value;
      console.log(points);
      console.log(name + ': ' + value);
      document.getElementById("demo").textContent = points;
    });