Untitled / Josh | Observable

Josh

A nice dude

Workspace

Public

Edited

Aug 28, 2023

golden_ratio = (1 + Math.sqrt(5)) / 2

${generateSpiral(0.4)}

</svg>

function generateSpiral(ratio) {

const svgNS = "http://www.w3.org/2000/svg";

const svgWidth = 500;

const svgHeight = 500;

const centerX = svgWidth / 2;

const centerY = svgHeight / 2;

const numTurns = 10; // Number of turns in the spiral

const numPoints = 100; // Number of points to draw

const svg = document.createElementNS(svgNS, "svg");

svg.setAttributeNS(null, "width", svgWidth);

svg.setAttributeNS(null, "height", svgHeight);

const path = document.createElementNS(svgNS, "path");

let d = "M"; // Path data string

for (let i = 0; i <= numPoints; i++) {

const angle = (i / numPoints) * (numTurns * 2 * Math.PI);

const radius = ratio * angle;

const x = centerX + radius * Math.cos(angle);

const y = centerY + radius * Math.sin(angle);

d += `${x},${y} `;

}

path.setAttributeNS(null, "d", d);

path.setAttributeNS(null, "fill", "none");

path.setAttributeNS(null, "stroke", "black");

svg.appendChild(path);

return svg;

}

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more