JSFiddle - React, Tailwind, and code Playground

by thewolff

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
        <table>
            <tbody>
                <tr>
                    <th scope="row">Ruby</th>
                    <td>40%</td>
                </tr>
                <tr>
                    <th scope="row">JavaScript</th>
                    <td>26%</td>
                </tr>
                <tr>
                    <th scope="row">Shell</th>
                    <td>5%</td>
                </tr>
                <tr>
                    <th scope="row">Python</th>
                    <td>5%</td>
                </tr>
                <tr>
                    <th scope="row">PHP</th>
                    <td>4%</td>
                </tr>
                <tr>
                    <th scope="row">C</th>
                    <td>4%</td>
                </tr>
                <tr>
                    <th scope="row">Perl</th>
                    <td>3%</td>
                </tr>
                <tr>
                    <th scope="row">C++</th>
                    <td>2%</td>
                </tr>
                <tr>
                    <th scope="row">Java</th>
                    <td>2%</td>
                </tr>
                <tr>
                    <th scope="row">Objective-C</th>
                    <td>2%</td>
                </tr>
            </tbody>
        </table>
        <div id="holder"></div>

CSS

body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}

JavaScript

Raphael.fn.donutChart = function (cx, cy, r, rin, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        //console.log(params.fill);
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad),
            xx1 = cx + rin * Math.cos(-startAngle * rad),
            xx2 = cx + rin * Math.cos(-endAngle * rad),
            yy1 = cy + rin * Math.sin(-startAngle * rad),
            yy2 = cy + rin * Math.sin(-endAngle * rad);
        
        return paper.path(["M", xx1, yy1,
                           "L", x1, y1, 
                           "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
                           "L", xx2, yy2, 
                           "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
                         ).attr(params);
        
    }
    var angle = 0,
        total = 0,
        start = 0,
        palette = {
                    aqua        :     "90-#3cc1bf:5-#5ae6e4:95",    //aqua
                    green        :     "90-#57a71f:5-#90db5e:95",    //green
                    navy        :     "90-#064d73:5-#075680:95",    //navy
                    blue        :     "90-#0165a0:5-#0183b6:95",    //blue
                    plum        :     "90-#573a5e:5-#734c7e:95",    //plum
                    dark        :     "90-#1a2b52:5-#223768:95",    //dark
                    grey        :     "90-#b1b1b1:5-#cacaca:95",    //grey
                    lightblue    :    "90-#3ea8d9:5-#5ac1e4:95"    //light blue
                };
        var filldonut = [palette.blue, palette.aqua, palette.green, palette.plum, palette.grey, palette.navy ], 
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value /...