[tor-commits] [atlas/master] Adds explanations for the aggregated map view

[irl at torproject.org]

commit e4eadee4899c986a2c8e238dd3a0749dd911f72a
Author: Iain R. Learmonth <irl at fsfe.org>
Date:   Tue Dec 19 01:49:07 2017 +0000

    Adds explanations for the aggregated map view
---
 js/views/aggregate/map.js    | 10 ++++++++++
 templates/aggregate/map.html |  4 ++++
 2 files changed, 14 insertions(+)

diff --git a/js/views/aggregate/map.js b/js/views/aggregate/map.js
index ba2119f..f3b6862 100644
--- a/js/views/aggregate/map.js
+++ b/js/views/aggregate/map.js
@@ -17,6 +17,14 @@ define([
 ], function($, _, Backbone, topojson, d3array, d3geo, d3geoproj, aggregatesCollection, aggregateMapTemplate){
   var aggregateSearchView = Backbone.View.extend({
     el: "#content",
+    explanations: {
+        "consensus_weight_fraction": "This map shows the total <a href=\"https://metrics.torproject.org/glossary.html#consensus-weight\" target=\"_blank\">consensus weight</a> of each country's relays as a percentage of all consensus weights in the network.  This percentage is a very rough approximation of the probability of a relay in each country to be selected by clients.",
+        "guard_probability": "This map shows the total guard probability of each country's relays as a percentage of the guard probabilities of all relays in the network. This probability is calculated based on consensus weights, relay flags, and bandwidth weights in the consensus. Path selection depends on more factors, so that this probability can only be an approximation.",
+        "middle_probability": "This map shows the total middle probability of each country's relays as a percentage of the middle probabilities of all relays in the network. This probability is calculated based on consensus weights, relay flags, and bandwidth weights in the consensus. Path selection depends on more factors, so that this probability can only be an approximation.",
+        "exit_probability": "This map shows the total exit probability of each country's relays as a percentage of the exit probabilities of all relays in the network. This probability is calculated based on consensus weights, relay flags, and bandwidth weights in the consensus. Path selection depends on more factors, so that this probability can only be an approximation.",
+        "advertised_bandwidth": "This map shows the total <a href=\"https://metrics.torproject.org/glossary.html#advertised-bandwidth\" target=\"_blank\">advertised bandwidth</a> of each country's relays.",
+        "cw_bw": "This map shows the ratio of total consensus weight versus total advertised bandwidth for each country. Countries shown in purple have greater advertised bandwidth than consensus weight, indicating that they are underweighted. Countries shown in green have greater consensus weight than advertised bandwidth and so are over weighted."
+    },
     initialize: function() {
       this.collection = new aggregatesCollection;
     },
@@ -25,6 +33,7 @@ define([
 
       var aggregate_property = $('input[name="aggregate-property"]:checked').val();
       var aggregates = this.collection.models;
+      var explanations = this.explanations;
 
       var m_width = $("#container").width();
       var width = 938;
@@ -186,6 +195,7 @@ define([
       document.getElementById("aggregate-map").appendChild(svg.node());
 
       $('input[name="aggregate-property"]').prop('disabled', false);
+      $('#map-explain').html(explanations[aggregate_property]);
      });
     },
     save: function() {
diff --git a/templates/aggregate/map.html b/templates/aggregate/map.html
index aadbddb..2f0a0bb 100644
--- a/templates/aggregate/map.html
+++ b/templates/aggregate/map.html
@@ -35,6 +35,8 @@
     </div>
     <% } %>
 <% } else { %>
+   <div class="panel panel-default">
+   <div class="panel-body">
    <div id="aggregate-map">
     <div class="alert alert-danger" id="no-svg">
         <strong>SVG Not Supported!</strong>
@@ -44,6 +46,8 @@
         low-security mode instead to view the map.</p>
     </div>
    </div>
+   <div id="map-explain"></div>
+   </div></div>
    <div class="panel panel-default">
    <div class="panel-body">
    <form id="map-radio-buttons">