var arc, data, padding, steps = 2, r=400/2, pi = Math.PI;
var padding = 2 * r / 200;
arc = d3.arc()
.innerRadius(r-40)
.outerRadius(r).startAngle(function(d) { return d.startAngle; })
.endAngle(function(d) { return d.endAngle; });
data = d3.range(180).map(function(d, i) {
i *= steps;
return {
startAngle: i * (pi / 180),
endAngle: (i + 2) * (pi / 180),
fill: d3.hsl(i, 1, .5).toString()
};
});
d3.select("body")
.insert('svg')
.attr("width", r*2+padding)
.attr("height", r*2+padding)
.append('g')
.attr("transform", "translate(" + r + "," + r + ") rotate(90) scale(-1,1)")
.selectAll('path')
.data(data)
.enter()
.append('path').attr("d", arc)
.attr("stroke-width", 1)
.attr("stroke", function(d) { return d.fill;})
.attr("fill", function(d) { return d.fill; });
svg {
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>