JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<div id="holder">

		<div id="viz"></div>
	</div>

CSS

.chart{
    background:#d1cec9;    
}
.arcchart path{
    stroke: #2c2c2e;
    stroke-width: 1px;
}

JavaScript

var dataset = [],
    i = 0;

    for(i=0; i<15; i++){
        dataset.push(Math.round(Math.random()*100));
    }

    var viz = d3.select("#viz")
        .append("svg")
        .attr("width", 600)
        .attr("height", 600);   

    
    function buildContainer(viz, className, radius, colour, cx, cy){
        var containingCircle = viz.append("g")
            .attr("class", className)
        
        containingCircle
            .append("g")
                .attr("class", "containingholder")
                    .append("circle")
                    .attr("class", "containing")
                    .style("stroke", "gray")
                    .style("stroke-dasharray", ("3, 3"))
                    .style("fill", colour)
                    .attr("r", radius)
                    .attr("cx", cx)
                    .attr("cy", cy)   
        
        containingCircle
            .append("g")
            .attr("class", "dotholder")

    }



    buildContainer(viz, "followers", 200, "brown", 240, 240);
    buildContainer(viz, "following", 140, "purple", 180, 240);
    buildContainer(viz, "matches", 100, "green", 140, 240);

window.xps = [];
window.yps = [];

function getXCoordinateInCircleSection(i, x, y, r, xa, ya, ra) {
    best = 0;
    for (var c=0; c<i*i+1; c++) {
        done = false;
        while (!done) {
            xp = getRandomCoordinate(x-r, x+r);
            yp = getRandomCoordinate(y-r, y+r);
            done = true;
            if ((xp-x)*(xp-x)+(yp-y)*(yp-y) > (r-20)*(r-20)) done = false;
           if ((xp-xa)*(xp-xa)+(yp-ya)*(yp-ya) < (ra+20)*(ra+20)) done = false;
        }
        dist = 1000000;
        for (var j=0; j<i; j++) {
            d = (window.xps[j]-xp)*(window.xps[j]-xp)+(window.yps[j]-yp)*(window.yps[j]-yp);
            if (d<dist) dist = d;
        }
        if (dist>best) {
            xb = xp;
            yb = yp;
            best = dist;
        }
    }
    window.xps[i] = xb;
    window.yps[i] = yb;
    return...