JSFiddle - React, Tailwind, and code Playground

by Andy Jones

CSS

body {
    background-color:#383838;
}
.outerElement {
    stroke : #4B6130;
    fill : #262626;
    box-shadow: 10px 10px 5px #fff;
}

.mainElement {
    stroke: #3BAF4A;
    stroke-width: 8px;
    fill : #1C1C1C;
}

#donut {
  
  width: 29rem;
  height: 29rem;
  margin: 0 auto;
}

path.color0 {
  fill: #1072b8;
}

path.color1 {
  fill: #35526b;
}

text {
    fill:#fff;
    text-anchor: middle;
    font-size:11px;
    font-family: 'Open Sans', Arial, sans-serif;
    text-align: center;
}

.menu {
    width:45px;
    cursor:pointer;
}

JavaScript

var menu = function() {
    
    // Protect against missing new keyword
    if (!(this instanceof menu)) {
        return new menu();
    }
    
    
    // The following variables have getter/setter functions exposed so are configurable    
    var data              = [{}],
        width             = 600, 
        height            = 600,
        outerCircleOrbit  = 150, 
        outerCircleRadius = 30, 
        radius            = 50,
        numberOfElements  = 14;
        
        
    var offsetAngleDeg  = -180 / data.length,          // Initial rotation angle designed to put centre the first segment at the top
        rotation        = 2 * Math.PI / numberOfElements, //Amount of rotation ofr each element
        rotationDeg     = 360 / numberOfElements,         //Degrees of rotation for max number of elements
        control         = {},                             // The control that will be augmented and returned
        pie,                                              // The pie layout
        arc;                                              // The arc generator
    
    /**
     * Adds an additional function to the string prototype to allow 
     * C# like string based formatting with placeholders
     */
    if (!String.prototype.format) {
    
        /**
        * Format a string using placeholders by using "{0} {1}".format(arg0, arg1)
        * @param {params} The parameters to replace
        * @returns {string} The formatted string
        */
        String.prototype.format = function () {
            var args = arguments;
            return this.replace(/{(\d+)}/g, function (match, number) {
                return typeof args[number] != 'undefined'
                  ? args[number]
                  : match
                ;
            });
        };
    }
    
    
    /**
     * Calculates the mid point of an arc
     * @param {object} d - The D3 data object that represents the arc
     * @returns {object} A co-ordinate with an x, y...