こんにちは。
regl-scatterplot (GitHub) を見つけ、そっくりそのままを動かしてみました。

WebGL-based Scatterplot build with Regl (regl-scatterplot demo)

100万点（a million）をプロットした場合もスクロール・ズームのレスポンスについては良いようです¹。

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>regl-scatterplot</title>
  <style type="text/css">
    #canvas-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    #canvas {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="canvas-wrapper"><canvas id="canvas"></canvas></div>
  <script src="https://www.unpkg.com/pub-sub-es@2.0.1/dist/pub-sub-es.js"></script>
  <script src="https://npmcdn.com/regl@2.0.1/dist/regl.js"></script>
  <script src="https://www.unpkg.com/regl-scatterplot@0.17.0/dist/regl-scatterplot.js"></script>
  <script>
    const pointSize = 3;
    const nPoints = 10000;
    const colors = ['#00ff00', '#ff8080', '#8080ff'];

    const canvas = document.getElementById('canvas');
    const scatterplot = createScatterplot.default({canvas});
    scatterplot.set({pointSize});
    scatterplot.set({colorBy: 'category', pointColor: colors});

    const resizeHandler = () => scatterplot.set(canvas.getBoundingClientRect());
    resizeHandler();
    window.addEventListener('resize', resizeHandler);

    const rng = () => Math.random() * 2 - 1;
    const points = new Array(nPoints)
      .fill()
      .map(() => [
        rng(),  // x
        rng(),  // y
        Math.floor(Math.random() * colors.length)  // category
      ]);
    scatterplot.draw(points);
  </script>
</body>
</html>

Highcharts

なお、Scatter plot with 1 million points (Highcharts demo) （大量の点をプロット）も調べました。各点を色指定する機能（colorByPoint）は、 boost.js 内（WebGL 利用の場合）で現状無効化されているようです²。

なお、regl をシンプルに用いて大量プロット性能をより向上させる試みは、「大量の点の 2 次元プロット（regl）」。 ↩
Scatter Plot Points don't retain individual color values when using boost.js (highcharts issue, GitHub) ↩