2e:null 2f:["$","title",null,{"children":"Archimedean Spiral | Luke Murray | Observable"}] 34:T54e,md`The core question here is what is the length of the Archimedean spiral from one angle ${tex`c`} to another angle ${tex`d`}? We can start with the definition of [arc length for a curve in polar coordinates](https://tutorial.math.lamar.edu/classes/calcii/polararclength.aspx) where ${tex`r`} is the radius and ${tex`\theta`} is the angle. ${tex` L = \int_c^d \sqrt{r^2 + (\frac{d}{d\theta} r )^2} d\theta `} We can solve this equation for our curve by substituting ${tex`r = a + b\theta`} for ${tex`r`}. ${tex` L = \int_c^d \sqrt{(a + b \theta)^2 + (\frac{d}{d\theta} a + b \theta )^2} d\theta `} Simplify the derivative ${tex` \frac{d}{d\theta} (a + b\theta) = b `}

${tex` L = \int ^d_{_c}\sqrt{\left(a + b \cdot \theta \right)^2+b^2}d\theta `} Finally we solve the integral (using [symbolab][1])! ${tex`L = b\left(\frac{\left(a+bd\right)\sqrt{b^2+\left(a+bd\right)^2}}{2b^2}-\frac{\left(a+bc\right)\sqrt{b^2+\left(a+bc\right)^2}}{2b^2}+\frac{1}{2}\left(\ln \left(\frac{\left|a+bd+\sqrt{b^2+\left(a+bd\right)^2}\right|}{\left|b\right|}\right)-\ln \left(\frac{\left|a+bc+\sqrt{b^2+\left(a+bc\right)^2}\right|}{\left|b\right|}\right)\right)\right)`} [1]: https://www.symbolab.com/solver/step-by-step/%5Cint%20%5E%7Bd%7D_%7B_c%7D%5Csqrt%7B%5Cleft(a%20%2B%20b%20%5Ccdot%20%20%5Ctheta%20%5Cright)%5E%7B2%7D%2Bb%5E%7B2%7D%7Dd%5Ctheta `35:[{"id":"203e99a2ad8f34148be5423888f30312fc19e394ed53cbc321b52f8cda96de3074cf0319eb6b99b98d0b61de3aef0f50d8e5fd73814268619f8f1780f33d5597","href":"https://static.observableusercontent.com/files/203e99a2ad8f34148be5423888f30312fc19e394ed53cbc321b52f8cda96de3074cf0319eb6b99b98d0b61de3aef0f50d8e5fd73814268619f8f1780f33d5597","name":"image.png","type":"image/png","lastModified":1615379148295.089,"size":12314},{"id":"0838287e5de9d3f2b0d8cd6e8e827d250e765b46b736f9bc448fe3811025c9227797ff5482ad443c691792fb82dde05c55dfee2300e612957ba050f4f98c7b02","href":"https://static.observableusercontent.com/files/0838287e5de9d3f2b0d8cd6e8e827d250e765b46b736f9bc448fe3811025c9227797ff5482ad443c691792fb82dde05c55dfee2300e612957ba050f4f98c7b02","name":"image@1.png","type":"image/png","lastModified":1615413873864.591,"size":151202}] 32:{"id":"6636bdcabe96ba24","slug":"archimedean-spiral","title":"Archimedean Spiral","thumbnail":"a35b8d6705a03dcbc13be21ba3dc1d70d472b8f40b9626c14bdb952575f092df","access_level":"public","create_time":"$D2021-03-10T12:07:42.759Z","update_time":"$D2021-03-10T23:12:39.260Z","view_time":null,"first_public_time":"$D2021-03-10T19:00:00.199Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":"starter_2024"},"version":632,"publish_version":632,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null}],"members":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null,"role":"editor"}],"comments":[{"id":"a39c9af58a397b41","reply_to_id":null,"content":"numRotations should go from 1 to 20. It goes off the screen at around 20.","create_time":"$D2021-03-10T20:11:21.555Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d950dc795ccf4690","login":"jessebmurray","name":"Jesse B Murray","avatar_url":"https://avatars-next.observableusercontent.com/89fde59d4251c6785a0257561157e04589f9ce232e9a1f5428e7b41bcb8bc7fe","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Archimedean Spiral","cells":[{"id":7,"value":"md`# Archimedean Spiral\n\nA mathy notebook for understanding and drawing an Archimedean Spiral.\n\n\n[**Jump to the demo**](#demo)\n\n\nI've seen a couple notebooks [[1](https://observablehq.com/@sawyerclick/condegram), [2](https://observablehq.com/@analyzer2004/timespiral), [3](https://observablehq.com/@yurivish/seasonal-spirals)] which render charts using Archimedean Spirals. These notebooks are really cool but when I tried to understand them I felt like the core math was being lost. Specifically these charts use rendering work arounds to calculate the distance along the spiral so they could draw things like axis ticks and labels. This notebook decomposes the math to create a couple helper functions and then uses those functions to draw an Archimedean Spiral. \nIn a follow up notebook I'll use these functions to create a data viz.\n\n\n${await FileAttachment(\"image.png\").image()}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Defining the Spiral\nThe Archmedean spiral is the spiral created by an object which moves away from a fixed point at a constant speed while rotating with a constant velocity.\n\nThe spiral has the following equation in polar coordinates. \n\n${tex`r = a + b \\theta`}\n\n${tex`r`} is the distance from the origin \n${tex`a`} is the distance of the starting point from the origin \n${tex`b`} controls the distance between turns of the spiral \n${tex`\\theta`} is the angle\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`We can define a simple object to represent our spiral.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"spiralParams = ({\n a: 0,\n b: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`Now what if we want to draw this spiral? We could use [d3.lineRadial](https://github.com/d3/d3-shape/blob/master/README.md#lineRadial) but we'll run into some issues. First of all lineRadial expects data as input and we don't have a way to scale our data to the spiral yet. \n\n> *If you're confused why we need to scale our data to the spiral.* \n> Imagine we want to draw 500 points on our spiral. Our spiral could be a single dot or 500 turns. Without a scale for the data we know the shape of the spiral from ${tex`(a, b)`} but we don't know how long the spiral is.\n\nIn order to scale our data we need to define a [scale](https://github.com/d3/d3-scale) for ${tex`\\theta`}. If we want our spiral to be an Archimedes spiral then we need a linear scale since want our spiral to *rotate with a constant velocity.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`## Defining the Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`We'll start with a naive scale which just draws a spiral with a specific number of turns. In a follow up post I'll show how to define a scale for arbitrary data.\n\nWe define two parameters for our scale \\`pointsPerRotation\\` the number of points to draw on each complete rotation (fidelity). The \\`numRotations\\` is the number of total turns (length).\n\nFor now we'll assume that we're plotting \\`numRotations * pointsPerRotation\\` points. We'll define that number of points as \\`totalPoints\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"pointsPerRotation = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"numRotations = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"totalPoints = numRotations * pointsPerRotation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`We can use these parameters to create our simple scale!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"thetaScale = d3\n .scaleLinear()\n .domain([0, totalPoints])\n .range([0, numRotations * Math.PI * 2]) // Math.PI * 2 is a full circle in radians","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"md`\nNow we can map any data point to ${tex`\\theta`} but in order to draw a point on the spiral we need a radius ${tex`r`}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"md`Going from ${tex`\\theta`} to radius is easy though. We can simply use the definition of the Archimedean Spiral ${tex`r = a + b\\theta`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function thetaToRadius(theta, spiralParams) {\n return spiralParams.a + spiralParams.b * theta;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`If we want to go the other way and go from radius to ${tex`\\theta`} we simply rewrite the equation (${tex`r = a + b \\theta`}) to solve for ${tex`\\theta`}.\n\n${tex`\\theta = \\frac{r -a}{b}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"function radiusToTheta(radius, spiralParams) {\n return (radius - spiralParams.a) / spiralParams.b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"md`*Recap*\n\nWhat have we done so far?\n\n1. We defined our spiral ${tex`(a, b)`}\n2. We created a scale to map our data to ${tex`\\theta`}\n2. We created functions to map ${tex`(\\theta, a, b)`} to radius ${tex`(r)`} and ${tex`(r, a, b)`} to ${tex`\\theta`}\n\nSo given any piece of data we can determine the ${tex`\\theta`} and ${tex`r`} and place that data on our spiral defined by ${tex`(a, b)`}!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"md`## Cartesian Plane`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md`We're very close to being able to draw our first spiral, but remember, we're drawing on an SVG which uses cartesian coordinates. Let's define some simple helpers to make going from polar coordinates to cartesian coordinates much easier. You can google how to convert polar to cartesian coordinates!\n\nWe'll define one helper to convert from polar to cartesian coordinates, and another helper to converte from ${tex`(\\theta, a, b)`} to cartesian coordinates of the point on our spiral ${tex`(a, b)`} at ${tex`\\theta`}.\n\n> Give me a lever long enough and a fulcrum on which to place it, and I shall move the world. -- Archimedes\n\n> Give me ${tex`\\theta`}, ${tex`a`}, and ${tex`b`}, and I will tell you anything about your Archimedean spiral. -- You by the end of this notebook\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"function toCartesian(theta, radius) {\n // this line enables compatability with d3.lineRadial\n // for some reason lineRadial makes the angle 0 point to 12 o clock\n // remove this line if you're just copying this function to your own code!\n theta = theta - Math.PI / 2;\n return [radius * Math.cos(theta), radius * Math.sin(theta)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"function thetaToCartesian(theta, spiralParams) {\n const radius = thetaToRadius(theta, spiralParams);\n return toCartesian(theta, radius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`## Distance along the spiral\n\nOne common issue which arises in spiral visualizations is users want to draw text on the spiral itself.\n\n\nYou can do this with a [textPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath) but you need to provide a \\`startOffset\\` which specifies *how far the beginning of the text should be offset from the beginning of the path.* The two other notebooks I've seen [[1](https://observablehq.com/@sawyerclick/condegram), [2](https://observablehq.com/@analyzer2004/timespiral)] use rendering hacks to get this information but we can do it with math.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`\n\nThe math here looks very crazy but the core idea is simple. We now have a function which can give us the length of an Archimedean curve ${tex`r = a + b \\theta`} from angle ${tex`c`} to angle ${tex`d`}. If we make the angle ${tex`c`} 0 then we can define the length of the curve up to any angle.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`Lets define a function to represent that rather long equation. The function finds the distance on the Archimedean spiral from start to theta.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function thetaToArcLength(theta, spiralParams, start = 0) {\n const { a, b } = spiralParams;\n const c = start;\n const d = theta;\n\n const aPlusBj = a + b * d;\n const sqr = num => Math.pow(num, 2);\n const sqrt = num => Math.sqrt(num);\n const ln = num => Math.log(num);\n const abs = num => Math.abs(num);\n\n return (\n b *\n (((a + b * d) * sqrt(sqr(b) + sqr(a + b * d))) / (2 * sqr(b)) -\n ((a + b * c) * sqrt(sqr(b) + sqr(a + b * c))) / (2 * sqr(b)) +\n .5 *\n (ln(abs(a + b * d + sqrt(sqr(b) + sqr(a + b * d))) / abs(b)) -\n ln(abs(a + b * c + sqrt(sqr(b) + sqr(a + b * c))) / abs(b))))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`\nWith these functions we can define a single scale and get angle, radius, and distance for any data point on our spiral.\n\nThis is really convenient for both drawing the spiral and adding points or text to the spiral.\n\nLet's parameterize everything and do some drawing.\n\nIn a follow up I'll use some of this code to make some nice data visualizations.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"md`## Demo\n\nControls\n\n**a**: controls the distance of the start of the spiral from the origin \n**b**: controls the distance between branches of the spiral \n**numRotations**: controls the number of spirals \n**pointsPerRotation**: controls the fidelity of the spirals \n**p**: controls the percentage distance along the spiral to render an annotated (radius, angle) point \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof a = Range([0, Math.min(height / 3, width / 3)], {\n step: 1,\n label: tex`a`,\n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof b = Range([0, 10], { step: .1, label: tex`b`, value: 4 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"viewof numRotationsP = Range([1, 17], {\n step: 1,\n label: \"numRotations\",\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"viewof pointsPerRotationP = Range([3, 200], {\n step: 1,\n label: \"pointsPerRotation\",\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"viewof p = Range([0, 100], {\n step: 1,\n label: tex`p`,\n value: 39\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"demo = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"md`If you want to use these functions in your own notebook you can import them.\n\n\n\\`\\`\\`js\nimport {\n thetaToRadius,\n radiusToTheta,\n toCartesian,\n thetaToCartesian,\n thetaToArcLength,\n spiralDistanceBetweenBranches\n} from \"@lukesmurray/archimedean-spiral\"\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md`Helper function to compute the distance between branches of the spiral. Because the radius grows at a constant rate this values is always the same.\n\nThe distance between branches is the red lines in the following image.\n\nCalculating this distance is trivial since we know ${tex`r = a + b \\theta`}.\n\nCalculate ${tex`r`} for ${tex`\\theta = 0`} and ${tex`\\theta = 2 \\pi`}.\n\nFor ${tex`\\theta = 0`}, ${tex`r = a`}.\n\nFor ${tex`\\theta = 2 \\pi`}, ${tex`r = a + b 2 \\pi`}.\n\nThe difference is ${tex`2b\\pi`}.\n\n\n${await FileAttachment(\"image@1.png\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"function spiralDistanceBetweenBranches(spiralParams) {\n return Math.PI * 2 * spiralParams.b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"pTheta = thetaScaleP(totalPointsP * (p / 100))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"totalPointsP = numRotationsP * pointsPerRotationP","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"thetaScaleP = d3\n .scaleLinear()\n .domain([0, totalPointsP])\n .range([0, numRotationsP * Math.PI * 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"import { Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"