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
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
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; | |
theta += chord / away; | |
new_time.push({x: x, y: y}); | |
} | |
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.x; }) | |
.y(function(d) { return d.y; }) | |
.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("r", 2); |