block by nbremer 17869cbd02b4ca053fd39cbe22bbca2c

Phyllotaxis layout in SVG

Full Screen

I’ve taken Mike Bostock‘s block Fixed Zoom and turned it from a canvas into an SVG version (without the zoom) because I want a high res output of the Phyllotaxis layout

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<div id="chart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
	var width = 960,
      height = 960;
  
  var svg = d3.select('#chart')
				.append("svg")
				.attr("width", width)
				.attr("height", height)
				.append("g");
  
  var radius = 5;
	var points = d3.range(2000).map(phyllotaxis(10));
  
  svg.selectAll(".point")
  	.data(points)
		.enter().append("circle")
    .attr("class", "point")
  	.attr("cx", function(d) { return d[0] + radius; })
	  .attr("cy", function(d) { return d[1]; })
  	.attr("r", radius)
  	.style("fill", "#008800");
  
  function phyllotaxis(radius) {
    var theta = Math.PI * (3 - Math.sqrt(5));
    return function(i) {
      var r = radius * Math.sqrt(i), a = theta * i;
      return [
        width / 2 + r * Math.cos(a),
        height / 2 + r * Math.sin(a)
      ];
    };
  }//function phyllotaxis

</script>