Blame view

flaskr/templates/estimation.html 17.4 KB
d01e2cc2   Antoine Goutenoir   Add the template ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% extends "base.html" %}


{% block title %}Estimation {{ estimation.public_id }} of your ✈ travel footprint{% endblock %}


{% block hero %}
<div class="jumbotron">
{% if estimation.has_failed() %}
    <h1>{{ content.estimation.failure.hero.title | safe }}</h1>
    <p>{{ content.estimation.failure.hero.description | markdown | safe }}</p>
{% else %}
    <h1>{{ content.estimation.hero.title | safe }}</h1>
    <p>{{ content.estimation.hero.description | markdown | safe }}</p>
{% endif %}
</div>
{% endblock %}



40382971   Antoine Goutenoir   Add the sum of es...
21
22
23
24
25
26
27
28
29
30
{% macro render_footprint(footprint) %}
{% if footprint > 1000 %}
    {{ "%.1f" | format((footprint/1000.0) | round(1)) }} tons CO<sub>2</sub><small>EQ</small>
{% else %}
    {{ "%.1f" | format((footprint) | round(1)) }} kg CO<sub>2</sub><small>EQ</small>
{% endif %}
{% endmacro %}



39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
31
32
33
34
35
{% macro render_cities(cities) %}
<ul class="numbered-list">
{% for city in cities %}
    <li>
        <span class="city-name" title="{{ city.address }}">
