force layout with nodes collision

d3.simulationForce
d3.collide
circle size relative to node volumn

<!DOCTYPE html>
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <meta charset="utf-8">
  <style>
  .links line {
  stroke: #999;
  stroke-opacity: 0.4;
	}

.nodes circle {
  stroke: #fff;
  stroke-width: 1px;
	}

text{  
  font-family: sans-serif;
  text-anchor:middle;
  font-size:8px;  
	}
	</style>
</head>

<body>
  
  <script>
   //get screen with and height
	const w=900,
      	h=500;

//setup margin and plot area width
    const margin={top:20,right:50,bottom:20,left:50},
    	  width=w-margin.left-margin.right,
    	  height=h-margin.top-margin.bottom;

//append div and svg and g - margin convention
    $("body").append("<div class='plot'></div>");
    const svg=d3.select(".plot").append("svg")
    		.attr("width",w)
    		.attr("height",h)
        .append("g").attr("transform","translate("+margin.top+","+margin.left+")");

const simulation = d3.forceSimulation()
                         .velocityDecay(0.8)
    					 .force("links",d3.forceLink().id(function(d){return d.id}))
    					 .force("charge",d3.forceManyBody().strength(-100))
                         .force("collide",d3.forceCollide())
    					 .force("center",d3.forceCenter(width/2,height/2));

var color = d3.scaleOrdinal(d3.schemeCategory20);	
    var size =d3.scaleLog().range([1,20])

d3.queue()
      .defer(d3.csv,"data.csv",parse)
      .await(ready)

function ready (error,data){
    	if (error) throw error;

//push all wesite and username to nodes=[] and remove duplicate value
        nestByWebsite.forEach((d)=>{
            nodes.push({"id":d.key,"type":"source","volume":d.volume})
            
        })
        
        nestByUsername.forEach((d)=>{
            nodes.push({"id":d.key,"type":"target","volume":d.volume})
            
        })

data.forEach((d)=>{
    		links.push(
    			{"source":d.website,"target":d.username,"value":d.value}
    		 )
    	})

graph.nodes=nodes,
    	graph.links=links;
        
    	var link = svg.append("g")
      				  .attr("class", "links")
					  .selectAll("line")
					  .data(graph.links)
					  .enter().append("line")
      			      .attr("stroke-width", "1");
        
       
        
        
        size.domain(d3.extent(nodes,(d)=>{return d.volume}))

simulation.nodes(graph.nodes).on("tick", ticked);
			simulation.force("links").links(graph.links);
            simulation.force("collide").radius((d)=>{return size(d.volume)})

node
	        .attr("cx", function(d) { return d.x; })
	        .attr("cy", function(d) { return d.y; });
            
            
            label
	        .attr("x", function(d) { return d.x; })
	        .attr("y", function(d) { return d.y+2; });
  	    }
        
        function dragstarted(d) {
          if (!d3.event.active) simulation.alphaTarget(0.3).restart();
          d.fx = d.x;
          d.fy = d.y;
        }

function dragged(d) {
          d.fx = d3.event.x;
          d.fy = d3.event.y;
        }

function dragended(d) {
          if (!d3.event.active) simulation.alphaTarget(0);
          d.fx = null;
          d.fy = null;
        }

}

function parse(d){

return {
    		website:d.website,
    		username:d.user_name,
    		value:+d.link_share
    	}

}

</script>
</body>

https://code.jquery.com/jquery-1.12.4.js

https://d3js.org/d3.v4.min.js