diff --git a/diagnostics/d3/chord.html b/diagnostics/d3/chord.html
index 2dade1aaa57..333862b7465 100644
--- a/diagnostics/d3/chord.html
+++ b/diagnostics/d3/chord.html
@@ -5,6 +5,17 @@
 .node {
   font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+.node:hover circle {
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.node .link {
+  stroke-width: 0;
+}
+.node:hover .link {
+  stroke-width: 4px;
+}
 
 .link {
   stroke: steelblue;
@@ -12,8 +23,27 @@
   fill: none;
 }
 
+#legend {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  font-size: 14px;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+#legend h1 {
+  font-weight: 200;
+  margin: 0px;
+  padding: 0px;
+}
+
 </style>
 <body>
+<div id="legend">
+<h1>IPFS TestNet</h1>
+<a href="http://ipfs.io">ipfs.io</a> - <span id="node-count"></span> nodes
+</div>
+
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>
 var hash = window.location.hash.substring(1)
@@ -44,20 +74,14 @@
     .data(graph.nodes)
   .enter().append("g")
     .attr("class", "node")
-    .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })
+
+  var p = projection
 
   node.append("svg:circle")
-    .attr("r", function(d) { return 6; })
+    .attr("r", function(d) { return d.conns + 2; })
     .style("fill", function(d, i) { return color(i % 20); })
+    .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })
 
-  node.append("text")
-    .attr("dx", function(d) { return 8; })
-    .attr("dy", ".31em")
-    // .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
-    // .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
-    .text(function(d) { return d.conns + " - " + d.name; });
-
-  var p = projection
   var link = svg.selectAll(".link")
       .data(graph.paths)
     .enter().append("path")
@@ -68,6 +92,26 @@
                  + " " + p(d[2])[0] + "," + p(d[2])[1];
           })
 
+  node.selectAll('.link')
+      .data(function(d) { return d.links })
+    .enter().append('path')
+      .attr('class', 'link')
+      .style("stroke", function(d) { return color(d.source.index % 20); })
+      .attr("d", function(d) {
+            return "M" + p(d.path[0])[0] + "," + p(d.path[0])[1]
+                 + "S" + p(d.path[1])[0] + "," + p(d.path[1])[1]
+                 + " " + p(d.path[2])[0] + "," + p(d.path[2])[1];
+          })
+
+  node.append("text")
+    .attr("class", "label")
+    .attr("dx", -4)
+    .attr("dy", 3)
+    // .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
+    // .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
+    .text(function(d) { return d.conns + " - " + d.name; })
+    .attr("transform", function(d) { return "rotate(" + (d.x - 90 + rotate) + ")translate(" + d.y + ")"; })
+
   // var mid = svg.selectAll(".node-mid")
   //   .data(graph.mids)
   // .enter().append("g")
@@ -102,6 +146,8 @@
     data.conns = 0
     graph.nodes.push(data)
     graph.byName[data.name] = data
+    data.index = i
+    data.links = []
   })
 
   graph2.links.forEach(function(link) {
@@ -120,8 +166,13 @@
 
     var path = [source, mid, target]
     graph.paths.push(path)
+
+    source.links.push({path: path, source: source})
+    target.links.push({path: path, source: target})
   })
 
+  document.getElementById("node-count").innerText = graph.nodes.length
+
   return graph
 }
 
