Clustering in graph

1 files changed, 54 insertions, 16 deletions

diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 184521d..6afbd80 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -7,7 +7,8 @@
     <script src="smoothie.js"></script>
     <style type="text/css">
         #graph, #statistics, #traffic {position: absolute }
-        .circle, .link { stroke: #56f; stroke-width: 3px; stroke-opacity: 0.75; }
+        .link { stroke-opacity: 0.75; stroke: #56f; }
+        .circle { stroke: #56f; stroke-width: 1px; }
         .nodetext { pointer-events: none; font: 10px sans-serif; }
         body { width:100%; height:100%; margin:0; padding:0; overflow: hidden; }
         svg, div, canvas { margin:0; padding:0; }
@@ -44,6 +45,8 @@ var activeColor = { "r": 0, "g": 230, "b": 20};
 // peaking links (red)
 var peakColor = { "r": 255, "g": 40, "b": 30};
 
+var clusterDirections = [];
+
 // IDs need to begin with a letter.
 function makeId(prefix, text) {
     return prefix + text.replace(/\./g, "-");
@@ -54,6 +57,27 @@ function logarithmicScaling(value) {
     return Math.log(value/1000000+1);
 }
 
+function getCluster(ip) {
+    var p = ip.split('.', 4);
+    var i;
+    if (p.length !== 4) return false;
+    p = p[0] + '-' + p[1] + '-' + p[2];
+    for (i = 0; i < clusterDirections.length; ++i) {
+        if (clusterDirections[i].id === p)
+            return function() { return clusterDirections[i] };
+    }
+    clusterDirections.push({'id':p});
+    var len = clusterDirections.length;
+    var col = len > 10 ? d3.scale.category20() : d3.scale.category10();
+    for (i = 0; i < len; ++i) {
+        clusterDirections[i].x = Math.sin(2*(i/clusterDirections.length)*3.14159);
+        clusterDirections[i].y = Math.cos(2*(i/clusterDirections.length)*3.14159);
+        clusterDirections[i].color = col(clusterDirections[i].id);
+    }
+    i = clusterDirections.length - 1;
+    return function() { return clusterDirections[i] };
+}
+
 function myGraph(el) {
     var changed = false;
 
@@ -66,16 +90,18 @@ function myGraph(el) {
 
         // Add node, if it doesn't exist
         if (!node) {
-            nodes.push(node = {"id": id, "title": title, "x": w/2, "y":h/2});
+            nodes.push(node = {"id": id, "title": title, "x": w/2, "y":h/2, "cluster":getCluster(title)});
             changed = true;
         } else if (!node.isServer && servers[title]) {
             node.isServer = true;
+            node.cluster = false;
+            node.color = servers[title].color;
             // Change color and radius if server.
             var visNode = vis.select("#" + id);
             if (visNode) {
                 visNode.select("circle")
                     .attr("r", 15)
-                    .style("fill", servers[title].color);
+                    .style("stroke-width", "3px");
             }
         }
         node.lifetime = 2;
@@ -287,11 +313,11 @@ function myGraph(el) {
         // Desired distance of the links
         .distance(function(bla) { if (bla.source.isServer && bla.target.isServer) return 10; return 4; })
         // Strength of the links (how strongly the distance is enforced) (0-1)
-        .linkStrength(0.3)
+        .linkStrength(0.5)
         // Force with which all nodes attract each other
-        .charge(function(bla) { return -0.9; })
+        .charge(function(bla) { return bla.isServer ? -3.5 : -0.9; })
         // Friction for the graph nodes
-        .friction(0.5)
+        .friction(0.4)
         .theta(0.75)
         .size([w, h]);
 
@@ -299,12 +325,12 @@ function myGraph(el) {
     links = force.links();
 
 
+    var updateCounter = 0;
     this.update = function () {
         if(changed) {
-            var first = svgLinks.length === 0;
             update();
-            if (first) force.alpha(0.9);
         }
+        if (++updateCounter < 10) force.alpha(force.alpha() + 0.05);
     }
 
     // Update the complete svg.
@@ -346,7 +372,7 @@ function myGraph(el) {
 
         nodeEnter.append("circle")
             .attr("class", "circle")
-            .attr("r", 4).style("fill", "#00f");
+            .attr("r", 4);
 
         nodeEnter.append("text")
             .attr("class", "nodetext")
@@ -369,7 +395,7 @@ function myGraph(el) {
         // Put all nodes on top again by adding them again
         var jGraph = $('#graph').find('svg');
         vis.selectAll('g.node').forEach(function(e){jGraph.append(e)});
-
+        svgNodes.selectAll('circle').style({ "fill": function(d) { return d.color ? d.color : d.cluster().color } });
 
         force.on("tick", renderTick);
 
@@ -378,13 +404,25 @@ function myGraph(el) {
     }
 
     // Render function
-    function renderTick() {
+    function renderTick(e) {
+        var k = 1 * e.alpha;
+        nodes.forEach(function(o, i) {
+            if (typeof(o.cluster) === 'function') {
+                var c = o.cluster();
+                o.x += k * c.x;
+                o.y += k * c.y;
+            }
+        });
         var lx = 1000000, ly = 1000000, ux = -1000000, uy = -1000000;
-        for (var i = 0; i < nodes.length; ++i) {
-            if (nodes[i].x < lx) lx = nodes[i].x;
-            if (nodes[i].x > ux) ux = nodes[i].x;
-            if (nodes[i].y < ly) ly = nodes[i].y;
-            if (nodes[i].y > uy) uy = nodes[i].y;
+        for (var i = 0; i < links.length; ++i) { // Use links not nodes so we ignore orphans
+            if (links[i].source.x < lx) lx = links[i].source.x;
+            if (links[i].source.x > ux) ux = links[i].source.x;
+            if (links[i].source.y < ly) ly = links[i].source.y;
+            if (links[i].source.y > uy) uy = links[i].source.y;
+            if (links[i].target.x < lx) lx = links[i].target.x;
+            if (links[i].target.x > ux) ux = links[i].target.x;
+            if (links[i].target.y < ly) ly = links[i].target.y;
+            if (links[i].target.y > uy) uy = links[i].target.y;
         }
         var width = (ux - lx), height = (uy - ly);
         var scale;