Public
Edited
Oct 24, 2022
3 forks
2 stars
brushArea = d3.areaRadial()
.angle(d => x(d))
.innerRadius(innerRadius)
.outerRadius(outerRadius);
{
let svg = d3.select(chart)
.style('user-select', 'none');
svg.on("mousedown", (e) => {
const theta = Math.PI - Math.atan2(...d3.pointer(e));
set(viewof brushStart, x.invert(theta));
svg.selectAll("#brush-area").remove();
});
svg.on("mouseup", (e) => {
const theta = Math.PI - Math.atan2(...d3.pointer(e));
set(viewof brushStop, x.invert(theta));
svg.selectAll("#brush-area")
.data([Array(100).fill(1).map( (d, i) => i * (x.invert(theta) - brushStart) / 100 + brushStart)])
.join("path")
.attr("d", d => brushArea(d))
.attr("fill", "grey")
.attr("stroke", "black")
.attr("opacity", 0.5)
.attr("id", "brush-area");
});
// // TODO: Disable selection of text
// svg.selectAll("g").attr("pointer-events", "none")
}
import {chart, x, innerRadius, outerRadius} from "271570a96e6dcedf"
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.
