2e:null 2f:["$","title",null,{"children":"Circle Offset Along Line | Mike Bostock | Observable"}] 34:[] 32:{"id":"23d67f5a0a39f452","slug":"circle-offset-along-line","title":"Circle Offset Along Line","thumbnail":"d2d849253497b99ce48e5c3abc75d6ef084d183783798d1c12ae1f2735a41c79","access_level":"public","create_time":"$D2018-01-10T15:48:09.909Z","update_time":"$D2022-01-04T01:24:24.316Z","view_time":null,"first_public_time":"$D2018-01-10T18:36:53.131Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":392,"publish_version":392,"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":11,"collection":{"id":"6d94bdd16890def0","slug":"geometry","title":"Geometry","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"type":"notebook","body":{"title":"Circle Offset Along Line","cells":[{"id":0,"value":"md`# Circle Offset Along Line\n\nLet’s place a circle *b* on a vertical line without intersecting another circle *a* .`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n let xa = mutable xa;\n let yb;\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", `${-width / 2} ${-height / 2 - radius} ${width} ${height}`)\n .attr(\"stroke-width\", 1.5);\n\n svg.append(\"line\")\n .attr(\"y1\", -height / 2 - radius)\n .attr(\"y2\", height / 2 - radius)\n .attr(\"stroke\", \"black\");\n\n const ca = svg.append(\"circle\")\n .attr(\"r\", radius)\n .attr(\"stroke\", \"black\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .attr(\"cursor\", \"move\")\n .call(d3.drag()\n .subject(() => ({x: xa, y: 0}))\n .on(\"drag\", dragged));\n\n const cb = svg.append(\"circle\")\n .attr(\"r\", radius);\n\n function update() {\n ca.attr(\"cx\", xa);\n cb.attr(\"cy\", yb = offset({x: xa, y: 0, r: radius}, radius));\n }\n\n function dragged(event) {\n mutable xa = xa = event.x;\n update();\n }\n\n return svg.call(update).node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`First we define the two circles: circle *a* has center ⟨*x_a*, *y_a*⟩ and radius *r_a*, and circle *b* has center ⟨*x_b*, *y_b*⟩ and radius *r_b*. For convenience, let’s also specify that *y_a* = *x_b* = 0. The only unknown is *y_b*: the vertical position of circle *b*.\n\nWe can start by trying *y_b* = 0. If the two circles *a* and *b* do not intersect, then we’re done. The intersection test is an inequality which we simplify by applying our definitions of *y_a* and *x_b* and our initial guess for *y_b*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"tex.block`\n\\begin{aligned}\n(r_a + r_b)^2 &> (x_a - x_b)^2 + (y_a - y_b)^2 \\\\\n(r_a + r_b)^2 &> (x_a - 0)^2 + (0 - 0)^2 \\\\\n(r_a + r_b)^2 &> x_a^2 \\\\\nr_a + r_b &> |x_a|\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`If the inequality is true, the circles intersect and we need to solve for *y*_b. The solution will place circle *b* such that the distance between the two circles is the sum of their radii. We can again apply our definitions to simplify and solve for *y_b*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"tex.block`\n\\begin{aligned}\n(r_a + r_b)^2 &= (x_a - x_b)^2 + (y_a - y_b)^2 \\\\\n(r_a + r_b)^2 &= (x_a - 0)^2 + (0 - y_b)^2 \\\\\n(r_a + r_b)^2 &= x_a^2 + y_b^2 \\\\\n(r_a + r_b)^2 - x_a^2 &= y_b^2 \\\\\n\\sqrt{(r_a + r_b)^2 - x_a^2} &= y_b\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`And we’re done!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"offset = ({x: xa, r: ra}, rb) => ra + rb > Math.abs(xa) ? -Math.sqrt((ra + rb) ** 2 - xa ** 2) : 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"mutable xa = -100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"radius = 120","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"