I'm trying to downsample an array that has ~10,000,000 points based on the current zoom state.

The downsampling mechanism is through downsample module, using LTTB function; below is a simple example of how it's done crossfilter

const ARRAY_LENGTH = 1e7;
const MAX_VAL = 40;
const randomArray = [];
for (let i = 0; i < ARRAY_LENGTH; i += 1) {
  randomArray.push({ x: i, y: Math.floor(Math.random() * MAX_VAL) });
}
export { randomArray };

const chartWidth = 10000;
export const downsampledData = LTTB(randomArray, chartWidth);
export const downsampledDataArray = downsampledData as Array<{
  x: number;
  y: number;
}>;

Now I'm trying to figure out how to implement LTTB using crossfilter, so I can use zoom callback to only render the 10,000 points within the zoom window.

The simplified dc.js code is as follows:

  const xy = crossfilter(downsampledDataArray);
  const dimension = xy.dimension((d) => [d.x, d.y]);

  const group = dimension.group();

  const chart = dc
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    .lineChart(divRef) // @type error
    .margins({ top: 10, right: 50, bottom: 50, left: 60 })
    .x(d3.scaleLinear().domain([0, 1e7]))
    .yAxisLabel('Photons/s')
    .xAxisLabel('Time')
    .keyAccessor((d) => {
      return d.key[0];
    })
    .valueAccessor((d) => {
      return d.key[1];
    })
    .clipPadding(10)
    .renderArea(false)
    .dimension(dimension)
    .mouseZoomable(true)
    // .excludedColor('#ddd')
    .group(group);

Here's a stackblitz with chart rendering using the above pre-downsampled data