| license: mit |
How to draw a distribution of equidistant points along an Archimedean Spiral using D3.js. The solution was taken from this stackoverflow discussion.
forked from fabiovalse's block: Equidistant Points Along an Archimedean Spiral
forked from anonymous's block: Equidistant Points ARCs Along an Archimedean Spiral
| svg { | |
| background: white; | |
| } | |
| .spiral { | |
| fill: none; | |
| stroke: #303030; | |
| stroke-width: 3px; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Points Along an Archimedean Spiral" /> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script> | |
| <link href="index.css" rel="stylesheet" type="text/css"> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script type="text/javascript" src="index.js"></script> | |
| </body> | |
| </html> |
| var width = 960, | |
| height = 500; | |
| var centerX = width/2, | |
| centerY = height/2, | |
| radius = 150, | |
| coils = 8; | |
| var rotation = 2 * Math.PI; | |
| var thetaMax = coils * 2 * Math.PI; | |
| var awayStep = radius / thetaMax; | |
| var chord = 20; | |
| var new_time = []; | |
| for ( theta = chord / awayStep; theta <= thetaMax; ) { | |
| away = awayStep * theta; | |
| around = theta + rotation; | |
| x = centerX + Math.cos ( around ) * away; | |
| y = centerY + Math.sin ( around ) * away; | |
| xArc = centerX + Math.cos ( around ) * (away); | |
| yArc = centerY + Math.sin ( around ) * (away); | |
| theta += chord / away; | |
| new_time.push({x: x, y: y, xArc: xArc, yArc: yArc }); | |
| } | |
| console.log(new_time); | |
| var svg = d3.select("#chart").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g"); | |
| var lineFunction = d3.svg.line() | |
| .x(function(d) { return d.xArc; }) | |
| .y(function(d) { return d.yArc; }) | |
| .interpolate("cardinal"); | |
| svg.append("path") | |
| .attr("d", lineFunction(new_time)) | |
| .attr("stroke", "gray") | |
| .attr("stroke-width", 0.5) | |
| .attr("fill", "none"); | |
| var circles = svg.selectAll("circle") | |
| .data(new_time) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", function (d) { return d.x; }) | |
| .attr("cy", function (d) { return d.y; }) | |
| .attr("fill", "lightgrey") | |
| .attr("r", 9); | |
| svg.append("circle") | |
| .attr("class", "node-center") | |
| .attr("cx", centerX) | |
| .attr("cy", centerY) | |
| .attr("r", 1) | |
| .attr("fill", "red"); | |