Arc Chart

<!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; }
    .middle-text {
      font-size: 90px;
      font-weight: bold;
      font-family: 'Roboto', sans-serif;
    }

</style>
</head>

// Define constants
var width = window.innerWidth,
    height = window.innerHeight;
  
// Define constants
var diameter = Math.min(width, height) * 0.95,
    radius = diameter / 2,
    barWidth = radius / 3,
  	minAngle = 0,
    maxAngle = 180,
    range = maxAngle - minAngle,
    minValue = 0,
    maxValue = 100;

// Convert degrees to radians
function deg2rad(deg) {
	return deg * Math.PI / 180;
}
  
// a linear scale that maps domain values to a percent from 0..1
var scale = d3.scaleLinear()
	.domain([minValue, maxValue])
	.range([minAngle,maxAngle]);

var colorScale = d3.scaleLinear()
  .domain([minValue, (maxValue-minValue)/2, maxValue])
  .range(['#d73027', '#fee08b', '#1a9850'])
  .interpolate(d3.interpolateHcl);

var tau = 2 * Math.PI // https://tauday.com/tau-manifesto
    n = 500,
    value = 80;

// 1/2 circle arc
var arc = d3.arc()
  .innerRadius(radius - barWidth*0.8)
  .outerRadius(radius - barWidth*0.2)
  .startAngle(deg2rad(minAngle))
  .endAngle(deg2rad(maxAngle))
  .cornerRadius(barWidth/5);
  
var arcLine = d3.arc()
  .innerRadius(radius - barWidth)
  .outerRadius(radius)
  .startAngle(deg2rad(minAngle))
  .endAngle(deg2rad(scale(myData)))
  .cornerRadius(barWidth/5);

// Get the SVG container, and apply a transform such that the origin is the
// center of the canvas.
var svg = d3.select(".chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .append('g')
  .attr("transform", 'translate(' + width / 2 + ',' + height / 2 + ')');
 
var path = svg.append('path')
  .attr("d", arc)
	.attr("transform","rotate(-90)")
  .style("fill", "grey")
  .style("opacity",0.5);

var path2 = svg.selectAll('g')
	.data(myData)
	.enter()
	.append('path')
  .attr("d", arcLine)
	.attr("transform","rotate(-90)")
  .style("fill", d => colorScale(d))
	.style("opacity",0.8);

var middleCount = svg.selectAll('g')
	.data(myData)
	.enter()
	.append('text')
  .text(d => Math.round(d))
  .attr("class", "middle-text")
  .attr('text-anchor', 'middle')
  .attr("transform","translate(0," + -0.05*height + ")")
	.style("fill",d => colorScale(d))
	.style("opacity",0.8);

</script>
</body>

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