Phyllotaxis in d3.v4 w/ rectangles

Phyllotaxis in d3.js v4, converted from @jhubley's p5.js example, which in turn came from Jason Davies' D3.js example and Jim Bumgardner's Processing sketch for reference.

forked from jhubley's block: Phyllotaxis in d3.v4 with rectangles

<!doctype html>
<html>
<head>
  <title>Phyllotaxis with rectangles</title>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <svg></svg>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>

var w = 960, h = 500;

var cx = w/2;
    var cy = h/2;

var circles = 2500;
    var sizeMultiplier = 0.02;
    
    var color = d3.scaleLinear()
      .domain([0, circles])
      .range(["#111", "#555"])
    
    var golden_ratio = (Math.sqrt(5)+1)/2 - 1;
    var golden_angle = golden_ratio * (2* Math.PI);
    var circle_rad = (w * .9)-20;

var svg = d3.select("svg")

var rects = svg.selectAll("rect.taxi")
      .data(d3.range(circles))
    
    rects.enter()
      .append("rect")
      .classed("taxi", true)
      .attrs(function(d,i) {
        var ratio = i / circles;
        var angle = i * golden_angle;
        var spiral_rad = ratio * circle_rad;
        var x = cx + Math.cos(angle) * spiral_rad;
        var y = cy + Math.sin(angle) * spiral_rad;
        return {
          x: x,
          y: y,
          width: sizeMultiplier * i,
          height: sizeMultiplier * i,
          transform: "rotate(45," + [x,y] + ")",
          fill: color(i)
        }
      })

/*
    function draw(){
      background('#333');
      rotate(45);
      translate(-165,-90);
      for (var i = 1; i <= circles; ++i) {
          var ratio = i / circles;
          var angle = i * golden_angle;
          var spiral_rad = ratio * circle_rad;
          var x = cx + cos(angle) * spiral_rad;
          var y = cy + sin(angle) * spiral_rad;
          rect(x, y, .009 * i, .009 * i, 1, 1, 1, 0);
          noStroke();
          if (i < 800){fill('#a6cf02');}
          else if (i < 1300){fill('#4ba41a');}
          else {fill(34,153,70);}
        }
    }
    */

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v0.4.min.js