e2e42156   Antoine Goutenoir   Add the country t...
36
{% if loop.first %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
37
        <strong>
e2e42156   Antoine Goutenoir   Add the country t...
38
39
40
{% endif %}
        {{ city.city }}, {{ city.country }}
{% if loop.first %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
41
        </strong>
e2e42156   Antoine Goutenoir   Add the country t...
42
{% endif %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
43
44
        </span>
        –
40382971   Antoine Goutenoir   Add the sum of es...
45
        {{ render_footprint(city.footprint) }}
eb5f7e79   Antoine Goutenoir   Display the CO2 i...
46
13c292f1   Antoine Goutenoir   Fix the display o...
47
        {{ "%d" | format(city.distance | round() | int) }} km
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
48
49
50
51
52
53
    </li>
{% endfor %}
</ul>
{% endmacro %}


eb5f7e79   Antoine Goutenoir   Display the CO2 i...
54

d01e2cc2   Antoine Goutenoir   Add the template ...
55
56
{% block body %}
<h2>
8ae021a2   Antoine Goutenoir   Merge shelved cha...
57
    {{ estimation.get_display_name() }} ({{ estimation.status.name }})
d01e2cc2   Antoine Goutenoir   Add the template ...
58
</h2>
62d3db14   Antoine Goutenoir   Show warnings bel...
59

d01e2cc2   Antoine Goutenoir   Add the template ...
60
{% if estimation.errors %}
62d3db14   Antoine Goutenoir   Show warnings bel...
61
62
<div class="row">
    <div class="col-md-12 alert-danger card">
d01e2cc2   Antoine Goutenoir   Add the template ...
63
64
65
66
67
68
69
        <div class="card-body">
            <h3 class="card-title">Errors</h3>
            <pre>
{{ estimation.errors }}
            </pre>
        </div>
    </div>
d01e2cc2   Antoine Goutenoir   Add the template ...
70
</div>
ac935afa   Antoine Goutenoir   Make warnings mor...
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<hr>
{% endif %}

{% if estimation.warnings %}
<div class="row">
    <div class="col-md-12 alert-warning card">
        <div class="card-body">
            <h3 class="card-title">Warnings</h3>
            <pre>
{{ estimation.warnings }}
            </pre>
        </div>
    </div>
</div>

<hr>
d01e2cc2   Antoine Goutenoir   Add the template ...
88
{% endif %}
f3694728   Antoine Goutenoir   Display a summary.
89

cb02e6bf   Antoine Goutenoir   Clean up.
90
{% if not estimation.has_failed() %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
91
<div class="row">
a3e9d0fc   Antoine Goutenoir   Fix home plot leg...
92
93
94
95
    Using
    {% for model in estimation.get_models() %}
        {{ model.name }}{{ ',' if not loop.last }}
    {% endfor %}
388aa926   Antoine Goutenoir   Add train to the ...
96
97
98
99
    {% if estimation.use_train_below_km > 0 %}
        and train travel assumed for distances below {{ estimation.use_train_below_km }} km
    {% endif %}
    .
eb5f7e79   Antoine Goutenoir   Display the CO2 i...
100
101
{#    <h4>Total CO<sub>2</sub> footprint (in kilograms-equivalent) of each city</h4>#}
{#    <div id="cities_footprints_d3viz" class="plot-container"></div>#}
30f014d5   Antoine Goutenoir   Add a lollipop pl...
102
    <hr>
9d1e2065   Antoine Goutenoir   Fix an issue with...
103
104
    <div id="cities_footprints_spinner" class="lds-ripple text-center"><div></div><div></div><div></div></div>
    {# This MUST stay empty (because Simg uses svg.getparentnode.innerhtml) #}
8ae021a2   Antoine Goutenoir   Merge shelved cha...
105
    <div id="cities_footprints_d3viz_lollipop" class="plot-container">
8ae021a2   Antoine Goutenoir   Merge shelved cha...
106
    </div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
107
108
109
110
111
{#    <br>#}
{#    <p>A Legend here</p>#}
</div>

<hr>
cb02e6bf   Antoine Goutenoir   Clean up.
112
{% endif %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
113
114
115
116

<div class="row">

{% if not estimation.has_failed() %}
40382971   Antoine Goutenoir   Add the sum of es...
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

    <div class="col-md-6">
    {#
    The estimation sum is only meaningful when
    there's a single origin or a single destination.
    #}
    {% if not estimation.is_many_to_many() %}
        <h4 class="salient">
            Total:
            <em>
                {{ render_footprint(estimation_sum) }}
            </em>
        </h4>
    {% endif %}

    {% if estimation.is_one_to_one() %}
        {{ content.estimation.lolliplot.one_to_one | markdown | safe }}
        {{ render_cities(estimation_output.cities) }}
    {% elif estimation.is_many_to_one() %}
        {{ content.estimation.lolliplot.many_to_one | markdown | safe }}
        {{ render_cities(estimation_output.cities) }}
    {% elif estimation.is_one_to_many() %}
        {{ content.estimation.lolliplot.one_to_many | markdown | safe }}
        {{ render_cities(estimation_output.cities) }}
    {% elif estimation.is_many_to_many() %}
        {{ content.estimation.lolliplot.many_to_many | markdown | safe }}
        {{ render_cities(estimation_output.cities) }}
    {% endif %}
    </div>
f3694728   Antoine Goutenoir   Display a summary.
146

d01e2cc2   Antoine Goutenoir   Add the template ...
147
    <div class="col-md-6">
490282b4   Antoine Goutenoir   Fix the download ...
148
149
150
151
152
153
154
        <ul class="nav">
            <li class="nav-item m-4">
                <a href="/estimation/{{ estimation.public_id }}.csv" class="btn btn-lg btn-primary">
                    Download CSV
                </a>
            </li>
            <li class="nav-item m-4">
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
155
156
                <a href="/estimation/{{ estimation.public_id }}.yml" class="btn btn-lg btn-warning">
                    Download Raw YAML
490282b4   Antoine Goutenoir   Fix the download ...
157
158
                </a>
            </li>
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
159
160
161
162
163
164
165
166
            <li class="nav-item m-4">
                <a id="cities_footprints_d3viz_lollipop_download"
                   href="#"
                   title="This may not work on IE nor Edge.  Please use a decent browser like Firefox."
                   class="btn btn-lg btn-secondary">
                    Download Plot SVG
                </a>
            </li>
01e54e6b   Antoine Goutenoir   Add (broken) Down...
167
168
169
170
171
172
173
174
            <li class="nav-item m-4">
                <a id="cities_footprints_d3viz_lollipop_download_png"
                   href="#"
                   title="This may not work on IE nor Edge.  Please use a decent browser like Firefox."
                   class="btn btn-lg btn-secondary">
                    Download Plot PNG
                </a>
            </li>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
175
176
177
178
179
180
181
182
183
184
{#            <li class="nav-item m-4">#}
{#                <a href="/estimation/{{ estimation.public_id }}.xls" class="btn btn-lg btn-secondary disabled">#}
{#                    Download XLS#}
{#                </a>#}
{#            </li>#}
{#            <li class="nav-item m-4">#}
{#                <a href="/estimation/{{ estimation.public_id }}.ods" class="btn btn-lg btn-secondary disabled">#}
{#                    Download ODS#}
{#                </a>#}
{#            </li>#}
490282b4   Antoine Goutenoir   Fix the download ...
185
        </ul>
d01e2cc2   Antoine Goutenoir   Add the template ...
186
    </div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
187

d01e2cc2   Antoine Goutenoir   Add the template ...
188
</div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
189
190
191

<hr>

62d3db14   Antoine Goutenoir   Show warnings bel...
192

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
193
194
195
196
197
198
199
200
{#<div class="row">#}
{#    <div class="col-md-6">#}
{#        <h3>Raw Output <small>(YAML)</small></h3>#}
{#        <pre>#}
{#{{ estimation.output_yaml }}#}
{#        </pre>#}
{#    </div>#}
{#</div>#}
a1f12452   Antoine Goutenoir   Add the new conte...
201

24934640   Antoine Goutenoir   Move the equivale...
202

2836764a   Antoine Goutenoir   Add customizable ...
203
204
<div>
    {{ content.estimation.footer | markdown | safe }}
24934640   Antoine Goutenoir   Move the equivale...
205
206
</div>

9d1e2065   Antoine Goutenoir   Fix an issue with...
207
208
209
{# Buffer to drop the PNG image into to hack firefox into downloading the PNG #}
<div id="png_buffer"></div>

24934640   Antoine Goutenoir   Move the equivale...
210
{% endif %}{# not estimation.has_failed() #}
d01e2cc2   Antoine Goutenoir   Add the template ...
211
{% endblock %}
a1f12452   Antoine Goutenoir   Add the new conte...
212
213
214
215

{#############################################################################}
{#############################################################################}

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
216
{% block js %}
cb02e6bf   Antoine Goutenoir   Clean up.
217
218
{% if not estimation.has_failed() %}

b7411dd3   Antoine Goutenoir   Improve the plots...
219
220
221
222
223
<script src="/static/js/vendor/d3.v4.js"></script>
<script src="/static/js/vendor/d3-legend.js"></script>
{#<script src="https://d3js.org/d3.v4.js"></script>#}
{#<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js"></script>#}

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
224
225
226
<script type="text/javascript">

/** POLYFILLS **/
d9d606b4   Antoine Goutenoir   Clean up.
227
Math.log10 = Math.log10 || function(x) { return Math.log(x) * Math.LOG10E; };
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
228
229

/**
c890bcbc   Antoine Goutenoir   Review.
230
 * Useful for axes' domains on plots.
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
 * @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;
b7411dd3   Antoine Goutenoir   Improve the plots...
247
248
    var noloop = 0;
    while ((cursor < value) && (noloop <= 100)) {
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
249
        cursor += 0.1 * low;
b7411dd3   Antoine Goutenoir   Improve the plots...
250
        noloop += 1;
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
251
252
253
254
255
    }

    return sign * cursor;
};

b7411dd3   Antoine Goutenoir   Improve the plots...
256
257
258
259
260
/** CONFIG **/

var plots_config = {
    'cities_count': {{ estimation_output.cities | length }}
};
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
261
262

/** PLOTS **/
30f014d5   Antoine Goutenoir   Add a lollipop pl...
263

eb5f7e79   Antoine Goutenoir   Display the CO2 i...
264
{#
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
265
266
267
jQuery(document).ready(function($){

    var vizid = "#cities_footprints_d3viz";
c890bcbc   Antoine Goutenoir   Review.
268
269
    var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
    var x_key = 'city';
5634c975   Antoine Goutenoir   Expose travel dis...
270
    var y_key = 'co2 (kg)';
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
271
272

    // Set the dimensions and margins of the graph
b7411dd3   Antoine Goutenoir   Improve the plots...
273
    var margin = {top: 10, right: 30, bottom: 150, left: 150},
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
274
275
276
277
278
279
280
281
282
283
284
285
286
287
        height = 666 - margin.top - margin.bottom;
    var width = Math.max(880, $(vizid).parent().width());
    width = width - margin.left - margin.right;

    // Append the svg object to the body of the page
    var svg = d3.select(vizid)
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    // Parse the Data
c890bcbc   Antoine Goutenoir   Review.
288
    d3.csv(csvUrl, function(data) {
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
289
290

        // Extrema
5634c975   Antoine Goutenoir   Expose travel dis...
291
        var data_y_max = d3.max(data, function(d) { return parseFloat(d[y_key]); });
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
292
293
294
295
296
        var axis_y_max = ceil_value_to_magnitude(data_y_max);

        // X axis
        var x = d3.scaleBand()
          .range([ 0, width ])
c890bcbc   Antoine Goutenoir   Review.
297
          .domain(data.map(function(d) { return d[x_key]; }))
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
          .padding(0.2);
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x))
          .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Add Y axis
        var y = d3.scaleLinear()
          .range([ height, 0 ])
          .domain([ 0, axis_y_max ]);
        svg.append("g")
          .call(d3.axisLeft(y));

        // Bars
        svg.selectAll("mybar")
          .data(data)
          .enter()
          .append("rect")
c890bcbc   Antoine Goutenoir   Review.
318
            .attr("x", function(d) { return x(d[x_key]); })
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
319
320
            .attr("width", x.bandwidth())
            .attr("fill", "#d0808b")
c890bcbc   Antoine Goutenoir   Review.
321
            // Hide bars at the beginning
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
322
323
324
325
326
327
328
            .attr("height", function(d) { return height - y(0); }) // always equal to 0
            .attr("y", function(d) { return y(0); });

        // Animation
        svg.selectAll("rect")
          .transition()
          .duration(800)
c890bcbc   Antoine Goutenoir   Review.
329
330
          .attr("y", function(d) { return y(d[y_key]); })
          .attr("height", function(d) { return height - y(d[y_key]); })
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
331
332
333
334
335
336
          .delay(function(d, i) { return(i*100); });

        // …
    });

});
eb5f7e79   Antoine Goutenoir   Display the CO2 i...
337
#}
30f014d5   Antoine Goutenoir   Add a lollipop pl...
338
339
340
341
342
343


jQuery(document).ready(function($){
    var vizid = "#cities_footprints_d3viz_lollipop";
    var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
    var y_key = 'city';
5634c975   Antoine Goutenoir   Expose travel dis...
344
    var x_key = 'co2 (kg)';
30f014d5   Antoine Goutenoir   Add a lollipop pl...
345

ac935afa   Antoine Goutenoir   Make warnings mor...
346
    var margin = {top: 40, right: 40, bottom: 150, left: 180},
b7411dd3   Antoine Goutenoir   Improve the plots...
347
        height = Math.max(300, 100+16*plots_config['cities_count']) - margin.top - margin.bottom;
30f014d5   Antoine Goutenoir   Add a lollipop pl...
348
349
350
    var width = Math.max(880, $(vizid).parent().width());
    width = width - margin.left - margin.right;

1f7df547   Antoine Goutenoir   Hack SVG plot dow...
351
    var svg_tag = d3.select(vizid)
30f014d5   Antoine Goutenoir   Add a lollipop pl...
352
353
      .append("svg")
        .attr("width", width + margin.left + margin.right)
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
354
355
356
357
358
359
360
361
362
        .attr("height", height + margin.top + margin.bottom);

    // Add a background
    svg_tag.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "#ffffff");

    var svg = svg_tag
30f014d5   Antoine Goutenoir   Add a lollipop pl...
363
364
365
366
367
368
369
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    d3.csv(csvUrl, function (data) {

        // Extrema
bd847bc9   Antoine Goutenoir   Add some interact...
370
        var data_x_max = d3.max(data, function (d) { return parseFloat(d[x_key]); });
30f014d5   Antoine Goutenoir   Add a lollipop pl...
371
372
        var axis_x_max = ceil_value_to_magnitude(data_x_max);

bd847bc9   Antoine Goutenoir   Add some interact...
373
        // X axis
30f014d5   Antoine Goutenoir   Add a lollipop pl...
374
375
376
        var x = d3.scaleLinear()
            .domain([0, axis_x_max])
            .range([0, width]);
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
377
            {#.nice();#}
30f014d5   Antoine Goutenoir   Add a lollipop pl...
378
        svg.append("g")
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
379
            .attr("class", "axis-bottom")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
380
381
382
383
384
385
386
387
388
389
390
391
392
393
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x))
            .selectAll("text")
            .attr("transform", "translate(-10,0)rotate(-45)")
            .style("text-anchor", "end");

        // Y axis
        var y = d3.scaleBand()
            .range([0, height])
            .domain(data.map(function (d) {
                return d[y_key];
            }))
            .padding(1);
        svg.append("g")
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
394
            .attr("class", "axis-left")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
395
396
            .call(d3.axisLeft(y));

b7411dd3   Antoine Goutenoir   Improve the plots...
397
398
399
400
401
402
403
404
405
406
407
408
409
410
        {#svg.append("g")#}
        {#    .attr("class", "legendQuant")#}
        {#    .attr("transform", "translate(20,20)");#}
        {##}
        {#var legend = d3.legendColor()#}
        {#    .labelFormat(d3.format(".2f"))#}
        {#    .useClass(true)#}
        {#    .title("Legend")#}
        {#    .titleWidth(100)#}
        {#    .scale(y);#}
        {##}
        {#svg.select(".legendQuant")#}
        {#    .call(legend);#}

30f014d5   Antoine Goutenoir   Add a lollipop pl...
411
412
413
414
415
416
417
418
        // Lines
        svg.selectAll("myline")
            .data(data)
            .enter()
            .append("line")
//            .attr("x1", function (d) {
//                return x(d[x_key]);
//            })
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
419
            .attr("class", "stick")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
            .attr("x1", x(0))
            .attr("x2", x(0))
            .attr("y1", function (d) {
                return y(d[y_key]);
            })
            .attr("y2", function (d) {
                return y(d[y_key]);
            })
            .attr("stroke", "grey");

        // Circles
        svg.selectAll("mycircle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return x(d[x_key]);
            })
            .attr("cy", function (d) {
                return y(d[y_key]);
            })
bd847bc9   Antoine Goutenoir   Add some interact...
441
            .attr("r", "0")  // animated below
30f014d5   Antoine Goutenoir   Add a lollipop pl...
442
443
444
            .style("fill", "#69b3a2")
            .attr("stroke", "black");

bd847bc9   Antoine Goutenoir   Add some interact...
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
        // Value text on mouse hover
        svg.selectAll("hoverrects")
            .data(data)
            .enter()
            .append("rect")
            .style("opacity", 0)
            .attr("class", "hover_trigger")
            .attr("data-target", function (d, i) {
                return "hover_value_" + i.toString();
            })
            .attr("x", function (d) {
                return 0;
            })
            .attr("y", function (d) {
                return y(d[y_key])-6;
            })
            .attr("width", width)
            .attr("height", 13)
            .on("mouseenter", function (d) {
                var target_id = d3.select(this).attr("data-target");
                d3.select("#"+target_id).style("opacity", 1);
                d3.select("#shadow_"+target_id).style("opacity", 1);
            })
            .on("mouseleave", function (d) {
                var target_id = d3.select(this).attr("data-target");
                d3.select("#"+target_id).style("opacity", 0);
                d3.select("#shadow_"+target_id).style("opacity", 0);
            });

        var compute_text_anchor = function (d) {
            if (x(d[x_key]) < width / 2.0) {
                return 'start';
            } else {
                return 'end';
            }
        };
        var compute_text_text = function (d) {
            return Math.round(d[x_key]).toLocaleString() + " kg CO\u2082";
        };
        var compute_text_transform = function (d) {
            var x_pos = x(d[x_key]);
            if (x_pos < width / 2.0) {
                return "translate("+(x(d[x_key])+7)+","+(y(d[y_key])+4)+")";
            } else {
                return "translate("+(x(d[x_key])-9)+","+(y(d[y_key])+4)+")";
            }
        };

        svg.selectAll("hovertextsshadows")
            .data(data)
            .enter()
            .append("text")
            .style("opacity", 0)
            .style("pointer-events", "none")
            .style("stroke", "white")
            .style("stroke-width", "0.618em")
            .attr("id", function (d, i) {
                return "shadow_hover_value_" + i.toString();
            })
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
504
            .attr("class", "value-text")
bd847bc9   Antoine Goutenoir   Add some interact...
505
506
507
508
509
510
511
512
513
514
515
516
517
518
            .attr("font-size", 10)
            .attr("text-anchor", compute_text_anchor)
            .attr("transform", compute_text_transform)
            .text(compute_text_text);

        svg.selectAll("hovertexts")
            .data(data)
            .enter()
            .append("text")
            .style("opacity", 0)
            .style("pointer-events", "none")
            .attr("id", function (d, i) {
                return "hover_value_" + i.toString();
            })
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
519
            .attr("class", "value-text")
bd847bc9   Antoine Goutenoir   Add some interact...
520
521
522
523
524
525
526
            .attr("font-size", 10)
            .attr("text-anchor", compute_text_anchor)
            .attr("transform", compute_text_transform)
            .text(compute_text_text);


        // Animations
30f014d5   Antoine Goutenoir   Add a lollipop pl...
527
528
529
530
531
532
533
        var animation_duration = 300;
        var animation_delay = 100;

        svg.selectAll("circle")
            .transition()
            .duration(animation_duration)
            .attr("r", "4")
bd847bc9   Antoine Goutenoir   Add some interact...
534
            .delay(function (d, i) { return(i*animation_delay); });
30f014d5   Antoine Goutenoir   Add a lollipop pl...
535

1f7df547   Antoine Goutenoir   Hack SVG plot dow...
536
        svg.selectAll("line.stick")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
537
            .transition()
b7411dd3   Antoine Goutenoir   Improve the plots...
538
            .duration(animation_duration*0.618)
30f014d5   Antoine Goutenoir   Add a lollipop pl...
539
            .attr("x1", function (d) { return x(d[x_key]); })
bd847bc9   Antoine Goutenoir   Add some interact...
540
541
542
543
544
545
546
547
            .delay(function (d, i) { return(i*animation_delay); });

        // Title
        svg.append("g")
            .append('text')
            .attr("transform", "translate("+(-180+width/2.0)+","+(height+111)+")")
            .text("CO\u2082 emissions equivalent (kg) per target city.");

01e54e6b   Antoine Goutenoir   Add (broken) Down...
548
        // Download SVG
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
549
550
551
552
553
554
555
556
557
558
559
        $(vizid+"_download").click(function(e){
            e.stopPropagation();
            // Show the values
            $(vizid+" svg .value-text").css("opacity", 1);
            // This possibly won't work on IE and Edge
            saveSvg($(vizid + " svg")[0], "travel_carbon_footprint_{{ estimation.public_id }}.svg");
            // Hide the values
            $(vizid+" svg .value-text").css("opacity", 0);
            return false;
        });

01e54e6b   Antoine Goutenoir   Add (broken) Down...
560
561
562
563
564
565
566
        // Download PNG
        $(vizid+"_download_png").click(function(e){
            e.stopPropagation();
            // Show the values
            $(vizid+" svg .value-text").css("opacity", 1);
            // May not work everywhere, but…
            var simg = new Simg($(vizid + " svg")[0]);
9d1e2065   Antoine Goutenoir   Fix an issue with...
567
            simg.download("travel_carbon_footprint_{{ estimation.public_id }}");
01e54e6b   Antoine Goutenoir   Add (broken) Down...
568
569
570
571
572
            // Hide the values
            $(vizid+" svg .value-text").css("opacity", 0);
            return false;
        });

8ae021a2   Antoine Goutenoir   Merge shelved cha...
573
574
        $('#cities_footprints_spinner').hide();

30f014d5   Antoine Goutenoir   Add a lollipop pl...
575
576
577
578
    });

});

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
579
</script>
cb02e6bf   Antoine Goutenoir   Clean up.
580
581

{% endif %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
582
{% endblock %}