1000 Largest Exoplanets - Force Collision Canvas

The top 100 largest known exoplanets (based on radius).

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
body {
  background-color: #F1F3F3    
}
</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var width = 960;
var height = 500;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");
  
d3.csv("phl_hec_all_confirmed.csv", function(data) {
  	var radiusData = [];
    data.forEach(function(d) {
      d.radius = +d["P. Radius (EU)"];
      radiusData.push(d)
    })
    radiusData.sort(function(x, y){ return d3.descending(x.radius, y.radius); })
	var top1000Data = radiusData.slice(0,1000)
    
  var nodes = top1000Data;
  var root = nodes[0];

root.radius = 0;
  root.fixed = true;

var force = d3.layout.force()
    .gravity(0.05)
    .charge(function(d, i) { return i ? 0 : -2000; })
    .nodes(nodes)
    .size([width, height]);

force.start();

force.on("tick", function(e) {
    var q = d3.geom.quadtree(nodes);
    var n = nodes.length;
    var i;
    var d;
    for (i = 1; i < n; ++i) {
      q.visit(collide(nodes[i]));
    }
    context.clearRect(0, 0, width, height);
    context.beginPath();
    for (i = 1; i < n; ++i) {
      d = nodes[i];
      context.fillStyle = "steelblue";
      context.moveTo(d.x, d.y);
      context.arc(d.x, d.y, d.radius, 0, 2 * Math.PI);
    }
    context.fill();
  });

canvas.on("mousemove", function() {
    var p1 = d3.mouse(this);
    root.px = p1[0];
    root.py = p1[1];
    force.resume();
  });

</script>

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