Public
Edited
Nov 16, 2023
horizon = 100
drag = circles => {
// Choose the circle that is closest to the pointer for dragging.
function dragsubject(event) {
let subject = null;
let distance = maxDistance;
for (const c of circles) {
let d = Math.hypot(event.x - c.x, event.y - c.y);
if (d < distance) {
distance = d;
subject = c;
}
}
return subject;
}
// When starting a drag gesture, move the subject to the top and mark it as active.
function dragstarted(event) {
//circles.splice(circles.indexOf(event.subject), 1);
//circles.push(event.subject);
event.subject.active = true;
}
// When dragging, update the subject’s position.
function dragged(event) {
const pos = event.subject.proj(event.x, event.y, circles);
event.subject.x = pos.x;
event.subject.y = pos.y;
if(event.subject.mag != undefined) {
event.subject.m = event.subject.mag(pos.x, pos.y, circles);
}
if(event.subject.update != undefined) {
event.subject.update(pos.x, pos.y, circles);
}
for(const circle of circles) {
if(circle == event.subject.circle) continue;
if(circle.m != undefined && circle.proj_mag != undefined) {
circle.x = circle.proj_mag(circle.m, circles).x;
circle.y = circle.proj_mag(circle.m, circles).y;
}
}
}
// When ending a drag gesture, mark the subject as inactive again.
function dragended(event) {
event.subject.active = false;
}
return d3.drag()
.subject(dragsubject)
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
height = 500
radius = 5
maxDistance = 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.
