JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<svg id="donut" width="400" height="400"></svg>

CSS

#donut {
    
}

JavaScript

var chart = d3.select('#donut'),
    data = [0.2, 0.4],
    colors = ['#f15a22', '#a7ba31', '#1386bb', '#c93d6d'];

var arc = d3.svg.arc()
    .innerRadius(150)
    .outerRadius(200);

var pie = d3.layout.pie()
    .sort(null)
    .endAngle(function(data) {
        return 2 * Math.PI * d3.sum(data);
    });

var path = chart.selectAll('path')
     .data(pie([]));

path.enter().append('path')
    .attr('d', arc)
    .attr('transform', 'translate(200, 200)')
    .style('fill', function(datum, i) {
        return colors[i % colors.length];
    });

path.exit().remove();

path.data(pie(data))