D3 Examples - Skewed Fibonacci Spiral

xxxxxxxxxx
 
<!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>
​
    