JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Raphael 3D Pie Chart (Draft)</h1>
<h2>Inspired by <a href="http://g.raphaeljs.com/">g.raphael</a></h2>
<div>
    Limitations:
    <ul>
        <li>First Draft so you'd better not use it :)</li>
        <li>Working only with 2 values</li>
    </ul>
</div>
<div id="holder"></div>

CSS

#holder {
    width:300px;
    height: 200px;
}

JavaScript

Raphael.fn.treedpiechart = function (cx, cy, rx, ry, values, opts) {
    opts = opts || {};
    var paper = this,
        sectors = [],
        chart = this.set(),
        series = this.set(),
        order = [],
        len = values.length,
        angle = 0,
        total = 0,
        others = 0
    thickness = 20,
    colors = [],
    shim = {stroke: "none", fill: "#000", "fill-opacity": 0};

    var hues = [.6, .2, .05, .1333, .75, 0];
    for (var i = 0; i < 10; i++) {
        if (i < hues.length) {
            colors.push("hsb(" + hues[i] + ", .75, .75)");
        } else {
            colors.push("hsb(" + hues[i - hues.length] + ", 1, .5)");
        }
    }

    if (len == 1) {
    opts = {fill: opts.colors && opts.colors[0] || colors[0], stroke: opts.stroke || "#fff", "stroke-width": opts.strokewidth == null ? 1 : opts.strokewidth};
    series.push(this.path(["M", cx+rx, cy, "L", cx+rx, cy+thickness, "A", rx, ry, 0, 1, 1, cx-rx, cy+thickness, "L", cx-rx, cy, "z"]).attr(opts));
        series.push(this.ellipse(cx, cy, rx, ry).attr(opts));
        total = values[0];
        values[0] = {value: values[0], order: 0, valueOf: function () { return this.value; }};
        series[0].middle = {x: cx, y: cy};
        series[0].mangle = 180;
    } else {
        function sector(cx, cy, rx, ry, startAngle, endAngle, thickness, fill) {
            var rad = Math.PI / 180,
                x1 = cx + rx * Math.cos(-startAngle * rad),
                x2 = cx + rx * Math.cos(-endAngle * rad),
                xm = cx + rx / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad),
                y1 = cy + ry * Math.sin(-startAngle * rad),
                y2 = cy + ry * Math.sin(-endAngle * rad),
                ym = cy + ry / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad),

                res = [
            "M", cx, cy, "L", x1, y1, "A", rx, ry, 0, +(Math.abs(endAngle - startAngle) > 180), 1, x2, y2, "z"
        ];
        if (ym > cy) {
          ...