circles on circle pie

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var radius = 120
    var circleRadius = 2
    var circleCount = 100
    
    function toRadians (angle) {
  		return angle * (Math.PI / 180);
		}    
    var data = [["Мужчины",101231140],["Женщины",73243240]]
    
    var svg = d3.select("body").append("svg")
      .attr("width", 350)
      .attr("height", 500)
    var center = [205,205]
    
    var sum = data.reduce((acc,cur)=>(acc+cur[1]),0)
//     data = data.map((d)=>((d.concat(Math.round(d[1]/sum*100)))))
    data = data.map((d)=>((d.concat(d[1]/sum))))
    console.log(data)
    
    var angleStep = 360/circleCount
    var circles = []
    var color = d3.scaleThreshold()
    	.domain(data
              .map((d)=>(Math.round(d[2]*100)))
 							.reduce((acc, cur, i, arr) => {
								arr[i]=Math.round(arr[i]+arr[i-1])
 								return arr })
             )
    	.range(["blue","red","green"])
//     console.log(color.domain())
    d3.range(0,circleCount).forEach((d,i)=>{
      var angleRad = toRadians(i*angleStep-90)
      svg.append("circle")
    		.attr("cx",radius*Math.cos(angleRad)+center[0])
    		.attr("cy",radius*Math.sin(angleRad)+center[1])
   			.attr("r",()=>(color.domain().includes(i+1) ? circleRadius*2:circleRadius))
        .style("fill", color(i));
    })
    svg.append("circle")
    		.attr("cx",center[0])
    		.attr("cy",center[1])
   			.attr("r",radius*.85)
    		.attr("fill","transparent")
    		.attr("stroke","grey")
    
    svg.append("text")
      .text("ДЕМОГРАФИЯ")
      .attr("x", 0)
      .attr("y", 24)
      .attr("font-size", 24/1.25)
      .attr("font-family", "monospace")
    
    data.forEach((d,i)=>{
      const legendColor = color(d[2]*100)
      svg.append("text")
      .text(d3.format(",.2%")(d[2]))
      .attr("x", center[0]*i*1.1)
      .attr("y", center[1]+radius*1.5)
      .attr("font-size", 24)
      .attr("font-family", "monospace")
      
      svg.append("text")
      .text(d[0])
      .attr("x", 24+center[0]*i*1.1)
      .attr("y", center[1]+radius*1.5+24*1.33)
      .attr("font-size", 24/1.25)
      .attr("font-family", "monospace")
      .style("fill", legendColor)
      .style("text-transform", "uppercase")
      
      svg.append("circle")
    		.attr("cx", 24/2+center[0]*i*1.1)
    		.attr("cy", center[1]+radius*1.5+24*1.05)
   			.attr("r", circleRadius*2)
    		.attr("fill",legendColor)
    })
    
  </script>
</body>

https://d3js.org/d3.v4.min.js