31:T1014,drag = { function dragged(d) { // get current coords d3.select(this).attr("cx", d[0] = d3.event.x).attr("cy", d[1] = d3.event.y); // regenerate array of circle points to keep up with drag var arr = [] d3.selectAll(".circle-points").each(function(d,i) { arr.push([d3.select(this).attr("cx"),d3.select(this).attr("cy")]); }) // update circle d3.selectAll(".circ") .data([getCircleFromThreePoints(arr[0],arr[1],arr[2])]) .attr("cx", d => d[0]) .attr("cy", d => d[1]) .attr("r", d => d[2]) // regenerate array of spiral points to keep up with drag var arr2 = [] d3.selectAll(".spiral-points").each(function(d,i) { arr2.push([+d3.select(this).attr("cx"),+d3.select(this).attr("cy")]); }) // get changes in selected point's quadrant relative to the spiral center so as to increment the number of whirls. const prior = [d3.event.x - d3.event.dx, d3.event.y - d3.event.dy]; const current = [d3.event.x, d3.event.y]; if(d3.select(this).attr('id') === 'red') { const quadPrior = prior[0] >= arr2[2][0] && prior[1] > arr2[2][1] ? 'one' : prior[0] < arr2[2][0] && prior[1] >= arr2[2][1] ? 'two' : prior[0] <= arr2[2][0] && prior[1] < arr2[2][1] ? 'three' : 'four'; const quadCurrent = current[0] >= arr2[2][0] && current[1] > arr2[2][1] ? 'one' : current[0] < arr2[2][0] && current[1] >= arr2[2][1] ? 'two' : current[0] <= arr2[2][0] && current[1] < arr2[2][1] ? 'three' : 'four'; if(quadPrior === 'two' && quadCurrent === 'three') mutable whirls--; if(quadPrior === 'three' && quadCurrent === 'two') mutable whirls++; } else if(d3.select(this).attr('id') === 'blue') { const quadPrior = prior[0] >= arr2[2][0] && prior[1] > arr2[2][1] ? 'one' : prior[0] < arr2[2][0] && prior[1] >= arr2[2][1] ? 'two' : prior[0] <= arr2[2][0] && prior[1] < arr2[2][1] ? 'three' : 'four'; const quadCurrent = current[0] >= arr2[2][0] && current[1] > arr2[2][1] ? 'one' : current[0] < arr2[2][0] && current[1] >= arr2[2][1] ? 'two' : current[0] <= arr2[2][0] && current[1] < arr2[2][1] ? 'three' : 'four'; if(quadPrior === 'two' && quadCurrent === 'three') mutable whirls++; if(quadPrior === 'three' && quadCurrent === 'two') mutable whirls--; } else if(d3.select(this).attr('id') === 'green') { const quadPrior = prior[0] >= arr2[0][0] && prior[1] > arr2[0][1] ? 'one' : prior[0] < arr2[0][0] && prior[1] >= arr2[0][1] ? 'two' : prior[0] <= arr2[0][0] && prior[1] < arr2[0][1] ? 'three' : 'four'; const quadCurrent = current[0] >= arr2[0][0] && current[1] > arr2[0][1] ? 'one' : current[0] < arr2[0][0] && current[1] >= arr2[0][1] ? 'two' : current[0] <= arr2[0][0] && current[1] < arr2[0][1] ? 'three' : 'four'; const quadPrior2 = prior[0] >= arr2[1][0] && prior[1] > arr2[1][1] ? 'five' : prior[0] < arr2[1][0] && prior[1] >= arr2[1][1] ? 'six' : prior[0] <= arr2[1][0] && prior[1] < arr2[1][1] ? 'seven' : 'eight'; const quadCurrent2 = current[0] >= arr2[1][0] && current[1] > arr2[1][1] ? 'five' : current[0] < arr2[1][0] && current[1] >= arr2[1][1] ? 'six' : current[0] <= arr2[1][0] && current[1] < arr2[1][1] ? 'seven' : 'eight'; if(quadPrior === 'one' && quadCurrent === 'four') mutable whirls++; if(quadPrior === 'four' && quadCurrent === 'one') mutable whirls--; if(quadPrior2 === 'five' && quadCurrent2 === 'eight') mutable whirls--; if(quadPrior2 === 'eight' && quadCurrent2 === 'five') mutable whirls++; } // update spiral d3.selectAll(".spiral") .data([getSpiralFromThreePoints(arr2[0],arr2[1],arr2[2], steps, mutable whirls)]) .attr("d",line) } return d3.drag().on("drag", dragged) }32:[] 2f:{"title":"Three Points in a Plane","cells":[{"id":0,"value":"md`# Three Points in a Plane\n\nA unique circle passes through any three noncollinear points in a plane. The parameters of the circle can be derived with a little linear algebra.\n\nThree points in a plane also define a family of spirals. Assuming one of the points to be the center, a unique [logarithmic spiral](http://mathworld.wolfram.com/LogarithmicSpiral.html) passes through the other two points for every imaginable number of whirls (i.e. any integer from -∞ to ∞). Try winding the spiral nodes around each other to modify the number of whirls!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n svg.append('rect')\n .attr('x',0)\n .attr('y', 0)\n .attr('width', width)\n .attr('height', height)\n .style('fill', 'black')\n \n svg.selectAll(\".circ\")\n .data([getCircleFromThreePoints(circlePoints[0],circlePoints[1],circlePoints[2])])\n .join(\"circle\")\n .attr(\"class\", \"circ\")\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", d => d[2])\n .style(\"fill\", 'none')\n .style(\"stroke-width\", 4)\n .style(\"stroke\", \"white\")\n \n svg.selectAll(\".circle-points\")\n .data(circlePoints)\n .join(\"circle\")\n .attr(\"class\", \"circle-points\")\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", radius)\n .style(\"fill\", (d,i) => i === 0 ? 'red' : i === 1 ? 'blue' : 'green')\n .call(drag);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n svg.append('rect')\n .attr('width', width)\n .attr('height', height)\n .attr('x',0)\n .attr('y', 0)\n .style('fill', 'black')\n\n svg.selectAll(\".spiral\")\n .data([getSpiralFromThreePoints(spiralPoints[0],spiralPoints[1],spiralPoints[2], steps, mutable whirls)])\n .join(\"path\")\n .attr(\"class\", \"spiral\")\n .style(\"fill\", 'none')\n .style(\"stroke-width\", 4)\n .style(\"stroke\", \"white\")\n .attr(\"d\", line)\n \n svg.selectAll(\".spiral-points\")\n .data(spiralPoints)\n .join(\"circle\")\n .attr('class', 'spiral-points')\n .attr(\"id\", (d,i) => i === 0 ? 'red' : i === 1 ? 'blue' : 'green')\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", radius)\n .style(\"fill\", (d,i) => i === 0 ? 'red' : i === 1 ? 'blue' : 'green')\n .call(drag);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"mutable whirls = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1164,"value":"viewof steps = slider({\n min: 1, \n max: 1000, \n step: 1, \n value: 1000,\n description: \"steps in the interpolated spiral path\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"circlePoints = d3.range(3).map(i => ([Math.random() * width,Math.random() * height]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"spiralPoints = d3.range(3).map(i => ([Math.random() * width,Math.random() * height]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":" function getCircleFromThreePoints(a, b, c) {\n const A = (a[0] * (b[1] - c[1])) - (a[1] * (b[0] - c[0])) + (b[0] * c[1]) - (c[0] * b[1]);\n const B = ((a[0] * a[0] + a[1] * a[1]) * (c[1] - b[1])) + ((b[0] * b[0] + b[1] * b[1]) * (a[1] - c[1])) + ((c[0] * c[0] + c[1] * c[1]) * (b[1] - a[1]));\n const C = ((a[0] * a[0] + a[1] * a[1]) * (b[0] - c[0])) + ((b[0] * b[0] + b[1] * b[1]) * (c[0] - a[0])) + ((c[0] * c[0] + c[1] * c[1]) * (a[0] - b[0]));\n const D = ((a[0] * a[0] + a[1] * a[1]) * (c[0] * b[1] - b[0] * c[1])) + ((b[0] * b[0] + b[1] * b[1]) * (a[0] * c[1] - c[0] * a[1])) + ((c[0] * c[0] + c[1] * c[1]) * (b[0] * a[1] - a[0] * b[1]));\n \n const x = (-1 * B / (2 * A));\n const y = (-1 * C / (2 * A));\n const r = Math.sqrt(((B * B) + (C * C) - (4 * A * D)) / (4 * (A * A)));\n return [x, y, r];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"function getSpiralFromThreePoints(a,b,c,steps,whirls) {\n const spiral = [];\n const ac = Math.hypot(a[0] - c[0], a[1] - c[1]);\n const bc = Math.hypot(b[0] - c[0], b[1] - c[1]);\n const aT= Math.atan2(a[1] - c[1], a[0] - c[0]);\n const bT = Math.PI * whirls + Math.atan2(b[1] - c[1], b[0] - c[0]);\n \n const scale = d3.scaleLinear()\n .domain([0, steps])\n .range(d3.extent([aT,bT+Math.PI*whirls]))\n \n for(let i = 0; i <= steps; i++) {\n const t = scale(i);\n const r = Math.exp((t - aT) * Math.log(bc/ac) / (whirls * Math.PI + bT - aT) + Math.log(ac));\n const x = r * Math.cos(t) + c[0];\n const y = r * Math.sin(t) + c[1];\n spiral.push([x,y])\n }\n return spiral;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"radius = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"height =300","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"line = d3.line()\n // .x(d => d.x)\n // .y(d => d.y)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}