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.yps = [];

function getXCoordinateInCircleSection(i, x, y, r, xa, ya, ra) {
    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-10)*(r-10)) done = false;
       if ((xp-xa)*(xp-xa)+(yp-ya)*(yp-ya) < (ra+10)*(ra+10)) done = false;
    }
    window.yps[i] = yp;
    return xp;
}

function getYCoordinateInCircleSection(i) {
    return window.yps[i];
}
    
    function getRandomCoordinate(min, max){
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

// add followers markers

var followersHolder = d3.select("g.followers .dotholder");
    
    followersHolder.selectAll("circle")
        .data(dataset)
            .enter().append("circle")
            .style("stroke", "gray")
        ...