Tweak the PGP key visualization a bit

* Add mouseover/mouseout events to highlight the incoming and outgoing
  signatures from a given key when moused over.
* Change the border color of each developer key based on how many
  signatures from keys besides the master key they have. Thus,
  devs that have a lot of signatures from other devs will have a more
  green border; those with none will have a white border.

Signed-off-by: Dan McGee <dan@archlinux.org>

2 files changed, 44 insertions, 16 deletions

diff --git a/sitestatic/archweb.css b/sitestatic/archweb.css
index dcf0276..3b638e2 100644
--- a/sitestatic/archweb.css
+++ b/sitestatic/archweb.css
@@ -1046,11 +1046,3 @@ ul.signoff-list {
     width: 100%;
     height: 100%;
 }
-
-    #visualize-keys circle {
-        stroke-width: 1.5px;
-    }
-
-    #visualize-keys line {
-        stroke: #888;
-    }
diff --git a/visualize/static/visualize.js b/visualize/static/visualize.js
index e73171e..307c38c 100644
--- a/visualize/static/visualize.js
+++ b/visualize/static/visualize.js
@@ -65,7 +65,9 @@ function packages_treemap(chart_id, orderings, default_order) {
                 .style("display", function(d) { return d.children ? "none" : null; })
                 .html(cell_html);
             nodes.transition().duration(1500)
-                .style("background-color", function(d) { return d.children ? null : color(d[order.color_attr]); })
+                .style("background-color", function(d) {
+                    return d.children ? null : color(d[order.color_attr]);
+                })
                 .call(cell);
             nodes.exit().transition().duration(1500).remove();
         });
@@ -133,9 +135,9 @@ function developer_keys(chart_id, data_url) {
         r = 10;
 
     var force = d3.layout.force()
+        .friction(0.5)
         .gravity(0.1)
-        .charge(-200)
-        .linkStrength(0.2)
+        .charge(-500)
         .size([jq_div.width(), jq_div.height()]);
 
     var svg = d3.select(chart_id)
@@ -162,10 +164,13 @@ function developer_keys(chart_id, data_url) {
             return d.source >= 0 && d.target >= 0;
         });
 
-        jQuery.map(json.nodes, function(d, i) { d.master_sigs = 0; });
+        jQuery.map(json.nodes, function(d, i) { d.master_sigs = 0; d.other_sigs = 0; });
         jQuery.map(edges, function(d, i) {
+            /* only the target gets credit in either case, as it is their key that was signed */
             if (json.nodes[d.source].group === "master") {
                 json.nodes[d.target].master_sigs += 1;
+            } else {
+                json.nodes[d.target].other_sigs += 1;
             }
         });
         jQuery.map(json.nodes, function(d, i) {
@@ -179,7 +184,11 @@ function developer_keys(chart_id, data_url) {
         var link = svg.selectAll("line")
             .data(edges)
             .enter()
-            .append("line");
+            .append("line")
+            .style("stroke", "#888");
+
+        /* anyone with more than 7 - 1 == 6 signatures gets the top value */
+        var stroke_color_scale = d3.scale.log().domain([1, 7]).range(["white", "green"]).clamp(true);
 
         var node = svg.selectAll("circle")
             .data(json.nodes)
@@ -201,21 +210,47 @@ function developer_keys(chart_id, data_url) {
                 if (d.approved === null) {
                     return d3.rgb(fill(d.group)).darker();
                 } else if (d.approved) {
-                    return "green";
+                    /* add 1 so we don't blow up the logarithm-based scale */
+                    return stroke_color_scale(d.other_sigs + 1);
                 } else {
                     return "red";
                 }
             })
+            .style("stroke-width", "1.5px")
             .call(force.drag);
         node.append("title").text(function(d) { return d.name; });
 
+        var nodeover = function(d, i) {
+            d3.select(this).transition().duration(500).style("stroke-width", "3px");
+            link.filter(function(d_link, i) {
+                return d_link.source === d || d_link.target === d;
+            }).transition().duration(500).style("stroke", "#800");
+        };
+        var nodeout = function(d, i) {
+            d3.select(this).transition().duration(500).style("stroke-width", "1.5px");
+            link.transition().duration(500).style("stroke", "#888");
+        };
+
+        node.on("mouseover", nodeover)
+            .on("mouseout", nodeout);
+
         var distance = function(d, i) {
             /* place a long line between all master keys and other keys.
              * however, other connected clusters should be close together. */
-            if (d.source.group === "master" || d.target.group === "master") {
+            if (d.source.group === "master" || d.target.group === "master" ||
+                    d.source.group === "cacert" || d.target.group === "cacert") {
                 return 200;
             } else {
-                return 50;
+                return 40;
+            }
+        };
+
+        var strength = function(d, i) {
+            if (d.source.group === "master" || d.target.group === "master" ||
+                    d.source.group === "cacert" || d.target.group === "cacert") {
+                return 0.2;
+            } else {
+                return 0.8;
             }
         };
 
@@ -235,6 +270,7 @@ function developer_keys(chart_id, data_url) {
         force.nodes(json.nodes)
             .links(edges)
             .linkDistance(distance)
+            .linkStrength(strength)
             .on("tick", tick)
             .start();
     });