Web worker target of d3.select

[jeffemandel]

I am trying to animate a graph in Vega, and have found some useful guidance in https://gist.github.com/timelyportfolio/7ea26d32a7534e4064df16cbf7abaa58, however, it seems that the event stream must come from something that is d3 selectable. While this could be achieved by having a web worker posting an event back to the main thread and then posting the event to a listener on the window, I'm wondering if there is a way to do this in one fell swoop:
timerworker.js

onmessage = event => {
    const interval = event.data;
    let count =0;
    setInterval( () => { 
        const msg["count"] = count++;
        postMessage({msg);
    },interval);

Main.js

let timerworker = new Worker('timerworker.js');
timerworker.postMessage(1000);

Is there a way that the Vega spec could simply be:

          "on": [
            {
              "events": "timerworker: message",
              "update": "event.count"
            }
          ]

This would require d3.select('timeworker') to return a reference to the web worker, which is not in the DOM.

[Fil]

This is probably more a question for vega? (I don't think d3.select will be extended to something other than “a set of elements from the DOM”.)

[jeffemandel]

I don't think Vega can solve the problem. Referring to the Gist:

 		// custom event that will show in our Vega graph
    setInterval(
      function() {d3.select(window).dispatch("updateclock",{detail:{time: new Date()}})},
      1000
    );

So the setInterval call is making a selection from window and dispatching an "updateclock" message to it. I want the setInterval inside the web worker (so it can't get blocked by activity on the main thread). I am considering two kludges to accomplish this:

1. Sending a reference to window (or something else in the DOM accessible to the vega graph) into the web worker.
2. Installing a listener for timeworker message on the main thread and reposting the message to the window.

I suspect 1) will be the more efficient solution, and probably won't require using d3. I do, however, feel that there are use cases for timed events coming out of a web worker, so it might be worth considering at some point.

[Fil]

I don't think the approach 1 is possible, since you can only send serializable values between worker and main thread. Approach 2 would seem like the correct way of doing it.

[jeffemandel]

I gave up on approach 1) and have approach 2) working. I'll try to put together a working gist at some point, but for the impatient, my web worker takes an element of the form {period: Number, stepsize:Number, start: Number, end:Number}

index = element.start;
let myInterval = setInterval(() => {
  postMessage({ dataindex: index });
  index += element.stepsize;
   if (index > element.end) {
    clearInterval(myInterval);
  }
}, element.period);

The DOM thread has:

myWorker.onmessage = (e) => {
  let dataindex = e.data.dataindex;
  const event = new CustomEvent("updateIndex", { detail: dataindex });
  window.dispatchEvent(event);
};

and the vegaspec has:

"signals": [
  {
    "name": "dataindex",
    "value": 0,
    "init": 0,
    "on": [
      {
        "events": "window:updateIndex",
        "update": "event.detail"
      }
    ]
  }
]

The signal dataindex then drives the marks to display my graph at the specified rate. In my admittedly complex vega graphic, the animation gets ugly with period*stepsize < 10, but tinkering with these parameters yields reasonable results.
Does this approach warrant inclusion in d3 or vega? I'm doing realtime pharmacokinetic visualizations, so having my events throttled by a user switching tabs is bad. Having the timing coming from a web worker off the DOM thread is good. I probably am not alone in this. How could this be implemented? The simplest approach would be for d3.select to see whether the selector is a DOM element or is an EventTarget and if so, respond appropriately.

[jeffemandel]

I have very a rudimentary gist. Having done this, I don't see an easy way to implement this in either Vega or D3, and for what I'm doing with my PK sim, getting access to the timing events from the web worker events is better than installing a signalListener on the vega visualization.