Blame view

flaskr/templates/estimation.html 17.4 KB
d01e2cc2   Antoine Goutenoir   Add the template ...
1
2
3
{% extends "base.html" %}


29a1d1c1   Antoine Goutenoir   Rename columns in...
4

d01e2cc2   Antoine Goutenoir   Add the template ...
5
6
7
{% block title %}Estimation {{ estimation.public_id }} of your ✈ travel footprint{% endblock %}


29a1d1c1   Antoine Goutenoir   Rename columns in...
8

d01e2cc2   Antoine Goutenoir   Add the template ...
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% 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...
23
24
25
26
27
28
29
30
31
32
{% 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...
33
34
35
36
37
{% 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...
38
{% if loop.first %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
39
        <strong>
e2e42156   Antoine Goutenoir   Add the country t...
40
41
42
{% endif %}
        {{ city.city }}, {{ city.country }}
{% if loop.first %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
43
        </strong>
e2e42156   Antoine Goutenoir   Add the country t...
44
{% endif %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
45
46
        </span>
        –
40382971   Antoine Goutenoir   Add the sum of es...
47
        {{ render_footprint(city.footprint) }}
eb5f7e79   Antoine Goutenoir   Display the CO2 i...
48
13c292f1   Antoine Goutenoir   Fix the display o...
49
        {{ "%d" | format(city.distance | round() | int) }} km
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
50
51
52
53
54
55
    </li>
{% endfor %}
</ul>
{% endmacro %}


eb5f7e79   Antoine Goutenoir   Display the CO2 i...
56

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

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

<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 ...
90
{% endif %}
f3694728   Antoine Goutenoir   Display a summary.
91

cb02e6bf   Antoine Goutenoir   Clean up.
92
{% if not estimation.has_failed() %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
93
<div class="row">
a3e9d0fc   Antoine Goutenoir   Fix home plot leg...
94
95
96
97
    Using
    {% for model in estimation.get_models() %}
        {{ model.name }}{{ ',' if not loop.last }}
    {% endfor %}
388aa926   Antoine Goutenoir   Add train to the ...
98
99
100
101
    {% 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...
102
103
{#    <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...
104
    <hr>
9d1e2065   Antoine Goutenoir   Fix an issue with...
105
106
    <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...
107
    <div id="cities_footprints_d3viz_lollipop" class="plot-container">
8ae021a2   Antoine Goutenoir   Merge shelved cha...
108
    </div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
109
110
111
112
113
{#    <br>#}
{#    <p>A Legend here</p>#}
</div>

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

<div class="row">

{% if not estimation.has_failed() %}
40382971   Antoine Goutenoir   Add the sum of es...
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
146
147

    <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.
148

d01e2cc2   Antoine Goutenoir   Add the template ...
149
    <div class="col-md-6">
490282b4   Antoine Goutenoir   Fix the download ...
150
151
152
153
154
155
156
        <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...
157
158
                <a href="/estimation/{{ estimation.public_id }}.yml" class="btn btn-lg btn-warning">
                    Download Raw YAML
490282b4   Antoine Goutenoir   Fix the download ...
159
160
                </a>
            </li>
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
161
162
163
164
165
166
167
168
            <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...
169
170
171
172
173
174
175
176
            <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...
177
178
179
180
181
182
183
184
185
186
{#            <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 ...
187
        </ul>
d01e2cc2   Antoine Goutenoir   Add the template ...
188
    </div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
189

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

<hr>

62d3db14   Antoine Goutenoir   Show warnings bel...
194

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
195
196
197
198
199
200
201
202
{#<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...
203

24934640   Antoine Goutenoir   Move the equivale...
204

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

9d1e2065   Antoine Goutenoir   Fix an issue with...
209
210
211
{# 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...
212
{% endif %}{# not estimation.has_failed() #}
d01e2cc2   Antoine Goutenoir   Add the template ...
213
{% endblock %}
a1f12452   Antoine Goutenoir   Add the new conte...
214
215
216
217

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

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

b7411dd3   Antoine Goutenoir   Improve the plots...
221
222
223
224
225
<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...
226
227
228
<script type="text/javascript">

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

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

    return sign * cursor;
};

b7411dd3   Antoine Goutenoir   Improve the plots...
258
259
260
261
262
/** CONFIG **/

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

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

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

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

    // Set the dimensions and margins of the graph
b7411dd3   Antoine Goutenoir   Improve the plots...
275
    var margin = {top: 10, right: 30, bottom: 150, left: 150},
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
276
277
278
279
280
281
282
283
284
285
286
287
288
289
        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.
290
    d3.csv(csvUrl, function(data) {
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
291
292

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

        // X axis
        var x = d3.scaleBand()
          .range([ 0, width ])
c890bcbc   Antoine Goutenoir   Review.
299
          .domain(data.map(function(d) { return d[x_key]; }))
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
          .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.
320
            .attr("x", function(d) { return x(d[x_key]); })
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
321
322
            .attr("width", x.bandwidth())
            .attr("fill", "#d0808b")
c890bcbc   Antoine Goutenoir   Review.
323
            // Hide bars at the beginning
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
324
325
326
327
328
329
330
            .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.
331
332
          .attr("y", function(d) { return y(d[y_key]); })
          .attr("height", function(d) { return height - y(d[y_key]); })
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
333
334
335
336
337
338
          .delay(function(d, i) { return(i*100); });

        // …
    });

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


jQuery(document).ready(function($){
    var vizid = "#cities_footprints_d3viz_lollipop";
    var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
    var y_key = 'city';
29a1d1c1   Antoine Goutenoir   Rename columns in...
346
    var x_key = 'co2_kg';
30f014d5   Antoine Goutenoir   Add a lollipop pl...
347

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

1f7df547   Antoine Goutenoir   Hack SVG plot dow...
353
    var svg_tag = d3.select(vizid)
30f014d5   Antoine Goutenoir   Add a lollipop pl...
354
355
      .append("svg")
        .attr("width", width + margin.left + margin.right)
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
356
357
358
359
360
361
362
363
364
        .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...
365
366
367
368
369
370
371
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    d3.csv(csvUrl, function (data) {

        // Extrema
29a1d1c1   Antoine Goutenoir   Rename columns in...
372
373
374
        var data_x_max = d3.max(data, function (d) {
            return parseFloat(d[x_key]);
        });
30f014d5   Antoine Goutenoir   Add a lollipop pl...
375
376
        var axis_x_max = ceil_value_to_magnitude(data_x_max);

bd847bc9   Antoine Goutenoir   Add some interact...
377
        // X axis
30f014d5   Antoine Goutenoir   Add a lollipop pl...
378
379
380
        var x = d3.scaleLinear()
            .domain([0, axis_x_max])
            .range([0, width]);
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
381
            {#.nice();#}
30f014d5   Antoine Goutenoir   Add a lollipop pl...
382
        svg.append("g")
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
383
            .attr("class", "axis-bottom")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
384
385
386
387
388
389
390
391
392
393
394
395
396
397
            .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...
398
            .attr("class", "axis-left")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
399
400
            .call(d3.axisLeft(y));

b7411dd3   Antoine Goutenoir   Improve the plots...
401
402
403
404
405
406
407
408
409
410
411
412
413
414
        {#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...
415
416
417
418
419
420
421
422
        // 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...
423
            .attr("class", "stick")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
            .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...
445
            .attr("r", "0")  // animated below
30f014d5   Antoine Goutenoir   Add a lollipop pl...
446
447
448
            .style("fill", "#69b3a2")
            .attr("stroke", "black");

bd847bc9   Antoine Goutenoir   Add some interact...
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
504
505
506
507
        // 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...
508
            .attr("class", "value-text")
bd847bc9   Antoine Goutenoir   Add some interact...
509
510
511
512
513
514
515
516
517
518
519
520
521
522
            .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...
523
            .attr("class", "value-text")
bd847bc9   Antoine Goutenoir   Add some interact...
524
525
526
527
528
529
530
            .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...
531
532
533
534
535
536
537
        var animation_duration = 300;
        var animation_delay = 100;

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

1f7df547   Antoine Goutenoir   Hack SVG plot dow...
540
        svg.selectAll("line.stick")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
541
            .transition()
b7411dd3   Antoine Goutenoir   Improve the plots...
542
            .duration(animation_duration*0.618)
30f014d5   Antoine Goutenoir   Add a lollipop pl...
543
            .attr("x1", function (d) { return x(d[x_key]); })
bd847bc9   Antoine Goutenoir   Add some interact...
544
545
546
547
548
549
550
551
            .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...
552
        // Download SVG
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
553
554
555
556
557
558
559
560
561
562
563
        $(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...
564
565
566
567
568
569
570
        // 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...
571
            simg.download("travel_carbon_footprint_{{ estimation.public_id }}");
01e54e6b   Antoine Goutenoir   Add (broken) Down...
572
573
574
575
576
            // Hide the values
            $(vizid+" svg .value-text").css("opacity", 0);
            return false;
        });

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

30f014d5   Antoine Goutenoir   Add a lollipop pl...
579
580
581
582
    });

});

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
583
</script>
cb02e6bf   Antoine Goutenoir   Clean up.
584
585

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