30:T854,spiral ={ let svgElement, svg; [svgElement, svg] = getSVG(); // Spiral Setup // //If this is calculating the theta, why not use .atan2() const theta = function(r) { return numRotations * Math.PI * r }; //The radiusWidth is just making it less curvy - not sure if there's a term for this //using d3.max of course makes the spiral larger var r = d3.min([width, height]) / 2 - radiusWidth var radius = d3.scaleLinear() .domain([spacing, density]) .range([innerRadius, r]) //three values includes the upper value //why end + 0.001?? var points = d3.range(spacing, density + 0.001, (density - spacing) / 1000) var spiral = d3.radialLine() .curve(d3.curveCardinal) .angle(theta) .radius(radius) let pathGroup = svg.append('g') .attr('transform', `translate(${width / 2 + margin}, ${height/ 2 - margin})`) var path = pathGroup .append("path") .datum(points) .attr("id", "spiral") .attr("d", spiral) .style("fill", "none") .style("stroke", "lightGray") // Circle Placement // /* path.node() returns shortest path between source and distance */ var dot = pathGroup.append("circle") .attr("class", "dot") .attr("fill", "#38d3fe") //not sure what this is doing .attr("cx", path.node().getPointAtLength(0).x) .attr("cy", path.node().getPointAtLength(0).y) .attr("r", 8) // Time Scales and Animation // var spiralLength = path.node().getTotalLength() var timeScale = d3.scaleLinear() .domain([0,speed]) .range([0, spiralLength]) function render(time){ var l = timeScale(time) svg.selectAll(".dot") .attr("cx", path.node().getPointAtLength(l).x) .attr("cy", path.node().getPointAtLength(l).y) } var p = 0 function tick() { p = p + 0.015 if (p > 60) { p = 0 } render(p) } d3.timer(tick) return svgElement }31:T5ff,spiral2 ={ let svgElement, svg; [svgElement, svg] = getSVG(); // Spiral Setup // var start = 0, end = 2.25, numSpirals = 6 //If this is calculating the theta, why not use .atan2() const theta = function(r) { return numSpirals * Math.PI * r }; //The 40 is just making it less curvy - not sure if there's a term for this var r = d3.min([width, height]) / 2 - 40 var radius = d3.scaleLinear() .domain([start, end]) .range([40, r]) //three values includes the upper value //why end + 0.001?? var points = d3.range(start, end + 0.001, (end - start) / 1000) var spiral = d3.radialLine() .curve(d3.curveCardinal) .angle(theta) .radius(radius) let pathGroup = svg.append('g') .attr('transform', `translate(${width / 2 + margin}, ${height/ 2 - margin})`) var path = pathGroup .append("path") .datum(points) .attr("id", "spiral-path") .attr("d", spiral) .style("fill", "none") .style("stroke", "lightGray") pathGroup .append('circle') .attr('id', 'motionObject') .attr("fill", "#38d3fe") .attr('r', 8) pathGroup .append('animateMotion') .attr('xlink:href', '#motionObject') .attr('dur', '60s') .attr('fill', 'freeze') .attr('repeatCount', 'indefinite') .attr('rotate', 'auto-reverse') .append('mpath') .attr('xlink:href', '#spiral-path'); return svgElement }32:T6c5, spiral3 ={ let svgElement, svg; [svgElement, svg] = getSVG(); // Spiral Setup // var start = 0, end = 2.25, numSpirals = 6 //If this is calculating the theta, why not use .atan2() const theta = function(r) { return numSpirals * Math.PI * r }; //The 40 is just making it less curvy - not sure if there's a term for this var r = d3.min([width, height]) / 2 - 40 var radius = d3.scaleLinear() .domain([start, end]) .range([40, r]) //three values includes the upper value //why end + 0.001?? var points = d3.range(start, end + 0.001, (end - start) / 1000) var spiral = d3.radialLine() .curve(d3.curveCardinal) .angle(theta) .radius(radius) let pathGroup = svg.append('g') .attr('transform', `translate(${width / 2 + margin}, ${height/ 2 - margin})`) var path = pathGroup .append("path") .datum(points) .attr("id", "spiral") .attr("d", spiral) .style("fill", "none") .style("stroke", "lightGray") //get length of path const length = path.node().getTotalLength(); function drawLine() { // Animate the path by setting the initial offset and dasharray and then transition the offset to the length of the spiral path.attr("stroke-dasharray", length + " " + length) .attr("stroke-dashoffset", 0) .transition() .ease(d3.easeLinear) .attr("stroke-dashoffset", length) .duration(10000) .on("end", () => setTimeout(drawLine, 1000)); // repeats adter one minute }; // Animate the spiral for the first time drawLine(); return svgElement }33:T6fb,spiralText = { let svgElement, svg; [svgElement, svg] = getSVG(); //write your text let text = "I am writing text along a spiral and it's pretty cool" //slice up each letter & space into an array text.split('') // Spiral Setup // var start = 0, end = 2.25, numSpirals = 8 const theta = function(r) { return numSpirals * Math.PI * r }; const r = d3.min([width, height]) / 2 - 40 const radius = d3.scaleLinear() .domain([start, end]) .range([40, r]) const points = d3.range(start, end + 0.001, (end - start) / 1000) const spiral = d3.radialLine() .curve(d3.curveCardinal) .angle(theta) .radius(radius) let pathGroup = svg.append('g') .attr('transform', `translate(${width / 2 }, ${height / 2})`) var path = pathGroup //.append('defs') //allows you to replace the textPath with the spiral. Commenting it out = spiral + text .append("path") .datum(points) .attr("id", "spiral") .attr("d", spiral) .style("fill", "none") .style("stroke", "lightGray") function drawText() { pathGroup.selectAll("text").remove() let textPath = pathGroup.selectAll(".text") .data(text) .join('text') .attr('class', '.text') .attr('dy', dy) .append("textPath") .attr("href", `#spiral`) .style("fill", "#1f77b4") .attr("startOffset", (d, i) => i *10) //this spaces out the letters or else they appear on top of each other textPath.transition() .delay((d,i) => i*25) //this is the line that makes the letters appear one after another .duration(1000) .text(d => d) } return Object.assign(svgElement, { drawText}); }34:T47e,md`## Phase #2: Archimedean Spiral I thought I should use an Archimedean Spiral because assumed it was the best way to go, given how mathmatically fancy it is, and because I like a challenge. But in the end, it wasn't necessary so I am not sure what the advantage would be. It uses polar coordinates, which is **how far away** and **what angle** a point is at (radials), vs. cartesian, which I think of as **how far along** and **how high up** a point is (SVGs). A friendly reminder: ![](https://www.mathsisfun.com/images/coordinates-triangle.gif) ${tex`r = a + b \theta`} * ${tex`r`} is the distance from the origin * ${tex`a`} is the distance of the starting point from the origin * ${tex`b`} controls the distance between turns of the spiral * ${tex`\theta`} is the angle And in the code: * **numRotations**: controls the number of spirals * **pointsPerRotation**: controls the fidelity of the spirals * **p**: controls the percentage distance along the spiral to render an annotated (radius, angle) point *(Definitions taken from Archimedean Spiral)* ` 35:T591,archSpiral = { let svgElement, svg; [svgElement, svg] = getSVG(); // Spiral Setup // var start = 0, end = 2.25, numSpirals = 8 var theta = function(r) { return numSpirals * Math.PI * r }; // used to assign nodes color by group var color = d3.scaleOrdinal(d3.schemeCategory10) var r = d3.min([width, height]) / 2 - 40 var radius = d3.scaleLinear() .domain([start, end]) .range([40, r]) var points = d3.range(start, end + 0.001, (end - start) / 1000) var spiral = d3 .lineRadial() .angle((_, i) => thetaScaleP(i)) .radius((_, i) => thetaToRadius(thetaScaleP(i), { a, b }))({ length: totalPointsP }) let pathGroup = svg.append('g') .attr('transform', `translate(${width / 2}, ${height / 2 - 50})`) var path = pathGroup //.append("defs") //allows you to replace the textPath with the spiral. Commenting it out = spiral + text .append("path") .datum(points) .attr("id", "spiral") .attr("d", spiral) .style("fill", "none") .style("stroke", "lightGray") pathGroup.append("text") .attr('dy', -3) .append("textPath") .attr('start-offset', thetaToArcLength(pTheta, {a, b})) .attr("href", `#spiral`) .style("fill", "#1f77b4") .text("I am writing text along a spiral and it's pretty cool"); return svgElement }36:[] 2e:{"title":"Spirals","cells":[{"id":0,"value":"md`# Spirals\n\nThe goal is to put japanese along a path and animate it like a hypnotic spiral.\n\n### [Animated Kanji](https://observablehq.com/d/c3d13475fdbf3087): work-in-progress\nAfter applying textPath, I started making my animated kanji spiral. I got tripped up with the size of the spiral - it needs a bigger screen in order to encapsulate all the kanji.\nHere's some inspiration: \n* Pretty spiral text\n* Beautiful in English \n\nObservable Notebooks I used: \n* clipPath and textPath\n* Archimedean Spiral\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`## Phase #1: Rendering a Spiral\n\n\n### Version 1\nThis version uses \\`d3.timer\\` and svg methods to find the location on the path and animate the line. \n\n\nA few stuff in here I am not sure about: \n* **theta(θ)** = angle \n * what about using atan2()??\n\nOn trick I've found when trying to figure out many moving pieces is by giving a lot of variables sliders. I changed variable names from the code I originally sources, as it didn't give me insights on what the variables were going. While the below names are not \"correct\" they help me understand what the variables are controlling.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"viewof numRotations = Range([1, 17], {\n step: 1,\n label: \"numRotations\",\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"viewof spacing = Range([0, 1], {\n step: .1,\n label: \"spacing\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"viewof density = Range([0, 5], {\n step: .2,\n label: \"density\",\n value: 2.25\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"viewof innerRadius = Range([10, 60], {\n step: 1,\n label: \"innerRadius\",\n value: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"viewof radiusWidth = Range([0, 80], {\n step: 1,\n label: \"radiusWidth\",\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"viewof speed = Range([1, 100], {\n step: 1,\n label: \"speed\",\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`### Version 2\n\nThis uses [animate motion](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion) and [mpath](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mpath) to animate the circle. Essentially, instead of getting the length of the path and setting the timeScale to range the path, you set the \\`xlink:href\\` to the path's ID to link it up to \\`\\` .\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"## Step 2: Animating the line\n\nThis was more straightforward than I thought. I used this [tutorial](https://observablehq.com/@onoratod/animate-a-path-in-d3) to get the basic code, but I had it start and the end of the spiral instead of the beginning (the center). This trick is all in the \\`stroke-dasharray\\` and \\`stroke-dashoffset\\`.","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`### Let's write text around a path by using *textPath*!\n\nAt this point I realized that I don't need to \\`d3.timer\\` or \\`animateMotion\\` to animate my text - I can just use \\`textPath\\` and then stagger the spacing of the characters. \n\nHere are the steps:\n - Create a \"path\", assign an \"id\" (needs to be a path - you can also use d3.arc() by assigning it to the d attribute)\n - append *textPath* element to a *text* element (you need to add the text element first or it won't work). Add *.attr(\"href\",* *\"#*id-name*\")*.\n \n- dx / dy can be specified to control the start position of the text on a path.\n- The startOffset attribute and text-anchor style can be manipulated to put it in the center of the path\n- Append/unappend def to hide/show the line \n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"viewof dy = Range([-10, 20], {\n step: 1,\n label: 'dy',\n value: -3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"viewof play = {\n const button = html``;\n button\n .onclick = () => {\n spiralText.drawText()\n }\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"viewof a = Range([0, 60], {\n step: 1,\n label: 'a',\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"viewof b = Range([0, 20], {\n step: 1,\n label: 'b',\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof p = Range([0, 100], {\n step: 1,\n label: tex`p`,\n value: 39\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"viewof pointsPerRotationP = Range([0, 150], {\n step: 1,\n label: 'pointsPerRotationP',\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"viewof numRotationsP = Range([0, 20], {\n step: 1,\n label: 'numRotationsP',\n value: 8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"viewof totalPointsP = Range([200, 1000], {\n step: 1,\n label: 'totalPointsP',\n value: 700\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"## More Resources\n- [d3.lineRadial](https://observablehq.com/@d3/d3-lineradial)\n- [spiral axis](https://observablehq.com/@vasturiano/spiral-axis)","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"pTheta = thetaScaleP(totalPointsP * (p / 100))","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"thetaScaleP = d3\n .scaleLinear()\n .domain([0, totalPointsP])\n .range([0, numRotationsP * Math.PI * 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"getSVG = () => {\n const svgElement = DOM.svg(width, height);\n\n const svg = d3\n .select(svgElement)\n .append(\"g\")\n .attr(\"transform\", `translate(${margin},${margin})`);\n return [svgElement, svg];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"import {\n thetaToRadius,\n radiusToTheta,\n toCartesian,\n thetaToCartesian,\n thetaToArcLength,\n spiralDistanceBetweenBranches\n} from \"@lukesmurray/archimedean-spiral\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"import { Range, Toggle, Button } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}