Suppose we wanted to make a list-like visual. Setting the y logic for the circles can be as simple as:

var data = [0,1,2,3,4,5,6,7,8,9];

var yScale = d3.scaleLinear()
    .range([height,0])
    .domain([0,9]);

svg.selectAll(null)
    .data(data)
    .enter()
    .append('circle')
    .attr('cy', function(d) { return yScale(d) })
    .attr('cx', 100)
    .attr('r', 10)
    .style('fill', "#a6a6a6");

However, suppose we wanted to go for some style points and arrange the circles not in a blocky / tabular arrangement but rather arrange them about a circle or arc. I had this result in mind (only concerned with the outer circles):

While I think d3 does have trigonometric functions, I have never seen them used in pixel coordinates. I'd imagine the pseudo-code to be something like:

var semiCircleScale = d3.?????
    .range([250 degrees, 110 degrees])
    .domain([0,9]);

svg.selectAll(null)
    .data(data)
    .enter()
    .append('circle')
    .attr('cy', function(d) { return semiCircleScale(d) })
    .attr('cx', 100)
    .attr('r', 10)
    .style('fill', "#a6a6a6");

Question

Is anyone familiar with using circle / arc scales for use with x,y logic for appending shapes? Or is there an easier/less-math-intensive way?