How to properly arrange labels of a circle?

I have a circle like the following:

As you might notice, labels from 0 to 9 have different proximity to the outer circle in comparison to other labels. My expectations are:

1. How can I have same distance of a label to the outer circle?
2. How can I arrange labels so that they are in the middle of the line that comes from center, and not in the side of it?

You can find my code here: https://jsfiddle.net/ao4xwpnk/

I tried to change this part of my code to have symmetry of labels, but it did not work.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  let featureData = features.map((f, i) => {
    let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
    let isLeftHalf = angle < Math.PI; // Check if the angle is in the left half of the circle

    let value = isLeftHalf ? 14.5 : 10.5; // Adjust the value for labels in left and right halves

    return {
      "name": f,
      "angle": angle,
      "line_coord": angleToCoordinate(angle, 180),
      "label_coord": angleToCoordinate(angle, value)
    };
  });

<!-- end snippet -->

Using text-anchor and dy attributes on the text element will help:

// draw axis label
svg.selectAll(".axislabel")
  .data(featureData)
  .join(
    enter => enter.append("text")
      .attr("x", d => d.label_coord.x)
      .attr("y", d => d.label_coord.y)
      .attr("text-anchor", "middle")     // <-- here
      .attr("dy", "0.35em")              // <-- and here
      .text(d => d.name)

text-anchor works for the horizontal placing:

> The rendered characters are aligned such that the middle of the text
> string is at the current text position.

Which solves the problem for you that you are trying to use isLeftHalf for.

The dy attribute works for the vertical placing. The value of 0.35em is a convention - see this answer which interestingly says:

> Using dy=0.35em can help vertically centre text regardless of font
> size

My read on it is that this value accounts for an average of the descenders in the font design e.g. for p and g the 'tail' is roughly 35% of the height and you are therefore pushing the label 'down' by that to line it up with the axes. See here for example.

Your code with this update:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let data = [];
    let features = [0, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]; // labels on the circle
    //generate the data
    for (var i = 0; i < 2; i++) {
      var point = {}
      //each feature will be a random number from 1-9
      features.forEach(f => point[f] = 1 + Math.random() * 162);
      data.push(point);
    }

    let width = 600;
    let height = 600;
    let svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    //adding radial scale
    let radialScale = d3.scaleLinear()
      .domain([0, 180])
      .range([0, 250]);

    //adding ticks
    let ticks = [20, 40, 60, 80, 100, 120, 140, 160, 180]; // 9 circles

    //adding circles
    svg.selectAll("circle")
      .data(ticks)
      .join(
        enter => enter.append("circle")
          .attr("cx", width / 2)
          .attr("cy", height / 2)
          .attr("fill", "none")
          .attr("stroke", "gray")
          .attr("r", d => radialScale(d))
          .attr("stroke-width", 1) // Set the same stroke-width for all circles
      );

    //adding white background circle to remove filling in the center
    svg.append("circle")
      .attr("cx", width / 2)
      .attr("cy", height / 2)
      .attr("fill", "white")
      .attr("stroke", "gray")
      .attr("r", radialScale(20))
      .attr("stroke-width", 1); // Set the same stroke-width for the center circle

    //adding text labels
    svg.selectAll(".ticklabel")
      .data(ticks)
      .join(
        enter => enter.append("text")
          .attr("class", "ticklabel")
          .attr("x", width / 2 + 5)
          .attr("y", d => height / 2 - radialScale(d))
          .text(d => d.toString())
      );

    //Plotting the Axes
    //map an angle and value into SVG
    function angleToCoordinate(angle, value) {
      let x = Math.cos(angle) * radialScale(value);
      let y = Math.sin(angle) * radialScale(value);
      return { "x": width / 2 + x, "y": height / 2 - y };
    }

    let featureData = features.map((f, i) => {
      let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
      let value = i < 9 ? 10.5 : 12; // Adjust the value for labels 13 to 21 to 12
      return {
        "name": f,
        "angle": angle,
        "line_coord": angleToCoordinate(angle, 180),
        "label_coord": angleToCoordinate(angle, 190) // changin 190 allows me to adjust labels proximity to the circle!
      };
    });

    // draw axis line
    svg.selectAll("line")
      .data(featureData)
      .join(
        enter => enter.append("line")
          .attr("x1", width / 2)
          .attr("y1", height / 2)
          .attr("x2", d => d.line_coord.x)
          .attr("y2", d => d.line_coord.y)
          .attr("stroke", "black")
          .attr("stroke-width", 1) // Set the same stroke-width for all axis lines
      );

    // draw axis label
    svg.selectAll(".axislabel")
      .data(featureData)
      .join(
        enter => enter.append("text")
          .attr("x", d => d.label_coord.x)
          .attr("y", d => d.label_coord.y)
          .attr("text-anchor", "middle")
          .attr("dy", "0.35em")
          .text(d => d.name)
      );

    //draw shapes for actual data
    let line = d3.line()
      .x(d => d.x)
      .y(d => d.y);

    let area = d3.area()
      .x(d => d.x)
      .y0(d => d.y)
      .y1(height / 2)
      .curve(d3.curveLinear);

    let colors = ["red", "green", "navy"];

    //helper function to iterate through fields in each data point
    function getPathCoordinates(data_point) {
      let coordinates = [];
      for (var i = 0; i < features.length; i++) {
        let ft_name = features[i];
        let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
        coordinates.push({
          x: width / 2 + Math.cos(angle) * radialScale(data_point[ft_name]),
          y: height / 2 - Math.sin(angle) * radialScale(data_point[ft_name])
        });
      }
      return coordinates;
    }

    // Modify the path elements to separate red and green data
    svg.selectAll(".path-red")
      .data([data[0]]) // Data for the red line
      .join(
        enter => enter.append("path")
          .datum(d => getPathCoordinates(d))
          .attr("class", "path-red")
          .attr("d", line)
          .attr("stroke-width", 3)
          .attr("stroke", "red")
          .attr("fill", "none") // No fill for the red line
      );

    svg.selectAll(".path-green")
      .data([data[1]]) // Data for the green line
      .join(
        enter => enter.append("path")
          .datum(d => getPathCoordinates(d))
          .attr("class", "path-green")
          .attr("d", line)
          .attr("stroke-width", 3)
          .attr("stroke", "green")
          .attr("fill", "none") // No fill for the green line
      );

    // Fill the area between the red and green lines
    let areaFillData = [
      ...getPathCoordinates(data[0]),
      ...getPathCoordinates(data[1]).reverse()
    ];

    svg.append("path")
      .datum(areaFillData)
      .attr("d", area)
      .attr("stroke-width", 0)
      .attr("fill", "blue") // Fill the area between the red and green lines with blue color
      .attr("fill-opacity", 0.3); // You can adjust the opacity as you like

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.0/d3.min.js"></script>

<!-- end snippet -->