JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>

JavaScript

var dataset = [5, 3];

var height = 300,
	width = 800,
  radius = Math.min(width, height)/2;
  
var colorSchema = d3.schemeCategory10;

var arc = d3.arc()
	.outerRadius(radius-10)
  .innerRadius(radius-40);
  
var pie = d3.pie()
	.sort(null)
  .value(function (d)  { return d; });
  
var svg = d3.select('body').append('svg')
	.attr('width', width)
  .attr('height', height);
  
var g = svg.append('g').attr('transform', 'translate('+(width/2)+','+(height/2)+')');

var path = g.selectAll('.arc')
	.data(pie(dataset))
  .enter().append('g').classed('arc', true);

path.append('path').attr('d', arc).attr('fill', function(d, i) { return colorSchema[i];});