JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<body>
    
</body>

CSS

body{ margin: 0; }
path { stroke: white; stroke-width: 2px;}

JavaScript

// the arc generator
var arc = d3.svg.arc()
  .innerRadius(100)
  .outerRadius(150);

var data = [3, 7, 21, 31, 35, 42];

var color = d3.scale.category10();

var pie = d3.layout.pie();
var arcData = pie(data);

d3.select('body').append('svg')
.attr({"width":400,
       "height":400})
  .append('g').attr('transform', 'translate(200, 175)')
    .selectAll('path').data(arcData).enter()
      .append('path').attr('d', arc).style('fill', function(d, i){
        return color(i);
      });