Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
Mousover change textMousover / Mouseout highlightVisual filter (selective dim)Better embedded inputs and UIHTML inputs controlling Observable UI inputsZoom and Pan with MouseZoom to clicked elementZoom to Regions / Dynamic NarrativeMouse drag move elementMouseover show TooltipClosest Point droplineGroups and Layers in SVGLayers on / offConnecting multiple visuals in one space
Drag Snap to Line
Also listed in…
misc
mutable log = "" // the dot element
angle = 60
mag = 150
line = svg.append("line")
.attr("x1", polarXY(angle,0)[0])
.attr("y1", polarXY(angle,0)[1])
.attr("x2", polarXY(angle,mag)[0])
.attr("y2", polarXY(angle,mag)[1])
.style("stroke-width","1")
.style("stroke","black")
circles = d3.select(svgContainer).selectAll(".dot")
.data(d3.range(3))
.join("circle")
.attr("cx", () => -10 + Math.random() * 100)
.attr("cy", () => -100 + Math.random() * 100)
.attr("r", "5")
.style("fill", d => d3.schemeCategory10[d])
.classed("dot", true)
.call(drag)
drag = {
function dragstarted() {
d3.select(this).attr("stroke", "black");
}
function dragged(event, d) {
d3.select(this).raise().attr("cx", event.x).attr("cy", event.y);
snapToLine(event, this);
}
function dragended() {
d3.select(this).attr("stroke", null);
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
polarXY = (angDeg,mag) => d3.pointRadial(radiansFromDeg(angDeg),mag)
radiansFromDeg = (deg) => {return +deg * Math.PI / 180;}
svg = d3.select(svgContainer)
function snapToLine(evt,elem) {
let p = closestPoint(line.node(), [evt.x,evt.y]); // calculate closest point
mutable log = elem;
d3.select(elem).attr("cx", p[0]).attr("cy", p[1]); // set the elem (circle ebeing dragged) to the point
}
function closestPoint(pathNode, point) {
var pathLength = pathNode.getTotalLength(),
precision = 8,
best,
bestLength,
bestDistance = Infinity;
// linear scan for coarse approximation
for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
best = scan, bestLength = scanLength, bestDistance = scanDistance;
}
}
// binary search for precise estimate
precision /= 2;
while (precision > 0.5) {
var before,
after,
beforeLength,
afterLength,
beforeDistance,
afterDistance;
if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
best = before, bestLength = beforeLength, bestDistance = beforeDistance;
} else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
best = after, bestLength = afterLength, bestDistance = afterDistance;
} else {
precision /= 2;
}
}
best = [best.x, best.y];
best.distance = Math.sqrt(bestDistance);
return best;
function distance2(p) {
var dx = p.x - point[0],
dy = p.y - point[1];
return dx * dx + dy * dy;
}
}
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.
