2a:null 2b:["$","title",null,{"children":"Circle Tangent to Three Lines | Mike Bostock | Observable"}] 31:Tb65,{ const lines = [ [[430, 180], [500, 170]], [[400, 300], [410, 200]], [[500, 340], [420, 320]] ].map(line => line.map(([x, y]) => { return [x / 954 * width, y]; })); const svg = d3.select(DOM.svg(width, height)); 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") .selectAll("line") .data([ [lines[0], lines[1], +1], [lines[0], lines[2], +1], [lines[1], lines[2], +1], [lines[0], lines[1], -1], [lines[0], lines[2], -1], [lines[1], lines[2], -1] ]) .enter().append("line") .attr("stroke", ([l0, l1, k]) => k > 0 ? "red" : "blue"); const circle = svg.append("g") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .selectAll("circle") .data([ [+1, +1], [-1, +1], [-1, -1], [+1, -1] ]) .enter().append("circle"); 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(); } 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.each(function([l0, l1, k]) { const b01 = lineLineBisect(...l0, ...l1, k); if (!b01) return; const b = lineExtend(...b01); d3.select(this) .attr("x1", b[0][0]) .attr("y1", b[0][1]) .attr("x2", b[1][0]) .attr("y2", b[1][1]); }); circle.each(function([k0, k1]) { const b01 = lineLineBisect(...lines[0], ...lines[1], k0); const b12 = lineLineBisect(...lines[1], ...lines[2], k1); if (!b01 || !b12) return; const b0 = lineExtend(...b01); const b1 = lineExtend(...b12); const [x, y] = lineLineIntersect(...b0, ...b1); const r = Math.abs(pointLineDistance([x, y], ...lines[0])); d3.select(this) .attr("cx", x) .attr("cy", y) .attr("r", r); }); } return svg.node(); }32:[] 2e:{"id":"461de0e0ae9642fa","slug":"circle-tangent-to-three-lines","title":"Circle Tangent to Three Lines","thumbnail":"c8daf1924fb12260364f710bbdfab68b0e942bd3255d483a0aefc9e683c62899","access_level":"public","create_time":"$D2018-05-25T21:51:29.582Z","update_time":"$D2019-10-15T22:11:31.182Z","view_time":null,"first_public_time":"$D2018-05-25T23:48:00.342Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"starter_2024"},"version":460,"publish_version":460,"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,"subscribed":null,"forks":4,"collection":{"id":"6d94bdd16890def0","slug":"geometry","title":"Geometry","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"type":"notebook","body":{"title":"Circle Tangent to Three Lines","cells":[{"id":0,"value":"md`# Circle Tangent to Three Lines\n\nGiven three non-parallel lines defined by infinitely extending line segments , there exist four circles that are tangent to the lines and centered at the intersection of the [angle bisectors](/@mbostock/angle-bisector-of-two-lines). Drag the points below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"function pointLineDistance([x0, y0], [x2, y2], [x1, y1]) {\n const x21 = x2 - x1, y21 = y2 - y1, l21 = Math.sqrt(y21 ** 2 + x21 ** 2);\n return (y21 * x0 - x21 * y0 + x2 * y1 - y2 * x1) / l21;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":42,"value":"function lineLineIntersect([x0, y0], [x1, y1], [x2, y2], [x3, y3]) {\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 t = (x32 * y02 - y32 * x02) / (y32 * x10 - x32 * y10);\n return [x0 + t * x10, y0 + t * y10];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":8,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"