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);

    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")
            .style("fill", "orange")
            .attr("r", 6)
            .attr("cx", function(d, i){
                return getRandomCoordinate(200/2, 200);//200 being radius of container circle
            })
            .attr("cy", function(d, i){
               return getRandomCoordinate(200/2, 200);//200 being radius of container circle
            });



var followingHolder = d3.select("g.following .dotholder");
    
    followingHolder.selectAll("circle")
        .data(dataset)
           ...