{ let elapsedMillisMovingAverage = null; const movingAverageAlpha = 0.01; const lookupGrid = new LookupGrid(points, influenceRadius); const cursor = svg``; const candidates = svg``; const neighbors = svg``; const gridLinesV = d3 .range(0, width, influenceRadius * 2) .map(x => svg``); const gridLinesH = d3 .range(0, height, influenceRadius * 2) .map(y => svg``); const theSvg = html``; const log = html`

`; update({ x: width / 2, y: height / 2 }); function update(cursorPosition) { cursor.setAttribute("cx", cursorPosition.x); cursor.setAttribute("cy", cursorPosition.y); candidates.setAttribute( "d", computePointsPathAttrD( lookupGrid.getPointsInAdjacentCells(cursorPosition) ) ); const { result: neighborPoints, elapsedMillis } = time(() => lookupGrid.getNeighbors(cursorPosition) ); elapsedMillisMovingAverage = (1 - movingAverageAlpha) * (elapsedMillisMovingAverage ?? elapsedMillis) + elapsedMillis * movingAverageAlpha; log.innerHTML = ""; log.appendChild( md`Last search duration: ${elapsedMillis.toFixed( 4 )}ms.
Exponential moving average (${tex`\alpha`}=${movingAverageAlpha.toFixed( 3 )}): ${elapsedMillisMovingAverage.toFixed( 4 )}ms.
(Render duration ≠ Search duration)` ); neighbors.setAttribute("d", computePointsPathAttrD(neighborPoints)); } theSvg.addEventListener("pointermove", function(event) { const origin = theSvg.getBoundingClientRect(); const x = event.clientX - origin.x; const y = event.clientY - origin.y; update({ x, y }); }); return html`

${theSvg} ${log} The duration is measured for the lookup call exclusively. Keep in mind that rendering may be slow even though the search is fast. This demo also does a secondary search to find and highlight all points in the closest four grid cells, to illustrate the algorithm.

`; }

Purpose-built for displays of data