nbremer/.block

## .block
license: gpl-3.0
height: 960

## README.md

      
    Raw
  

              README.md
            
          
    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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>