JSFiddle - React, Tailwind, and code Playground

by Sampath

HTML

<div id="chart" style="width: 330px;height: 200px;"></div>

JavaScript

var width = 400;
var height = 300; //this is the double because are showing just the half of the pie
var radius = Math.min(width, height) / 2;
            
var labelr = radius + 30; // radius for label anchor
//array of colors for the pie (in the same order as the dataset)
var color = d3.scale.ordinal()
  .range(['#2b5eac', '#0dadd3', '#ffea61', '#ff917e', '#ff3e41']);
 
    data = [
    				{ label: 'CDU', value: 10 },
            { label: 'SPD', value: 15 },
            { label: 'Die Grünen', value: 8 },
            { label: 'Die Mitte', value: 1 },
            { label: 'Frei Wähler', value: 3}
            ];
    
    var vis = d3.select("#chart")
                .append("svg")              //create the SVG element inside the <body>
                .data([data])                   //associate our data with the document
                .attr("width", width)           //set the width and height of our visualization (these will be attributes of the <svg> tag
                .attr("height", height)
                .append("svg:g")                //make a group to hold our pie chart
                .attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');    //move the center of the pie chart from 0, 0 to radius, radius
 
    var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
    						 .innerRadius(79)
//  								.outerRadius(radius);
.outerRadius(radius - 10) // full height semi pie
//.innerRadius(0);

 
    var pie = d3.layout.pie()           //this will create arc data for us given a list of values
                .startAngle(-90 * (Math.PI/180))
                .endAngle(90 * (Math.PI/180))
                .padAngle(.02) // some space between slices
  	        	  .sort(null) //No! we don't want to order it by size
                .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array
 
    var arcs = vis.selectAll("g.slice")     //this...