Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
viewof lines = {
const lines = [
[[464, 166], [637, 141]],
[[396, 396], [381, 299]]
].map(l => l.map(([x, y]) => [x / 964 * width, y]));
const svg = d3.select(DOM.svg(width, height))
.property("value", lines);
const line = svg.append("g")
.attr("stroke", "#ccc")
.selectAll("line")
.data(lines)
.enter().append("line");
const lineSegment = svg.append("g")
.attr("stroke", "black")
.attr("stroke-width", 1.5)
.selectAll("line")
.data(lines)
.enter().append("line");
const lineBisect = svg.append("g")
.attr("stroke-width", 1.5)
.selectAll("line")
.data(["red", "blue"])
.enter().append("line")
.attr("stroke", d => d);
const point = svg.append("g")
.attr("cursor", "move")
.attr("pointer-events", "all")
.attr("stroke", "transparent")
.attr("stroke-width", 30)
.selectAll("circle")
.data(d3.merge(lines))
.enter().append("circle")
.attr("r", 2.5)
.call(d3.drag()
.subject(([x, y]) => ({x, y}))
.on("drag", dragged));
update();
function dragged(d) {
d[0] = d3.event.x;
d[1] = d3.event.y;
update();
svg.dispatch("input");
}
function update() {
point
.attr("cx", d => d[0])
.attr("cy", d => d[1]);
line.data(lines.map(l => lineExtend(...l)))
.attr("x1", d => d[0][0])
.attr("y1", d => d[0][1])
.attr("x2", d => d[1][0])
.attr("y2", d => d[1][1]);
lineSegment
.attr("x1", d => d[0][0])
.attr("y1", d => d[0][1])
.attr("x2", d => d[1][0])
.attr("y2", d => d[1][1]);
lineBisect
.data([
lineExtend(...lineLineBisect(...lines[0], ...lines[1], +1)),
lineExtend(...lineLineBisect(...lines[0], ...lines[1], -1))
])
.attr("x1", d => d[0][0])
.attr("y1", d => d[0][1])
.attr("x2", d => d[1][0])
.attr("y2", d => d[1][1]);
}
return svg.node();
}
function lineLineBisect([x0, y0], [x1, y1], [x2, y2], [x3, y3], k = 1) {
const x02 = x0 - x2, y02 = y0 - y2;
const x10 = x1 - x0, y10 = y1 - y0;
const x32 = x3 - x2, y32 = y3 - y2;
const l = y32 * x10 - x32 * y10;
if (Math.abs(l) < 1e-3) return; // Parallel!
const l10 = Math.sqrt(x10 ** 2 + y10 ** 2);
const l32 = Math.sqrt(x32 ** 2 + y32 ** 2);
const ti = (x32 * y02 - y32 * x02) / l;
const xi = x0 + ti * x10, yi = y0 + ti * y10;
return [[xi, yi], [xi + x10 / l10 + k * x32 / l32, yi + y10 / l10 + k * y32 / l32]];
}
function lineExtend([x0, y0], [x1, y1]) {
return [
rayExtend([x0, y0], [x1 - x0, y1 - y0]),
rayExtend([x1, y1], [x0 - x1, y0 - y1])
];
}
function rayExtend([x0, y0], [vx, vy]) {
let t = Infinity, c, x, y;
if (vy < 0) { // top
if ((c = (0 - y0) / vy) < t) y = 0, x = x0 + (t = c) * vx;
} else if (vy > 0) { // bottom
if ((c = (height - y0) / vy) < t) y = height, x = x0 + (t = c) * vx;
}
if (vx > 0) { // right
if ((c = (width - x0) / vx) < t) x = width, y = y0 + (t = c) * vy;
} else if (vx < 0) { // left
if ((c = (0 - x0) / vx) < t) x = 0, y = y0 + (t = c) * vy;
}
return [x, y];
}
height = 600
d3 = require("d3@5")
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.
