こんにちは。
regl-scatterplot (GitHub) を見つけ、そっくりそのままを動かしてみました。
- WebGL-based Scatterplot build with Regl (regl-scatterplot demo)
100万点（a million）をプロットした場合もスクロール・ズームのレスポンスについては良いようです1。
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 利用の場合）で現状無効化されているようです2。
-
なお、regl をシンプルに用いて大量プロット性能をより向上させる試みは、「大量の点の 2 次元プロット（regl）」。 ↩
-
Scatter Plot Points don't retain individual color values when using boost.js (highcharts issue, GitHub) ↩