]> nos-oignons.net Git - website.git/blob - Services/Participation.html
60b5552290792dec8c24e5d938a78c4c7a14184a
[website.git] / 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>