Function main

examples/scatter-density-1m/main.ts:91–187

()

};

async function main(): Promise<void> {
  const container = getEl<HTMLDivElement>('chart');

  const binSizeInput = getEl<HTMLInputElement>('binSize');
  const binSizeValue = getEl<HTMLSpanElement>('binSizeValue');
  const colormapSelect = getEl<HTMLSelectElement>('colormap');
  const normalizationSelect = getEl<HTMLSelectElement>('normalization');
  const totalPointsEl = getEl<HTMLSpanElement>('totalPoints');
  const binnedPointsEl = getEl<HTMLSpanElement>('binnedPoints');

  binSizeValue.textContent = binSizeInput.value;
  binSizeInput.addEventListener('input', () => {
    binSizeValue.textContent = binSizeInput.value;
  });

  const points = await createPointsChunked(1_000_000, 1337);
  const n = points.length;
  const fmt = new Intl.NumberFormat(undefined);
  totalPointsEl.textContent = fmt.format(n);

  const baseOptions: ChartGPUOptions = {
    theme: 'dark',
    xAxis: { type: 'value' },
    yAxis: { type: 'value' },
    series: [
      {
        type: 'scatter',
        name: 'density',
        data: points,
        mode: 'density',
        binSize: Number(binSizeInput.value),
        densityColormap: colormapSelect.value as any,
        densityNormalization: normalizationSelect.value as any,
        sampling: 'none',
      } as any,
    ],
  };

  const chart = await ChartGPU.create(container, baseOptions);

  // Since points are sorted by x, we can estimate how many points the density pass will bin by
  // mapping percent-space zoom to an x-window and doing a binary search.
  const xMin = n > 0 ? points[0]![0] : 0;
  const xMax = n > 0 ? points[n - 1]![0] : 1;
  const xSpan = xMax - xMin;

  let lastBinnedText = '';
  let lastUpdateMs = 0;
  const updateBinnedReadout = (): void => {
    const zoom = chart.getZoomRange();
    const startPct = Math.max(0, Math.min(100, zoom?.start ?? 0));
    const endPct = Math.max(0, Math.min(100, zoom?.end ?? 100));
    const a = Math.min(startPct, endPct) / 100;
    const b = Math.max(startPct, endPct) / 100;

    const visibleXMin = xMin + a * xSpan;
    const visibleXMax = xMin + b * xSpan;
    const i0 = lowerBoundByX(points, visibleXMin);