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>
	


<svg>
	<defs>
 <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
 <image xlink:href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSTzjaQlkAJswpiRZByvgsb3CVrfNNLLwjFHMrkZ_bzdPOWdxDE2Q" x="0" y="0" width="100" height="100" />

</pattern>

</defs>
</svg>

CSS

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

JavaScript

var dataset = [],
    i = 0;

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

    var viz = d3.select("#viz")
        .append("svg")
        .attr("width", 600)
        .attr("height", 600)
    .append("g")
        .attr("transform", "translate(100,0)")

    var user = viz.append("g")
        .attr("transform", "translate(50,0)")
        .append("circle")
                    .attr("class", "user")
                    .style("stroke", "gray")
                    .style("fill", "url(#img1)")
                    .attr("r", 40)
                    .attr("cx", -59)
                    .attr("cy", 250)  
    
    
    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+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-12)*(r-12)) done = false;
        ...