[metrics-tasks/master] Add bubble-cw-by-as (#6443) - tor-commits

10 Jun 2013

commit d881561370c7fe5d10368e756e292633985bfbc7
Author: Lunar lunar@torproject.org
Date:   Fri Jun 7 17:50:40 2013 +0200
Add bubble-cw-by-as (#6443)
Visualize the Tor network grouped by AS. With mouseovers.
---
 task-6443/bubble-cw/bubble-cw-by-as.html |  142 ++++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)

diff --git a/task-6443/bubble-cw/bubble-cw-by-as.html b/task-6443/bubble-cw/bubble-cw-by-as.html
new file mode 100644
index 0000000..8133aa1
--- /dev/null
+++ b/task-6443/bubble-cw/bubble-cw-by-as.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+text {
+  font: 10px sans-serif;
+}
+
+</style>
+<body>
+<script src="d3.min.js"></script>
+
+<script>
+var diameter = 1200,
+    format = d3.format(",d"),
+    color = d3.scale.category20c();
+
+var bubble = d3.layout.pack()
+    .sort(null)
+    .size([diameter, diameter])
+    .padding(1.5);
+
+var svg = d3.select("body").append("svg")
+    .attr("width", diameter)
+    .attr("height", diameter)
+    .attr("class", "bubble");
+
+d3.json("details.json", function(error, data) {
+  var by_as = {};
+  data.relays.forEach(function(relay) {
+    if (relay.running) {
+      if (!by_as.hasOwnProperty(relay.as_number)) {
+        by_as[relay.as_number] = { name: relay.as_name, children: [] };
+      }
+      by_as[relay.as_number].children.push({ name: relay.nickname ? relay.fingerprint : relay.nickname,
+                                             value: relay.consensus_weight });
+    }
+  });
+
+  var cutOff = 100 / 8 * 1000; // 100 Mbit/s
+  var bubbles = svg.selectAll(".node")
+      .data(bubble.nodes({ children: d3.values(by_as) }));
+  var node = bubbles.enter().append("g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+  node.append("circle")
+      .filter(function(d) { return d.children && d.name; })
+      .attr("r", function(d) { return d.r; })
+      .style("fill", "#888888")
+      .style("fill-opacity", ".25");
+
+  node.filter(function(d) { return !d.children;})
+    .append("image")
+      .attr("xlink:href", function(d) { return "tor-consensus-vis-node-" + (d.value > cutOff ? "onion" : "circle") + ".svg"; })
+      .attr("transform", function(d) { return "translate(" + -d.r + "," + -d.r + ")"; })
+      .attr("width", function(d) { return d.r * 2; })
+      .attr("height", function(d) { return d.r * 2; })
+      .attr("preserveAspectRatio", "xMidYMin");
+
+  node.filter(function(d) { return d.children && d.name; })
+    .each(function(d) {
+      var g = svg.append("g")
+        .attr("transform", "translate(" + d.x + "," + d.y + ")");
+      g.append("circle")
+        .attr("r", d.r)
+        .style("fill", "#000000")
+        .style("fill-opacity", "0")
+        .style("stroke", "none");
+      g.on("mouseover", function() {
+            svg.append("text")
+                .attr("transform", "translate(" + d.x + "," + (d.y - d.r) + ")")
+                .attr("id", "group-name")
+                .style("text-anchor", "middle")
+                .style("font-size", "14pt")
+                .text((d.name + "").substring(0, 20));
+          })
+       .on("mouseout", function() {
+            d3.select("#group-name").remove();
+          });
+    });
+
+  /*
+  node.filter(function(d) { return !d.children && d.value > cutOff; })
+    .append("text")
+      .attr("dy", ".3em")
+      .style("text-anchor", "middle")
+      .text(function(d) { return d.className; });
+   */
+
+  var title = svg.append("g")
+      .attr("transform", "translate(" + (diameter / 3) +", " + (diameter - 30) + ")");
+  title.append("text")
+      .text("by as")
+      .attr("text-anchor", "middle")
+      .attr("style", "font-size: 18pt");
+  title.append("text")
+      .text(data['relays_published'])
+      .attr("text-anchor", "middle")
+      .attr("dy", "15")
+      .attr("style", "font-size: 10pt");
+
+  var legendWidth = 270;
+  var legendHeight = 115;
+  var legendIconSize = 50;
+  var legendIconMargin = (legendHeight - legendIconSize * 2) / 3;
+  var legend = svg.append("g")
+      .attr("transform", "translate(" + (diameter - legendWidth - 10) +", " + (diameter - legendHeight - 10) + ")")
+  legend.append("rect")
+      .attr("width", legendWidth)
+      .attr("height", legendHeight)
+      .attr("fill", "#cccccc")
+      .attr("stroke", "#000000");
+  var legendOnion = legend.append("g")
+      .attr("transform", "translate(0, " + legendIconMargin + ")");
+  legendOnion.append("image")
+    .attr("xlink:href", "tor-consensus-vis-node-onion.svg")
+      .attr("width", legendIconSize)
+      .attr("height", legendIconSize)
+      .attr("preserveAspectRatio", "xMidYMin");
+  legendOnion.append("text")
+      .text("relays with at least " + (cutOff * 8 / 1000) + " Mbit/s of capacity")
+      .attr("text-anchor", "start")
+      .attr("dx", legendIconSize)
+      .attr("dy", legendIconSize / 2)
+  var legendCircle = legend.append("g")
+      .attr("transform", "translate(0, " + (legendIconSize + legendIconMargin * 2) + ")");
+  legendCircle.append("image")
+    .attr("xlink:href", "tor-consensus-vis-node-circle.svg")
+      .attr("width", legendIconSize)
+      .attr("height", legendIconSize)
+      .attr("preserveAspectRatio", "xMidYMin");
+  legendCircle.append("text")
+      .text("smaller relays")
+      .attr("text-anchor", "start")
+      .attr("dx", legendIconSize)
+      .attr("dy", legendIconSize / 2)
+});
+
+d3.select(self.frameElement).style("height", diameter + "px");
+
+</script>

    