| license: mit |
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
| <!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 < 400; i++) { | |
| var x = Math.cos(degToRad(i * goldenAngle)) * Math.sqrt(i)*10; | |
| var y = Math.sin(degToRad(i * goldenAngle)) * Math.sqrt(i)*10; | |
| 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", 5) | |
| .attr("cx", d => d.x) | |
| .attr("cy", d => d.y); | |
| // Helpers | |
| function degToRad(deg) { | |
| return deg * Math.PI / 180; | |
| } | |
| </script> | |
| </body> |