Services/Participation.html

   1 [[!meta script="assets/relays"]]
   2 [[!meta script="assets/d3/d3.v3.min"]]
   3
   4 <style type="text/css">
   5
   6 .arc path {
   7   stroke: #fff;
   8 }
   9
  10 </style>
  11
  12 <div style="float: left; width: 45%">
  13   <h2 style="text-align: center;">Consensus weight</h2>
  14   <div id="consensus-pie"></div>
  15 </div>
  16 <div style="float: left; width: 45%; margin-left: 3%">
  17   <h2 style="text-align: center;">Exit probability</h2>
  18   <div id="exit-pie"></div>
  19 </div>
  20 <div style="clear: left;"></div>
  21
  22 <script type="text/javascript">
  23
  24 var width = 250,
  25     height = 250,
  26     radius = Math.min(width, height) / 2,
  27     formatPercent = d3.format(".2%");
  28
  29 var color_nos_oignons = "#ffa430";
  30 var color_others = "#57075f";
  31
  32 var arc = d3.svg.arc()
  33     .outerRadius(radius - 30)
  34     .innerRadius(radius - 80);
  35
  36 var labelRadius = radius - 15;
  37
  38 var pie = d3.layout.pie()
  39     .sort(null)
  40     .value(function(d) { return d.frac; });
  41
  42 var onionoo_url = "https://onionoo.torproject.org/details?type=relay&contact=adminsys@nos-oignons.net";
  43
  44 var search_terms = "";
  45 nos_oignons_relays.forEach(function(r) {
  46   search_terms += " $" + r.fingerprint
  47 });
  48
  49 function PieDrawer() { };
  50 PieDrawer.prototype.getSelector = undefined;
  51 PieDrawer.prototype.getFieldName = undefined;
  52 PieDrawer.prototype.getField = undefined;
  53 PieDrawer.prototype.draw = function() {
  54   var svg = d3.select(this.getSelector()).append("svg")
  55       .style("margin", "auto")
  56       .attr("width", width)
  57       .attr("height", height)
  58     .append("g")
  59       .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  60
  61   var text = svg.append("text")
  62       .attr("text-anchor", "middle")
  63       .attr("dy", ".35em")
  64       .text("Loading…");
  65
  66   var field_getter = this.getField;
  67   d3.json(onionoo_url + "&fields=fingerprint," + this.getFieldName(), function(error, raw_data) {
  68     var frac_nos_oignons = 0;
  69     raw_data['relays'].forEach(function(d) {
  70       nos_oignons_relays.forEach(function(r) {
  71         if (r.fingerprint == d.fingerprint) {
  72           var value = field_getter(d);
  73           if (value) {
  74             frac_nos_oignons += value;
  75           }
  76         }
  77       });
  78     });
  79     var frac_others = 1 - frac_nos_oignons;
  80
  81     data = [ { name: 'Nos oignons', frac: frac_nos_oignons, color: color_nos_oignons, },
  82              { name: 'Others',      frac: frac_others,      color: color_others }, ];
  83
  84     text.text(formatPercent(data[0].frac));
  85
  86     var g = svg.selectAll(".arc")
  87         .data(pie(data))
  88       .enter().append("g")
  89         .attr("class", "arc");
  90
  91     g.append("path")
  92         .attr("d", arc)
  93         .style("fill", function(d) { return d.data.color; });
  94
  95   });
  96 }
  97
  98 function ConsensusPieDrawer() { };
  99 ConsensusPieDrawer.prototype = new PieDrawer();
 100 ConsensusPieDrawer.prototype.getSelector = function() {
 101   return "#consensus-pie";
 102 };
 103 ConsensusPieDrawer.prototype.getFieldName = function() {
 104   return "consensus_weight_fraction";
 105 };
 106 ConsensusPieDrawer.prototype.getField = function(r) {
 107   return r.consensus_weight_fraction;
 108 };
 109
 110 function ExitPieDrawer() { };
 111 ExitPieDrawer.prototype = new PieDrawer();
 112 ExitPieDrawer.prototype.getSelector = function() {
 113   return "#exit-pie";
 114 };
 115 ExitPieDrawer.prototype.getFieldName = function() {
 116   return "exit_probability";
 117 };
 118 ExitPieDrawer.prototype.getField = function(r) {
 119   return r.exit_probability;
 120 };
 121
 122 new ConsensusPieDrawer().draw();
 123 new ExitPieDrawer().draw();
 124
 125 </script>