Minimal Observable Plot example

[vwkd]

How can I create an interactive plot using Observable Plot in a Jupyter notebook with Deno kernel in VSCode?

I managed to adapt the example on deno.land/x/anywidget for Observable Plot, but I'm not sure what to do in the model.on callback? I've tried setting node.value but it silently fails.

Also, how can I show a graphical user input like a slider and hook it up to change the plot? A timeout is a nice start but better would be if the user can control it.

In[1]:

const data0 = [
  {x: 0, y: 0},
  {x: 1, y: 1},
];

const data1 = [
  {x: 0, y: 1},
  {x: 1, y: 2},
]

const data2 = [
  {x: 0, y: 2},
  {x: 1, y: 3},
]

const datas = [data0, data1, data2];

In[2]:

import { widget } from "https://deno.land/x/[email protected]/mod.ts";

const model = await widget({
    state: { data: data0 },
    imports: `\
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/+esm";
`,
    render: ({ model, el }) => {
      function createPlot(data) {
          return Plot.plot({
            x: {
              ticks: 1
            },
            marks: [
              Plot.line(data, { x: "x", y: "y" })
            ]
          });
      }

        const plot = createPlot(model.get("data"));

        model.on("change:data", () => {
            // todo: doesn't work
            plot.value = createPlot(model.get("data"));
        });
        
        el.appendChild(plot);
    },
});

model;

In[3]:

for (let data of datas) {
  model.set("data", data);

  await new Promise((resolve) => setTimeout(resolve, 1000));
}

[manzt]

I don't know Plot very well but I don't believe it supports updates the data for the existing plot: you need to recreate a new SVG (createPlot) and replace existing node in the DOM.

        model.on("change:data", () => {
            // remove the existing plot
            el.removeChild(el.firstChild);
            // make a new one
            el.appendChild(createPlot(model.get("data")));
        });