chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const brush = d3.brush()
.filter(event => !event.ctrlKey
&& !event.button
&& (event.metaKey
|| event.target.__data__.type !== "overlay"))
.on("start brush end", brushed);
const circle = svg.append("g")
.attr("fill-opacity", 0.2)
.selectAll("circle")
.data(Array.from({length: 2000}, () => [rx(), ry()]))
.join("circle")
.attr("transform", d => `translate(${d})`)
.attr("r", 3.5);
svg.append("g")
.attr("class", "brush")
.call(brush)
.call(brush.move, [[100, 100], [200, 200]])
.call(g => g.select(".overlay").style("cursor", "default"));
function brushed({selection}) {
if (selection === null) {
circle.attr("stroke", null);
} else {
const [[x0, y0], [x1, y1]] = selection;
circle.attr("stroke", ([x, y]) => {
return x0 <= x && x <= x1
&& y0 <= y && y <= y1
? "red" : null;
});
}
}
return svg.node();
}
rx = d3.randomUniform(0, width)
ry = d3.randomUniform(0, height)
height = 500
import {keys} from "@mbostock/keys"
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.
