こんにちは。
大量の点の 2 次元プロットを行いました。regl (WelGL ライブラリ）の利用に加え¹、d3.js を利用し²、マウスイベント処理（ズーム、スクロール）およびグリッドライン描画を行いました。

scatter.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <style>
    html,body{
        height: 100%;
        margin: 0;
    }
	.axis path {
	    display: none;
	}
	.axis line {
	    stroke-opacity: 0.1;
	    shape-rendering: crispEdges;
	}
	svg,
    #canvas {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    </style>
  </head>
  <body>
    <div id="canvas"></div>
  </body>
  <script language="javascript" src="https://npmcdn.com/regl/dist/regl.min.js"></script>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script language="javascript">
	const pointSize = 8, container = "#canvas";
	const nPoints =   1000;
	let transform = d3.zoomIdentity;
	const canvas = document.querySelector(container);
    const svg = d3.select(container).append('svg');
    const gX = svg.append("g").attr("class", "axis axis--x");
    const gY = svg.append("g").attr("class", "axis axis--y");
	const regl = createREGL({container: canvas});

	const createScatterPoints = () => {
		const generatePoints = (nPoints) => {
		  const rng = d3.randomNormal(0, 100);
		  return d3.range(nPoints).map(() => (
		      { x: rng(),
		        y: rng(),
		        color: [Math.random(), Math.random(), 0]})
		  );
		}
		
		const points = generatePoints(nPoints);
		
		const frag = `
		  precision highp float;
		  varying vec3 fragColor;
		  void main() {
		    gl_FragColor = vec4(fragColor, 1);
		  }`;
		
		const vert = `
		  varying vec3 fragColor;
		  attribute vec2 pos;
		  attribute vec3 color;
		  uniform float pointSize;
		  uniform vec2 scale;
		  uniform vec2 offset;

		  void main() {
		    fragColor = color;
		    gl_PointSize = pointSize;
		    gl_Position = vec4(pos * scale + offset, 0, 1);
		  }`;
		
		const drawPoints = regl({
		    frag: frag,
		    vert: vert,
		    primitive: 'points',
		    count: points.length,
		    attributes: {
		      pos: points.map(d => [d.x, d.y]),
		      color: points.map(d => d.color)
		    },
		    uniforms: {
		      pointSize: pointSize,
		      scale: regl.prop('scale'),
		      offset: regl.prop('offset'),
		    }
		});
		
		const drawScatterPoints = () => {
			const scale = [transform.k/window.innerWidth*2, transform.k/window.innerHeight*2];
			const offset = [transform.x/window.innerWidth*2 + (transform.k-1), -transform.y/window.innerHeight*2 - (transform.k-1)];
			regl.poll();
			drawPoints({scale: scale, offset: offset});
		};
		
		return drawScatterPoints;
	};
	

	const nTick = 10;
    const drawPoints = createScatterPoints();

	const render = () => {
		drawPoints();
		
		const {width, height} = canvas.getBoundingClientRect();
		const xScale = d3.scaleLinear()
			.domain([-width / 2, width / 2])
			.range([0, width]);
		const yScale = d3.scaleLinear()
			.domain([-height / 2, height / 2])
			.range([height, 0]);
			
		const xAxis = d3.axisBottom(xScale)
			.ticks((width + 2) / (height + 2) * nTick)
			.tickSize(height)
			.tickPadding(-12);
		const yAxis = d3.axisRight(yScale)
			.ticks(nTick)
			.tickSize(width)
			.tickPadding(-width + 6);

		const zoomed = (event, d) => {
			transform = event.transform;
			gX.call(xAxis.scale(transform.rescaleX(xScale)));
			gY.call(yAxis.scale(transform.rescaleY(yScale)));
			drawPoints();
		}

		const zoom = d3.zoom().on("zoom", zoomed);
		svg.call(zoom).call(zoom.transform, transform);
	};

    render();
    window.addEventListener('resize', render);

  </script>
</html>

参考：「大量の点の 2 次元プロット（regl）」 ↩
参考：「Zoomable Scatterplot (d3.js)」 ↩