JSFiddle - React, Tailwind, and code Playground

HTML

<div id="uber">
        <p>
            <strong>Hauptherkunftsländer derjenigen, die Asyl beantragen</strong>

        </p>
    </div>
    <div id="tooltip" class="hidden">

        <p>
            <span id="value">100</span>%</p>
    </div>

CSS

.slice text {
        font-size: 9pt;
        font-family: sans-serif;
    }
    text {
        font-family: sans-serif;
        font-size: 12px;
        color: black;
    }
    #uber {
        font-family: sans-serif;
    }
    #tooltip {
        position: absolute;
        width: auto;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
        -moz-box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
        box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
        pointer-events: none;
    }
    #tooltip.hidden {
        opacity: 0;
    }
    #tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
        line-height: 20px;
    }

JavaScript

var w = 500,
        h = 500,
        r = 150,
        color = d3.scale.category20c();


    data = [{
        "label": "sonstige",
        "value": 73.2
    }, {
        "label": "Syrien",
        "value": 21.7
    }, {
        "label": "Serbien",
        "value": 9.7
    }, {
        "label": "Afghanistan",
        "value": 6.5
    }, {
        "label": "Albanien",
        "value": 5.8
    }, {
        "label": "Syrien",
        "value": 4.8
    }, {
        "label": "Eritrea",
        "value": 4.3
    }, {
        "label": "Somalia",
        "value": 3.9
    }, {
        "label": "Mazedonien",
        "value": 3.8
    }, {
        "label": "Bosnien u. Herzegowina",
        "value": 3.7
    }, {
        "label": "Russische Föderation",
        "value": 3.2
    }];

    //var label =data[i].label


    var vis = d3.select("body")
        .append("svg:svg")
        .attr()
        .data([data])
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(" + 1.5 * r + "," + 1.5 * r + ")");


    var circle = vis.append("circle")
        .attr("cx", 3)
        .attr("cy", 3)
        .attr("r", 150)
        .style("opacity",0)
        .transition()
        .duration(5000)
        .delay(2000)
        .style("opacity",100);
        


    var arc = d3.svg.arc().innerRadius(r * 0.6).outerRadius(r);


    var pie = d3.layout.pie()
        .value(function(d) {
            return d.value;
        });
       


    var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice");

    arcs.append("svg:path")
        .attr("stroke", "white")
        .attr("stroke-width", 3)
        .attr("fill", function(d, i) {
            return color(i)
        })
        .attr("d", arc)

//animation start

        .transition()
        //.ease("bounce")
        .duration(2000)
        .attrTween("d", tweenPie)

        function tweenPie(b) {
  b.innerRadius = 0;
  var...