[tor-commits] [metrics-tasks/master] Add bubble-cw-by-as (#6443)
karsten at torproject.org
karsten at torproject.org
Mon Jun 10 08:43:25 UTC 2013
commit d881561370c7fe5d10368e756e292633985bfbc7
Author: Lunar <lunar at 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>
More information about the tor-commits
mailing list