JSFiddle - React, Tailwind, and code Playground

by Sampath

HTML

<div id="chart" style="width: 330px;height: 200px;"> <div id="tooltip" class="hidden"><p id="tooltip-data"></p></div>
</div>

CSS

#tooltip {
    position:absolute;
    background: #ffffe0;
    color: black;
    width: 180px;
    border-radius: 3px;
    box-shadow: 2px 2px 6px rgba(40, 40, 40, 0.5);left:0px;
  }
  #tooltip.hidden {
    display:none;
  }
  #tooltip p {
    margin: 0px;
    padding: 8px;
    font-size: 12px;
  }

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 selects all <g> elements with class slice (there aren't any yet)
  .data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
  .enter() //this will create <g> elements for every "extra" data element that should be associated...