How to draw a distribution of points along an Archimedean Spiral using D3.js.
forked from fabiovalse's block: Points Along an Archimedean Spiral
license: mit |
How to draw a distribution of points along an Archimedean Spiral using D3.js.
forked from fabiovalse's block: 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> | |
</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 = 200, | |
sides = 50, | |
coils = 2, | |
rotation = 0; | |
// How far to step away from center for each side. | |
var awayStep = radius/sides; | |
// How far to rotate around center for each side. | |
var aroundStep = coils/sides;// 0 to 1 based. | |
// Convert aroundStep to radians. | |
var aroundRadians = aroundStep * 2 * Math.PI; | |
// Convert rotation to radians. | |
rotation *= 2 * Math.PI; | |
var new_time = []; | |
// For every side, step around and away from center. | |
for(var i=1; i<=sides; i++){ | |
// How far away from center | |
var away = i * (awayStep+10); | |
// How far around the center. | |
var around = i * aroundRadians + rotation; | |
// Convert 'around' and 'away' to X and Y. | |
var x = centerX + Math.cos(around) * away; | |
var y = centerY + Math.sin(around) * away; | |
new_time.push({x: x, y: y}); | |
} | |
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.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); |