D3.js - Flying Circles

Just a bunch of SVG circles, floating around...

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

circle:hover {
    fill: #ff0;
    opacity: 1;
}

JavaScript

var width = 800,
    height = 500,
    padding = 0, // separation between same-color nodes
    clusterPadding = 10, // separation between different-color nodes
    maxRadius = 12;

var n = 20, // total number of nodes
    m = 4; // number of distinct clusters

var color = d3.scale.category10()
    .domain(d3.range(m));

// The largest node for each cluster.
var clusters = new Array(m); 

var nodes = d3.range(n).map(function() {
  var i = Math.floor(Math.random() * m  )  ,
      r = 4,
      d = {cluster: i, radius: r};
  
  if (!clusters[i]) 
  { d.radius = 10; clusters[i] = d; }
  
   
   
  return d;
});

var pan_devs = d3.range(n).map(function(n) {
  
      var nxt = Math.floor(Math.random() * m + 1  )  ,
      hps = Math.floor(Math.random() * 4 + 1  ),
      d = {dest: n; next: next; hops: hps};
  
  if (!clusters[i]) 
  { d.radius = 10; clusters[i] = d; }
  
   
   
  return d;
});

// Use the pack layout to initialize node positions.
d3.layout.pack()
    .sort(null)
    .size([width, height])
    .children(function(d) { return d.values; })
    .value(function(d) { return d.radius * d.radius; })
    .nodes({values: d3.nest()
      .key(function(d) { return d.cluster; })
      .entries(nodes)});

var force = d3.layout.force()
    .nodes(nodes)
    .size([width, height])
    .gravity(.01)
    .charge(-5)
    .on("tick", tick)
    .start();

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


var axes = svg.append("line")
              .attr("x1", 0)
              .attr("y1", 0)
              .attr("x2", width)
              .attr("y2", height)
              .attr("stroke", "gray")
              .attr("stroke-width", 1);

var axes = svg.append("line")
              .attr("x1", 0)
              .attr("y1", height)
              .attr("x2", width)
              .attr("y2", 0)
              .attr("stroke", "gray")
              .attr("stroke-width", 1);


var node = svg.selectAll("circle")
    .data(nodes)
 ...