Wondering how to get it to work when the canvas element does not already exist? about regl-scatterplot HOT 3 CLOSED

The following code does not work because canvasRef is not a valid property.

createScatterplot({
  canvasRef,
  width: 20,
  height: 20,
  pointSize: 5,
});

See https://github.com/flekschas/regl-scatterplot#basic-example, you need to pass the actual canvas element to regl-scatterplot as the canvas property. Not a React ref object.

The following should work, however, make sure that canvasRef.current is truly a canvas element and not null!

createScatterplot({
  canvas: canvasRef.current,
  width: 20,
  height: 20,
  pointSize: 5,
});

Personally, I would probably implement the React component like this (be aware, I haven't tested the code below!):

const Component = ({ points }) => {
  const scatterplotRef = useRef();
  const refHandler = (canvas) => {
    if (!canvas) return;
    const scatterplot = createScatterplot({
      canvas,
      width: 20,
      height: 20,
      pointSize: 5,
    });
    scatterplot.draw(points);
    scatterplotRef.current = scatterplot;
    return () => {
       scatterplot.destroy();
       scatterplotRef.current = undefined;
    }
  }

  useEffect(() => {
    if (!scatterplotRef.current) return;
    scatterplotRef.current.draw(points);
  }, [points]);

  return <canvas ref={refHandler} />;
}

from regl-scatterplot.

Thank you so very much!

EDIT:
@flekschas It works when the data is hardcoded...as in making from let's say something like Math.Random.
When I load an array from a file...basically anything that returns a promise, then it fails to work. I do not get any error, just a blank screen. I have normalized my data like you said one other issue.

Any idea how to make it work so that works even with a promise?

from regl-scatterplot.

Please open a new ticket with a detailed description. The original issue seems to have been fixed.

My hunch is that you're passing a promise to regl-scatterplot instead of the real data. That's not supported. Simply wait until the promise is resolved first before attempting to call scatterplot.draw(). But I am just guessing here.

from regl-scatterplot.