The basics of circular layouts

Transform the center of the circle

Most coordinate systems place the origin in one corner of a rectangle, for eg. SVG places the origin at the top-left corner of the SVG element.
If you were to directly start placing elements using the default origin, you would have to offset each coordinate with respect to the placement of the center of the circle. Not only is this cumbersome, it makes placing the circle at a different location more difficult, especially if you have hard-coded the center's coordinates instead of using variables.

It is therefore much more preferable to transform the container element of the circle to offset it such that the origin is at the center of the circle.
All coordinate calculations can now be with respect to the center, and even if you were to reposition the circle, all it would require would be to change the transform so that the origin correctly lies at the new center.

In SVG, this is all relatively very straight forward by placing all the circular elements within a parent <g> tag with a transform attribute which translates along the x and y axis. For eg. Consider a very simple scenario where you have a SVG based chart which is 1000px wide and 1000px tall, you could fit a circle with a radius of 500px neatly within this chart, if you placed the center of the circle at coordinates [500, 500]. This can be done by placing all elements of the circle within a group translated by 500px along each axis as shown below

<svg width="1000" height="1000">
    <g id="circleContainer" transform="translate(500,500)">
        <!-- All elements of the circular layout go here -->
    </g>
</svg>
            

There are 360° or 2π radians in a circle

Consider any point on the edge of a circle as your starting point and consider its angle to be 0. You can now traverse a maximum of 2π radians either clockwise or anticlockwise before you're back at the same point again.

This is extremely important to keep in mind when converting a linear axis to circular.

If you're using d3, this conversion from linear units to radians is fairly simple using the d3.scaleLinear function. For eg, if your linear axis goes from 53 to 5000, simply create a new linear scale in d3 as

var circularScale = d3.scaleLinear().domain([53, 5000]).range([0, 2*Math.PI]);
                

You can calculate a point's coordinates once you know its angle and distance from center

Once you have determined that you wish to place an element at an angle of θ radians and distance r from the center of the circle. We can easily use the sin and cos functions to get precise x and y coordinates.

// Returns coordinates as [x, y]
function getCoordinates(radians, distance) {
    return [Math.cos(radians)*distance, Math.sin(radians)*distance];
}