Finding x,y coordinates of a point on an Archimedean spiral

Question

I'm trying to plot data on a timeline using an Archimedean spiral as an axis using D3.js.

So what I need is a Javascript function where I pass it

• D a distance for each step
• S a number of steps
• X the distance between each spiral arm

The function will traverse the spiral arc for the distance of s*d and give me the x and y Cartesian coordinates (point S in the diagram where s=10). The first point at the centre of the spiral is at 0,0.

Answer 1

Thanks for all your help belwood. I tried plotting your example but it gets a bit strange when I plotted 5 consecutive points (see image at bottom).

I managed to find the answer at the link below. It looks like you were very close though.

Algorithm to solve the points of a evenly-distributed / even-gaps spiral?

My final implementation based on the link above.

function archimedeanSpiral(svg,data,circleMax,padding,steps) {
    var d = circleMax+padding;
    var arcAxis = [];
    var angle = 0;
    for(var i=0;i<steps;i++){
        var radius = Math.sqrt(i+1);
        angle += Math.asin(1/radius);//sin(angle) = opposite/hypothenuse => used asin to get angle
        var x = Math.cos(angle)*(radius*d);
        var y = Math.sin(angle)*(radius*d);
        arcAxis.push({"x":x,"y":y})
    }
    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(arcAxis))
        .attr("stroke", "gray")
        .attr("stroke-width", 5)
        .attr("fill", "none");


    var circles = svg.selectAll("circle")
        .data(arcAxis)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; })
        .attr("r", 10);

    return(arcAxis);
}

http://s14.postimg.org/90fgp41o1/spiralexample.jpg