Old school D3 from simpler times

All examples By author By category About

ruridge

Full window Github gist

Skewed Phyllotaxis Spiral

Built with blockbuilder.org

forked from roburidge's block: Spirals1: 8 points with 45° spacing

forked from roburidge's block: Spirals2: 200 points with 5° spacing

forked from roburidge's block: Spirals2: 200 points with 5° spacing

forked from roburidge's block: Spirals3: Spiral

forked from roburidge's block: Spirals4: Phyllotaxis Spiral

<!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,
        margin = {top: 0, left: 0, right: 0, bottom: 0};
    
    var goldenAngle = 137.508
    
    var data = [],
        i = 1;
    for (i; i < 300; i++) {
      var x = Math.cos(degToRad(i * goldenAngle)) * Math.sqrt(i)*14;
      var y = Math.sin(degToRad(i * goldenAngle)) * Math.sqrt(i)*7;
			data.push({x: x, y: y});
    }

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [-width/2, -height/2, width, height]);

svg.append("g")
      .selectAll("circle")
    	.data(data)
    	.enter()
    	.append("circle")
      .attr("r", 2)
    	.attr("cx", d => d.x)
    	.attr("cy", d => d.y);
    
    
    
    // Helpers
    function degToRad(deg) {
      return deg * Math.PI / 180;
    }

</script>
</body>

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,
        margin = {top: 0, left: 0, right: 0, bottom: 0};
    
    var goldenAngle = 137.508
    
    var data = [],
        i = 1;
    for (i; i < 300; i++) {
      var x = Math.cos(degToRad(i * goldenAngle)) * Math.sqrt(i)*14;
      var y = Math.sin(degToRad(i * goldenAngle)) * Math.sqrt(i)*7;
            data.push({x: x, y: y});
    }
​
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [-width/2, -height/2, width, height]);
​
    svg.append("g")
      .selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
      .attr("r", 2)
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
    
    
    
    // Helpers
    function degToRad(deg) {
      return deg * Math.PI / 180;
    }
​
  </script>
</body>
​
    

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