JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
  <svg id="content" width="600" height="400"></svg>

JavaScript

var data_set = [ 
      {name:"aaa", val:58},
      {name:"bbb", val:88},
      {name:"ccc", val:48},
      {name:"ddd", val:73},
      {name:"eee", val:81},
      {name:"fff", val:31}  
               ] ;
   
var pie_data = d3.pie()
		.sort(null)
    .value(function(d){return d.val;})
    (data_set) ;

var color_scale = d3.scaleOrdinal()
			.domain( d3.min(data_set, function(d){ return d.val; }), 
      					d3.max(data_set, function(d){ return d.val; }))
			.range( d3.schemeCategory10 )
      ;

var arc = d3.arc()
		.outerRadius( 200 )
    .innerRadius( 0 )
    ;
var label_arc = d3.arc()
		.outerRadius( 150 )
    .innerRadius( 150 )
    ;
var pie_chart = d3.select("#content")
		.selectAll(".arc")
    .data(pie_data)
    .enter()
    .append("g")
    .attr("class", "arc")
		.attr("transform", "translate(300, 200)")
    ;
pie_chart.append("path")
		.attr("d", arc)
    .style("fill", function(d,i){
    		return color_scale( d.data.val ) ;
    })
pie_chart.append("text")
		.attr("transform", function(d) { 
    		return "translate("+label_arc.centroid(d)+ ")" 
        })
		.text(function(d){return d.data.name }) 
    ;