D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ruridge
Full window
Github gist
Skewed Fibonacci Spiral
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> var width = 500, height = 500; var centerX = 0, centerY = 0, radius = 100, sides = 50, coils = 2, rotation = 0; // How far to step away from center for each side. var awayStep = radius/sides; // How far to rotate around center for each side. var aroundStep = coils/sides;// 0 to 1 based. // Convert aroundStep to radians. var aroundRadians = aroundStep * 2 * Math.PI; // Convert rotation to radians. rotation *= 2 * Math.PI; var new_time = []; // For every side, step around and away from center. for(var i=1; i<=sides; i++){ // How far away from center var away = i * awayStep; // How far around the center. var around = i * aroundRadians + rotation; // Convert 'around' and 'away' to X and Y. var x = centerX + Math.cos(around) * away*2; var y = centerY + Math.sin(around) * away; new_time.push({x: x, y: y}); } var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var svgGroup = svg .append("g") .attr('transform', `translate(${width / 2}, ${height / 2})`) var circles = svgGroup.selectAll("circle") .data(new_time) .enter() .append("circle") .attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }) .attr("r", 10) .attr("fill", "none") .attr("stroke", "#f09"); </script> </body>
https://d3js.org/d3.v4.min.js