Public
Edited
Jul 21, 2023
11 forks
38 stars
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const brush = d3.brush()
.on("brush end", brushed);
svg.append("style").text(`
.point--scanned {
fill: orange;
fill-opacity: 1;
stroke: orange;
stroke-width: 3px;
}
.point--selected {
fill: red;
fill-opacity: 1;
stroke: red;
stroke-width: 5px;
}
`);
svg.append("g")
.attr("fill", "none")
.attr("stroke", "#ccc")
.selectAll("rect")
.data(nodes(quadtree))
.join("rect")
.attr("class", "node")
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("width", d => d.y1 - d.y0)
.attr("height", d => d.x1 - d.x0);
const point = svg.append("g")
.attr("fill-opacity", 0.4)
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", 2);
svg.append("g")
.call(brush)
.call(brush.move, [[100, 100], [200, 200]]);
function brushed({selection}) {
point.each(d => d.scanned = d.selected = false);
if (selection) search(quadtree, selection);
point.classed("point--scanned", d => d.scanned);
point.classed("point--selected", d => d.selected);
}
return svg.node();
}
// Find the nodes within the specified rectangle.
function search(quadtree, [[x0, y0], [x3, y3]]) {
quadtree.visit((node, x1, y1, x2, y2) => {
if (!node.length) {
do {
const {data: d, data: [x, y]} = node;
d.scanned = true;
d.selected = x >= x0 && x < x3 && y >= y0 && y < y3;
} while ((node = node.next));
}
return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0;
});
}
quadtree = d3.quadtree()
.extent([[-1, -1], [width + 1, height + 1]])
.addAll(data)
// Collapse the quadtree into an array of rectangles.
function nodes(quadtree) {
const nodes = [];
quadtree.visit((node, x0, y0, x1, y1) => void nodes.push({x0, y0, x1, y1}));
return nodes;
}
data = {
const randomX = d3.randomUniform(0, width);
const randomY = d3.randomUniform(0, height);
return Array.from({length: 2500}, () => [randomX(), randomY()]);
}
height = 500
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
