feat: integrate the emissions histogram plot

Antoine Goutenoir
1 parent e86f2462
Showing 3 changed files with 61 additions and 51 deletions Show diff stats
flaskr/static/js/plots/emissions-per-distance.js
flaskr/static/js/plots/utils.js
flaskr/templates/estimation.html
-function draw_emissions_per_distance(divSelector, csvUrl) {
+function draw_emissions_per_distance(containerSelector, csvUrl) {
     // set the dimensions and margins of the graph
     let margin = {top: 48, right: 88, bottom: 68, left: 98},
         width = 960 - margin.left - margin.right,
@@ -75,13 +75,14 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
             vertical.style("display", "inherit");
             tooltip.style("display", "inherit");
         }
-        tooltip.text(attendeePercent + " % of attendees");
+
+        tooltip.text((((attendeePercent<10)?'0':'') + attendeePercent) + "% of attendees");
     }
     function addVerticalLineAndListenCursor(xScale, attendeeNumberPerGroup, attendeeSum) {
-        let verticalRuler = d3.select(divSelector)
+        let verticalRuler = d3.select(containerSelector)
             .append("div")
-            // .attr("class", "remove")
+            .attr("class", "no-pointer-events")
             .style("display", "none")
             .style("position", "absolute")
             .style("z-index", "19")
@@ -92,9 +93,9 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
             .style("left", "-10px")
             .style("background", "#000");
-        let rightArea = d3.select(divSelector)
+        let rightArea = d3.select(containerSelector)
             .append("div")
-            // .attr("class", "remove")
+            .attr("class", "no-pointer-events")
             .style("display", "none")
             .style("position", "absolute")
             .style("z-index", "-50")
@@ -105,13 +106,13 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
             .style("left", "0px")
             .style("background", "rgba(60, 200, 60, 0.3)");
-        let tooltip = d3.select(divSelector)
+        let tooltip = d3.select(containerSelector)
             .append("div")
             .attr("class", "no-pointer-events")
             .style("display", "none")
             .style("position", "absolute")
             .style("z-index", "20")
-            .style("width", "155px")
+            .style("width", "161px")
             .style("height", "35px")
             .style("top", "10px")
             .style("bottom", "30px")
@@ -123,7 +124,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
             .style("border", "1px solid grey")
             .style("background", "rgba(255, 255, 255, 0.7)");
-        d3.select(divSelector + " svg")
+        d3.select(containerSelector + " svg")
             .on("mousemove", function (event) {
                 setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, tooltip, verticalRuler, rightArea);
             })
@@ -133,12 +134,14 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
     }
     document.addEventListener("DOMContentLoaded", () => {
+        width = Math.max(880, $(containerSelector).parent().width());
+        width = width - margin.left - margin.right;
         let maxemissions = 0;
         let maxemissionsPercent = 0;
         let maxDistance = 0;
-        let svg = d3.select(divSelector)
+        let svg = d3.select(containerSelector)
             .append("svg")
-            // .attr("id", divSelector + "-svg")
+            // .attr("id", containerSelector + "-svg")
             .attr("width", width + margin.left + margin.right)
             .attr("height", height + margin.top + margin.bottom)
             .append("g")
@@ -0,0 +1,29 @@
+/** POLYFILLS **/
+Math.log10 = Math.log10 || function(x) { return Math.log(x) * Math.LOG10E; };
+
+/**
+ * Useful for axes' domains on plots.
+ * @param value
+ * @returns {number}
+ */
+const ceil_value_to_magnitude = function (value) {
+    let sign = 1;
+    if (value < 0) {
+        value = Math.abs(value);
+        sign = -1;
+    }
+    if (value < 1) {
+        return sign;
+    }
+
+    const low = Math.pow(10, Math.floor(Math.log10(value)));
+
+    let cursor = low;
+    let noloop = 0;
+    while ((cursor < value) && (noloop <= 100)) {
+        cursor += 0.1 * low;
+        noloop += 1;
+    }
+
+    return sign * cursor;
+};
@@ -103,10 +103,6 @@
 {#    <div id="cities_footprints_d3viz" class="plot-container"></div>#}
     <hr>
     <div id="cities_footprints_spinner" class="lds-ripple text-center"><div></div><div></div><div></div></div>
-
-    <div id="emissions_per_distance_histogram" class="plot-container">
-    </div>
-
     {# This MUST stay empty (because Simg uses svg.getparentnode.innerhtml) #}
     <div id="cities_footprints_d3viz_lollipop" class="plot-container">
     </div>
@@ -115,8 +111,21 @@
 </div>
 <hr>
+
+{# EMISSIONS PER DISTANCE HISTOGRAM ##########################################}
+{# That plot makes no sense with our many to many data. #}
+{% if not estimation.is_many_to_many() %}
+<div class="row">
+    <div id="emissions_per_distance_histogram" class="plot-container"></div>
+</div>
+<hr>
 {% endif %}
+{#############################################################################}
+{% endif %}{# not estimation.has_failed() #}
+
+
+{# LIST OF CITIES ############################################################}
 <div class="row">
 {% if not estimation.has_failed() %}
@@ -216,7 +225,7 @@
     {{ content.estimation.footer | markdown | safe }}
 </div>
-{# Buffer to drop the PNG image into to trick firefox into downloading the PNG #}
+{# Buffer to drop the PNG image into, to trick firefox into downloading the PNG #}
 <div id="png_buffer"></div>
 {% endif %}{# not estimation.has_failed() #}
@@ -233,53 +242,22 @@
 <script src="/static/js/vendor/d3-legend.js"></script>
 <script src="/static/js/vendor/d3-scale-chromatic.v1.min.js"></script>
 <script src="/static/js/vendor/d3-geo-projection.v2.min.js"></script>
+<script src="/static/js/plots/utils.js"></script>
 <script src="/static/js/plots/emissions-per-distance.js"></script>
 <script src="/static/js/plots/travel-legs-worldmap.js"></script>
 <script type="text/javascript">
-/** POLYFILLS **/
-Math.log10 = Math.log10 || function(x) { return Math.log(x) * Math.LOG10E; };
-
-/**
- * Useful for axes' domains on plots.
- * @param value
- * @returns {number}
- */
-var ceil_value_to_magnitude = function(value) {
-    var sign = 1;
-    if (value < 0) {
-        value = Math.abs(value);
-        sign = -1;
-    }
-    if (value < 1) {
-        return sign;
-    }
-
-    var low = Math.pow(10, Math.floor(Math.log10(value)));
-
-    var cursor = low;
-    var noloop = 0;
-    while ((cursor < value) && (noloop <= 100)) {
-        cursor += 0.1 * low;
-        noloop += 1;
-    }
-
-    return sign * cursor;
-};
-
-/** CONFIG **/
-
 var plots_config = {
     'cities_count': {{ estimation_output.cities | length }}
 };
-/** PLOTS **/
-
+{% if not estimation.is_many_to_many() %}
 draw_emissions_per_distance(
     "#emissions_per_distance_histogram",
     "/estimation/{{ estimation.public_id }}.csv"
 );
+{% endif %}
 draw_travel_legs_worldmap(
@@ -374,7 +352,7 @@ jQuery(document).ready(function($){
     var margin = {top: 40, right: 40, bottom: 150, left: 180},
         height = Math.max(300, 100 + 16*plots_config['cities_count']) - margin.top - margin.bottom;
-    var width = Math.max(880, $(vizid).parent().width());
+    var width = Math.max(800, $(vizid).parent().width());
     width = width - margin.left - margin.right;
     var svg_tag = d3.select(vizid)