function createScatterplotView(opts = {}) {
const canvas = html`<canvas width="${opts.width}" height="${opts.height}"></canvas>`;
const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();
const scatterplot = createScatterplot.default({
canvas: canvas,
pointSize: 5,
xScale,
yScale,
...opts
});
canvas.value = { ...scatterplot, xScale, yScale };
canvas.value.selectedPoints = [];
canvas.value.camera = scatterplot.get("camera");
scatterplot.subscribe("view", ({ camera }) => {
canvas.value.camera = camera;
});
scatterplot.subscribe("select", ({ points }) => {
console.log("select");
canvas.value.selectedPoints = points;
canvas.dispatchEvent(new Event("input"));
});
invalidation.then(() => scatterplot.destroy());
return canvas;
}