cluster draft 3

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  svg {border: 1px solid}
  
  circle {
/*     fill: none;
    stroke: black; */
  }

</style>
<svg width="500" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = svg.attr("width"),
    height = svg.attr("height");

var x = d3.scaleLinear().rangeRound([0, width]);

var g = svg.append("g");
const smallRadius = 5;
const innerPadding = 1;

console.log('yo');
d3.json("cluster.json", type, function(error, data) {
  console.log(error);
  if (error) throw error; 
  
  console.log(data);

var simulation = d3.forceSimulation(data)
      .force("x", d3.forceX(function(d) { return width / 2 }))
      .force("y", d3.forceY(height / 2))
      .force("collide", d3.forceCollide(smallRadius + innerPadding))
      .stop();

for (var i = 0; i < 100; ++i) simulation.tick();
 
  var cell = g.selectAll("circle")
  		.data(data)
		  .enter()
      .append("circle")
      .attr("r", smallRadius)
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  
  g.append("circle")
    .attr("r", getOuterRadius(data.length))
    .attr("cx", function(d) { return width/2 })
    .attr("cy", function(d) { return height/2 })
  	.attr("fill", "none")
	  .attr("stroke", "blue");

});

function type(d) {
  if (!d.value) return;
  d.value = +d.value;
  return d;
}
  
function getOuterRadius(nodes) {
  return 6 * smallRadius;
}

</script>

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