pie

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
		.arc text {
  font: 15px sans-serif;
  text-anchor: middle;
}
    .arc path {
  stroke: #fff;
}
  </style>
</head>
<body>
  <svg width="500" height="500"></svg>
  <script>
    const data = [
      { opt: 'Option A', votes: 10},
      { opt: 'Option B', votes: 32},
      { opt: 'Option C', votes: 10},
      { opt: 'Option D', votes: 17},
    ]
    const svg = d3.select('svg')
    const width = +svg.attr('width')
    const height = +svg.attr('height');
    const radius = Math.min(width, height) / 2;
    const g = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);
                         
    const color = d3.scaleOrdinal(d3.schemeCategory20);
    
    const pie = d3.pie()
    	.sort(null)
    	.value((d) => d.votes);
    
    const path = d3.arc()
    	.outerRadius(radius - 10)
    	.innerRadius(0);
    
    const label = d3.arc()
    	.outerRadius(radius - 40)
    	.innerRadius(radius - 40);
    
    const arc = g.selectAll('.arc')
    	.data(pie(data))
    	.enter().append('g')
    		.attr('class', 'arc');
    
   arc.append('path')
   	.attr('d', path)
   	.attr('fill', (d) => color(Math.random() * 20));
    
   arc.append('text')
   		.attr('transform', d => `translate(${label.centroid(d)})`)
   		.attr('dy', '0.35em')
   		.text((d) => d.data.opt);
  </script>
</body>

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