Embedded interactive visualisations in Anvil using e.g. Vega Lite?

Anvil Q&A
9

@meredydd thank you for this post, this is amazing! I know I’m coming to it quite late but it addresses exactly what I’ve wanted to do recently. I am using Vega rather than Vega-Lite but this approach works perfectly. I have a couple of follow-up questions:

  1. I’d like to make my plot reactive, i.e. resize it when the parent component is resized. I think I could do this through pure Javascript event capture, without “Anvil” knowing anything about it at all, but I’m wondering if it makes sense to do it through some kind of Anvil functionality - for instance does Anvil already capture resize events?

  2. Would it make any sense to attempt to capture and respond to Vega event streams, like hover or click, within Anvil? For instance, modifying your Step 3 slightly to run straight Vega code rather than vega-embed:

function initVega(spec){
  view = new vega.View(vega.parse(spec), {
    renderer:  'canvas',  // renderer (canvas or svg)
    container: '#vis',   // parent DOM container
    hover:     true       // enable hover processing
  });
  view.runAsync();
}

If this were a pure JS app, I would call return view.runAsync() at the end of that function and be able to use the Vega view API through the returned object. I’m not sure if there is any sensible way to handle the returned object within Anvil.

A use-case for this, for instance, would be to allow Anvil’s client-side-Python code to know which data points on the plot the user has selected, as (I think) it can do for Plotly plots.