assets/pie_graphs.js

   1 function PieDrawer(selector) {
   2   this.selector = selector;
   3 };
   4 PieDrawer.width = 150;
   5 PieDrawer.height = 150;
   6 PieDrawer.radius = Math.min(PieDrawer.width, PieDrawer.height) / 2;
   7 PieDrawer.formatPercent = d3.format(".2%");
   8
   9 PieDrawer.color_nos_oignons = "#ffa430";
  10 PieDrawer.color_others = "#57075f";
  11
  12 PieDrawer.arc = d3.svg.arc()
  13     .outerRadius(PieDrawer.radius - 10)
  14     .innerRadius(PieDrawer.radius - 40);
  15
  16 PieDrawer.labelRadius = PieDrawer.radius - 15;
  17
  18 PieDrawer.pie = d3.layout.pie()
  19     .sort(null)
  20     .value(function(d) { return d.frac; });
  21
  22 PieDrawer.onionoo_url = "https://onionoo.torproject.org/details?type=relay&contact=%20%20%20%200x9F29C15D42A8B6F3%20Nos%20oignons%20-%2017WLwtW63FrHeMAEVkALnwhfmizBxGXDW1%20email:adminsys[]nos-oignons.net%20url:https://nos-oignons.net%20proof:uri-rsa%20ciissversion:2";
  23
  24
  25 PieDrawer.prototype.getFieldName = undefined;
  26 PieDrawer.prototype.getField = undefined;
  27 PieDrawer.prototype.draw = function() {
  28   var svg = d3.select(this.selector).append("svg")
  29       .style("margin", "auto")
  30       .attr("width", PieDrawer.width)
  31       .attr("height", PieDrawer.height)
  32     .append("g")
  33       .attr("transform", "translate(" + PieDrawer.width / 2 + "," + PieDrawer.height / 2 + ")");
  34
  35   var text = svg.append("text")
  36       .attr("text-anchor", "middle")
  37       .attr("dy", ".35em")
  38       .text(L10n.loading);
  39
  40   var field_getter = this.getField;
  41   d3.json(PieDrawer.onionoo_url + "&fields=fingerprint," + this.getFieldName(), function(error, raw_data) {
  42     var frac_nos_oignons = 0;
  43     raw_data['relays'].forEach(function(d) {
  44       nos_oignons_relays.forEach(function(r) {
  45         if (r.fingerprint == d.fingerprint) {
  46           var value = field_getter(d);
  47           if (value) {
  48             frac_nos_oignons += value;
  49           }
  50         }
  51       });
  52     });
  53     var frac_others = 1 - frac_nos_oignons;
  54
  55     data = [ { name: L10n.nos_oignons, frac: frac_nos_oignons, color: PieDrawer.color_nos_oignons, },
  56              { name: L10n.others,      frac: frac_others,      color: PieDrawer.color_others }, ];
  57
  58     text.text(PieDrawer.formatPercent(data[0].frac));
  59
  60     var g = svg.selectAll(".arc")
  61         .data(PieDrawer.pie(data))
  62       .enter().append("g")
  63         .attr("class", "arc");
  64
  65     g.append("path")
  66         .attr("d", PieDrawer.arc)
  67         .style("fill", function(d) { return d.data.color; });
  68
  69   });
  70 }
  71
  72 function ConsensusPieDrawer(selector) {
  73   this.selector = selector;
  74 };
  75 ConsensusPieDrawer.prototype = new PieDrawer();
  76 ConsensusPieDrawer.prototype.getSelector = function() {
  77   return "#consensus-pie";
  78 };
  79 ConsensusPieDrawer.prototype.getFieldName = function() {
  80   return "consensus_weight_fraction";
  81 };
  82 ConsensusPieDrawer.prototype.getField = function(r) {
  83   return r.consensus_weight_fraction;
  84 };
  85
  86 function ExitPieDrawer(selector) {
  87   this.selector = selector;
  88 };
  89 ExitPieDrawer.prototype = new PieDrawer();
  90 ExitPieDrawer.prototype.getFieldName = function() {
  91   return "exit_probability";
  92 };
  93 ExitPieDrawer.prototype.getField = function(r) {
  94   return r.exit_probability;
  95 };