chart = {
const width = 960;
const height = width;
const tree = d3.quadtree([], (i) => points[i][0], (i) => points[i][1]);
tree.cover(d3.min(points, ([x]) => x), d3.min(points, ([, y]) => y));
tree.cover(d3.max(points, ([x]) => x), d3.max(points, ([, y]) => y));
const x = d3.scaleLinear([tree._x0, tree._x1], [0.5, width - 0.5]);
const y = d3.scaleLinear([tree._y0, tree._y1], [height - 0.5, 0.5]);
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const g = svg.append("g")
.attr("stroke", "currentColor")
.attr("fill", "none");
g.append("rect")
.attr("x", x(tree._x0))
.attr("y", y(tree._y1))
.attr("width", x(tree._x1) - x(tree._x0))
.attr("height", y(tree._y0) - y(tree._y1));
yield svg.node();
const nodes = new Set();
for (let i = 0; i < points.length; ++i) {
tree.add(i);
let t = svg.transition();
svg.append("circle")
.attr("fill", "currentColor")
.attr("stroke", "white")
.attr("cx", x(points[i][0]))
.attr("cy", y(points[i][1]))
.attr("r", 0)
.transition(t)
.attr("r", 2.5);
quadtree_visitParent.call(tree, (x0, y0, x1, y1) => {
const key = [x0, y0, x1, y1].join();
if (nodes.has(key)) return;
nodes.add(key);
t = t.transition();
const xm = (x0 + x1) / 2;
const ym = (y0 + y1) / 2;
g.append("line").attr("x1", x(xm)).attr("y1", y(ym)).attr("x2", x(xm)).attr("y2", y(ym)).transition(t).attr("x1", x(x0));
g.append("line").attr("x1", x(xm)).attr("y1", y(ym)).attr("x2", x(xm)).attr("y2", y(ym)).transition(t).attr("x2", x(x1));
g.append("line").attr("x1", x(xm)).attr("y1", y(ym)).attr("x2", x(xm)).attr("y2", y(ym)).transition(t).attr("y1", y(y0));
g.append("line").attr("x1", x(xm)).attr("y1", y(ym)).attr("x2", x(xm)).attr("y2", y(ym)).transition(t).attr("y2", y(y1));
});
await t.end();
}
}