img-svg

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg></svg>
  <script type="text/babel">
  var n = 20;

var nodes = d3.range(1000).map(function(i) {
  return {
    index: i,
    radius: 3,
    color: i < 200 ? "brown" : "steelblue"
  };
});
    
    var width = window.innerWidth;
    var height = window.innerHeight;
    var color = d3.scaleOrdinal(d3.schemeCategory20);
    var radius = 3;
    var radiusScale = d3.scaleLinear()
    	.range([radius, radius * 5]);
    var simulation = d3.forceSimulation()

.force('collide', d3.forceCollide().radius(d => d.radius+ 6).iterations(2))
.force("center", d3.forceCenter(width / 2, height / 2))
    	.force('x', d3.forceX(width/2).strength(0.1))
    	.force('y', d3.forceY(width/2).strength(0.1));
    
    
    var svg = d3.select('svg')
    	.attr('width', width).attr('height', height);

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js