JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<div id="wheel"> </div>

CSS

#wheel{
	margin:auto 0;
	width:300px;
	height:300px
}
#wheel .donut{
	fill:#F37E36;
}
#wheel .rect{
	fill:#A2A931;
}
#wheel .rect rect{
  transform-origin:center;
}

JavaScript

var width=200,height=300,innerRadius =100, outerRadius=80;
var wheel = d3.select("#wheel")
  .append("svg")
  .attr("width",width)
  .attr("height",height)

arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
  .startAngle(0)
  .endAngle(2*Math.PI)
    
rectData = [
  {x:width/2,y:height/2},
  {x:width/2,y:height/2},
  {x:width/2,y:height/2},
  {x:width/2,y:height/2},
]
rect = wheel.selectAll("g.rect")
  .data(rectData).enter()
  .append("g")
  .attr("transform",function(d,i){
    var rotate = 90*i;
    return "translate(100,150) rotate("+rotate+")"
  })
  .attr("class","rect")

rect.append("rect")
  .attr("width",20)
  .attr("height",outerRadius)

wheel.append("path").attr("d",arc)
  .attr("transform","translate("+width/2+","+height/2+")")
  .attr("class","donut")