31:T42b,{ if (preview === null) { return md`**Select a row in the table to preview**`; } const trees = [showquadtree({ showRegions }), showrtree({ showRegions })]; const quadtree = showquadtree(); const rtree = showrtree(); const $div = htl.html`

${md`Hover to see the retrieved candidates (in blue) and those who are within the mouse perimeter in green.`}

${trees}`; const trott = _.throttle( function (e) { const pointer = d3.pointer(e); trees.map(async (tree) => tree.value(...pointer, mouseRadius, timeSamples) ); }, 30, // trailing: true makes it very jiggly :( { leading: true, trailing: false } ); d3.select($div) .selectAll("canvas") .on("pointermove click pointerout", null) .on("pointermove click", trott) .on("pointerout", function (e) { const pointer = d3.pointer(e); trees.map(async (tree) => tree.value(...pointer, 0, timeSamples)); }); return $div; }32:Ta2d,function figure({ regions = [], preview = { radius: 0, shape: 0 }, size = 512, drawRegion = (i) => i, retrieve = () => [], foundCircle = (i) => i, showRegions = true, mouseRadius = 10 } = {}) { const shape = 2 * preview.radius + preview.shape; const scale = size / shape; const invscale = shape / size; const context = DOM.context2d(size, size); const regionsctx = DOM.context2d(size, size); // yield context.canvas; context.scale(scale, scale); regionsctx.scale(scale, scale); function drawRegions(context) { context.globalAlpha = points.length > 200 ? 0.4 : 0.8; context.strokeStyle = `#000`; regions.forEach(drawRegion(context)); } if (showRegions) drawRegions(regionsctx); const $time = htl.html``; const $measure = htl.html``; const $count = htl.html``; const $div = htl.html`

${context.canvas}

it took ${$time}ms mean(${$measure}) to find the ${$count} overlap candidates.`; let times = []; function draw(x, y, mouseRadius, samples = 30) { context.clearRect(0, 0, shape, shape); context.drawImage(plotPoints, 0, 0, shape, shape); context.drawImage(regionsctx.canvas, 0, 0, shape, shape); const mouseCircle = { x: x * invscale, y: y * invscale, r: mouseRadius }; const start = performance.now(); const found = retrieve(mouseCircle); const end = performance.now(); if (found.length > 0) { times.push(end - start); times = times.slice(-samples); $time.textContent = d3.mean(times).toFixed(2); $measure.textContent = times.length; } context.globalAlpha = 1; context.strokeStyle = "#000"; for (const f of found) { context.beginPath(); context.lineWidth = 1; const c = foundCircle(f); context.arc(c.x, c.y, c.r, 0, 2 * Math.PI); context.fillStyle = overlap(c, mouseCircle) ? "green" : "#3388ff"; context.stroke(); context.fill(); } context.fillStyle = "red"; context.beginPath(); context.lineWidth = 5; context.arc(mouseCircle.x, mouseCircle.y, mouseCircle.r, 0, 2 * Math.PI); context.stroke(); } draw(); const trott = _.throttle( function (e) { draw(...d3.pointer(e), mouseRadius); }, 30, // trailing: true makes it very jiggly :( { leading: true, trailing: false } ); d3.select(context.canvas) .style("touch-action", "none") .style("cursor", "crosshair") .on("pointermove click", trott) .on("pointerout", function (e) { draw(...d3.pointer(e), 0); }); return Object.assign($div, { value: draw }); }33:[] 2f:{"title":"Quadtree vs R-tree","cells":[{"id":0,"value":"# Quadtree vs R-tree","pinned":false,"hidden":false,"mode":"md"},{"id":918,"value":"I'm all in if you have any idea of how to improve perf on either of these algorithms :), please comment :)","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"viewof preview = Inputs.table(filtered, {\n multiple: false,\n sort: \"qte\",\n format: {\n samples: (s) =>\n histogram(s, {\n domain: [0, 1],\n thresholds: 20,\n width: 100,\n color: { fill: \"#1e90ff\" },\n domainline: { size: 0.25, stroke: \"black\" }\n })\n // radius: (s) =>\n // svg`