2e:null 2f:["$","title",null,{"children":"Angle Bisector of Two Lines | Mike Bostock | Observable"}] 34:T7d2,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(); }35:[] 32:{"id":"1250a83e7e58cf2f","slug":"angle-bisector-of-two-lines","title":"Angle Bisector of Two Lines","thumbnail":"2df33135a35e9cda42ac33888242aad04a07b79a8b8fdbc9662bd4e324f8cdbb","access_level":"public","create_time":"$D2018-05-26T14:51:31.748Z","update_time":"$D2018-10-28T16:53:02.870Z","view_time":null,"first_public_time":"$D2018-05-26T15:17:27.027Z","has_unpublished_edits":null,"fork":{"id":"461de0e0ae9642fa","slug":"circle-tangent-to-three-lines","title":"Circle Tangent to Three Lines","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":5,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":529,"publish_version":529,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6d94bdd16890def0","slug":"geometry","title":"Geometry","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"type":"notebook","body":{"title":"Angle Bisector of Two Lines","cells":[{"id":0,"value":"md`# Angle Bisector of Two Lines\n\nGiven two non-parallel lines defined by infinitely extending line segments , there exist two other lines that bisect the angles between the given lines, with all four lines intersecting at the same point. Drag the points below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"function lineLineBisect([x0, y0], [x1, y1], [x2, y2], [x3, y3], k = 1) {\n const x02 = x0 - x2, y02 = y0 - y2;\n const x10 = x1 - x0, y10 = y1 - y0;\n const x32 = x3 - x2, y32 = y3 - y2;\n const l = y32 * x10 - x32 * y10;\n if (Math.abs(l) < 1e-3) return; // Parallel!\n const l10 = Math.sqrt(x10 ** 2 + y10 ** 2);\n const l32 = Math.sqrt(x32 ** 2 + y32 ** 2);\n const ti = (x32 * y02 - y32 * x02) / l;\n const xi = x0 + ti * x10, yi = y0 + ti * y10;\n return [[xi, yi], [xi + x10 / l10 + k * x32 / l32, yi + y10 / l10 + k * y32 / l32]];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function lineExtend([x0, y0], [x1, y1]) {\n return [\n rayExtend([x0, y0], [x1 - x0, y1 - y0]),\n rayExtend([x1, y1], [x0 - x1, y0 - y1])\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function rayExtend([x0, y0], [vx, vy]) {\n let t = Infinity, c, x, y;\n if (vy < 0) { // top\n if ((c = (0 - y0) / vy) < t) y = 0, x = x0 + (t = c) * vx;\n } else if (vy > 0) { // bottom\n if ((c = (height - y0) / vy) < t) y = height, x = x0 + (t = c) * vx;\n }\n if (vx > 0) { // right\n if ((c = (width - x0) / vx) < t) x = width, y = y0 + (t = c) * vy;\n } else if (vx < 0) { // left\n if ((c = (0 - x0) / vx) < t) x = 0, y = y0 + (t = c) * vy;\n }\n return [x, y];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"