JSFiddle - React, Tailwind, and code Playground

by Paco86

HTML

<div id="chart"></div>

CSS

#chart{
    width: 300px;
    height: 300px;
    background-color: #f7f7f7;
    margin: 25px auto;
}
text{
    font-family: sans-serif;
    font-size: 18px;
    fill: white;
}

JavaScript

// Data
const data = [ 64, 25, 19, 44, 35 ];
const chart_width = 300;
const chart_height = 300;


//pie layout
const pie = d3.pie();

const outerRadius = chart_width / 2;
const innerRadius = chart_width / 4;

//arc
const arc = d3
	.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);

//svg
const svg = d3
	.select('#chart')
  .append('svg')
  .attr('width', chart_width)
  .attr('height', chart_height);


//group
const group = svg
	.selectAll('g.arc')
  .data(pie(data))
  .enter()
  .append('g')
  .classed('arc', true)
  .attr('transform', 'translate(' + outerRadius  + ', ' + chart_height / 2 + ')');
  
  
//arc
const color = d3.scaleOrdinal(d3.schemeCategory10);
group
	.append('path')
  .attr('fill', (d, i) => color(i))
  .attr('d', arc)
  
//label
group
	.append('text')
  .attr('transform', (d, i) => 'translate(' + arc.centroid(d) + ')')
  .attr('text-anchor', 'text-middle')
  .text(d => d.value);