Old school D3 from simpler times

All examples By author By category About

derekgaw

Full window Github gist

Phyllotaxis

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; }
    circle { position: absolute; width: 8px; height: 8px; background-color: red; border-radius: 4px;}
    * { font-family: sans-serif; }
  </style>
  <body>
    <svg></svg>
  </body>
  <script>
    //Phylotaxis experiments

var phi = (1 + Math.sqrt(5))/2;
    var phiAngle = Math.PI * (3 - Math.sqrt(5))
    var points = [];
    
    //linear radius 
    /*
    for (var i = 0; i < 300; i++) {
      var x = i * Math.cos(i * phiAngle);
      var y = i * Math.sin(i * phiAngle);
      points.push([x, y, i]);
    }
    */
    
    //equal area spacing
    
    var numPoints = 1200
    for (var i = 1; i < numPoints; i++) {
      var x = 16 * Math.pow(i,1/2) * Math.cos(i * phiAngle);
      var y = 16 * Math.pow(i,1/2) * Math.sin(i * phiAngle);
      points.push([x, y, i, ((i/numPoints))*255]);
    }
    
    /*
    //logarithmic spacing
    //232.21; 107.463%
    //249.54;  93.055%
    var a = 0.1;
    var b = 0.03;
    for (var i = 0; i < 120; i++) {
      var x = a * Math.cos(i * phiAngle) * Math.exp(b * i * phiAngle);
      var y = a * Math.sin(i * phiAngle) * Math.exp(b * i * phiAngle); 
      points.push([x, y, i]);
    }
    */

var svgContainer = d3.select("body").append("svg");

var svgWidth = 960;
    var svgHeight = 500
    d3.select("svg")
    .style("width", svgWidth)
    .style("height", svgHeight)
      .selectAll("circle")
        .data(points)
        .enter()
        .append("circle")
        .attr("cx", function(x) { return x[0] + svgWidth/2; })
        .attr("cy", function(x) { return x[1] + svgHeight/2; })
        .attr("r", function(x) { return 4; })
        .style("fill", function(x) {
      		if (x[3] < 20) {
      			return "#008888"; 
          } else {
            return "#" + Math.round(x[3]).toString(16) + "8888"; 
          }
    		})
  </script>
</html>

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