Blame view

flaskr/templates/estimation.html 17 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
36
37
38
39
40
41
42
43
44
{% macro render_cities(cities) %}
<ul class="numbered-list">
{% for city in cities %}
    <li>
        <span class="city-name" title="{{ city.address }}">
    {% if loop.first %}
        <strong>
        {{ city.city }}
        </strong>
    {% else %}
        {{ city.city }}
    {% endif %}
        </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
57
58
{% block body %}
<h2>
    {{ estimation.public_id }} ({{ estimation.status.name }})
</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
71
</div>
{% endif %}
f3694728   Antoine Goutenoir   Display a summary.
72

cb02e6bf   Antoine Goutenoir   Clean up.
73
{% if not estimation.has_failed() %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
74
<div class="row">
a3e9d0fc   Antoine Goutenoir   Fix home plot leg...
75
76
77
78
    Using
    {% for model in estimation.get_models() %}
        {{ model.name }}{{ ',' if not loop.last }}
    {% endfor %}
388aa926   Antoine Goutenoir   Add train to the ...
79
80
81
82
    {% 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...
83
84
{#    <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...
85
    <hr>
b7411dd3   Antoine Goutenoir   Improve the plots...
86
    <div id="cities_footprints_d3viz_lollipop" class="plot-container"></div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
87
88
89
90
91
{#    <br>#}
{#    <p>A Legend here</p>#}
</div>

<hr>
cb02e6bf   Antoine Goutenoir   Clean up.
92
{% endif %}
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
93
94
95
96

<div class="row">

{% if not estimation.has_failed() %}
40382971   Antoine Goutenoir   Add the sum of es...
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

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

d01e2cc2   Antoine Goutenoir   Add the template ...
127
    <div class="col-md-6">
490282b4   Antoine Goutenoir   Fix the download ...
128
129
130
131
132
133
134
        <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...
135
136
                <a href="/estimation/{{ estimation.public_id }}.yml" class="btn btn-lg btn-warning">
                    Download Raw YAML
490282b4   Antoine Goutenoir   Fix the download ...
137
138
                </a>
            </li>
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
139
140
141
142
143
144
145
146
            <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...
147
148
149
150
151
152
153
154
            <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...
155
156
157
158
159
160
161
162
163
164
{#            <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 ...
165
        </ul>
d01e2cc2   Antoine Goutenoir   Add the template ...
166
    </div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
167

d01e2cc2   Antoine Goutenoir   Add the template ...
168
</div>
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
169
170
171

<hr>

62d3db14   Antoine Goutenoir   Show warnings bel...
172
173
174
175
176
177
178
179
180
181
182
183
184
{% 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>
{% endif %}

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
185
186
187
188
189
190
191
192
{#<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...
193

24934640   Antoine Goutenoir   Move the equivale...
194

2836764a   Antoine Goutenoir   Add customizable ...
195
196
<div>
    {{ content.estimation.footer | markdown | safe }}
24934640   Antoine Goutenoir   Move the equivale...
197
198
199
</div>

{% endif %}{# not estimation.has_failed() #}
d01e2cc2   Antoine Goutenoir   Add the template ...
200
{% endblock %}
a1f12452   Antoine Goutenoir   Add the new conte...
201
202
203
204

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

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
205
{% block js %}
cb02e6bf   Antoine Goutenoir   Clean up.
206
207
{% if not estimation.has_failed() %}

b7411dd3   Antoine Goutenoir   Improve the plots...
208
209
210
211
212
<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...
213
214
215
<script type="text/javascript">

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

/**
c890bcbc   Antoine Goutenoir   Review.
219
 * Useful for axes' domains on plots.
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
 * @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...
236
237
    var noloop = 0;
    while ((cursor < value) && (noloop <= 100)) {
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
238
        cursor += 0.1 * low;
b7411dd3   Antoine Goutenoir   Improve the plots...
239
        noloop += 1;
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
240
241
242
243
244
    }

    return sign * cursor;
};

b7411dd3   Antoine Goutenoir   Improve the plots...
245
246
247
248
249
/** CONFIG **/

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

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

eb5f7e79   Antoine Goutenoir   Display the CO2 i...
253
{#
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
254
255
256
jQuery(document).ready(function($){

    var vizid = "#cities_footprints_d3viz";
c890bcbc   Antoine Goutenoir   Review.
257
258
    var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
    var x_key = 'city';
5634c975   Antoine Goutenoir   Expose travel dis...
259
    var y_key = 'co2 (kg)';
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
260
261

    // Set the dimensions and margins of the graph
b7411dd3   Antoine Goutenoir   Improve the plots...
262
    var margin = {top: 10, right: 30, bottom: 150, left: 150},
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
263
264
265
266
267
268
269
270
271
272
273
274
275
276
        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.
277
    d3.csv(csvUrl, function(data) {
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
278
279

        // Extrema
5634c975   Antoine Goutenoir   Expose travel dis...
280
        var data_y_max = d3.max(data, function(d) { return parseFloat(d[y_key]); });
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
281
282
283
284
285
        var axis_y_max = ceil_value_to_magnitude(data_y_max);

        // X axis
        var x = d3.scaleBand()
          .range([ 0, width ])
c890bcbc   Antoine Goutenoir   Review.
286
          .domain(data.map(function(d) { return d[x_key]; }))
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
          .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.
307
            .attr("x", function(d) { return x(d[x_key]); })
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
308
309
            .attr("width", x.bandwidth())
            .attr("fill", "#d0808b")
c890bcbc   Antoine Goutenoir   Review.
310
            // Hide bars at the beginning
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
311
312
313
314
315
316
317
            .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.
318
319
          .attr("y", function(d) { return y(d[y_key]); })
          .attr("height", function(d) { return height - y(d[y_key]); })
39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
320
321
322
323
324
325
          .delay(function(d, i) { return(i*100); });

        // …
    });

});
eb5f7e79   Antoine Goutenoir   Display the CO2 i...
326
#}
30f014d5   Antoine Goutenoir   Add a lollipop pl...
327
328
329
330
331
332


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...
333
    var x_key = 'co2 (kg)';
30f014d5   Antoine Goutenoir   Add a lollipop pl...
334

40382971   Antoine Goutenoir   Add the sum of es...
335
    var margin = {top: 40, right: 40, bottom: 150, left: 150},
b7411dd3   Antoine Goutenoir   Improve the plots...
336
        height = Math.max(300, 100+16*plots_config['cities_count']) - margin.top - margin.bottom;
30f014d5   Antoine Goutenoir   Add a lollipop pl...
337
338
339
    var width = Math.max(880, $(vizid).parent().width());
    width = width - margin.left - margin.right;

1f7df547   Antoine Goutenoir   Hack SVG plot dow...
340
    var svg_tag = d3.select(vizid)
30f014d5   Antoine Goutenoir   Add a lollipop pl...
341
342
      .append("svg")
        .attr("width", width + margin.left + margin.right)
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
343
344
345
346
347
348
349
350
351
        .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...
352
353
354
355
356
357
358
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    d3.csv(csvUrl, function (data) {

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

bd847bc9   Antoine Goutenoir   Add some interact...
362
        // X axis
30f014d5   Antoine Goutenoir   Add a lollipop pl...
363
364
365
        var x = d3.scaleLinear()
            .domain([0, axis_x_max])
            .range([0, width]);
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
366
            {#.nice();#}
30f014d5   Antoine Goutenoir   Add a lollipop pl...
367
        svg.append("g")
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
368
            .attr("class", "axis-bottom")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
369
370
371
372
373
374
375
376
377
378
379
380
381
382
            .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...
383
            .attr("class", "axis-left")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
384
385
            .call(d3.axisLeft(y));

b7411dd3   Antoine Goutenoir   Improve the plots...
386
387
388
389
390
391
392
393
394
395
396
397
398
399
        {#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...
400
401
402
403
404
405
406
407
        // 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...
408
            .attr("class", "stick")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
            .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...
430
            .attr("r", "0")  // animated below
30f014d5   Antoine Goutenoir   Add a lollipop pl...
431
432
433
            .style("fill", "#69b3a2")
            .attr("stroke", "black");

bd847bc9   Antoine Goutenoir   Add some interact...
434
435
436
437
438
439
440
441
442
443
444
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
        // 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...
493
            .attr("class", "value-text")
bd847bc9   Antoine Goutenoir   Add some interact...
494
495
496
497
498
499
500
501
502
503
504
505
506
507
            .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...
508
            .attr("class", "value-text")
bd847bc9   Antoine Goutenoir   Add some interact...
509
510
511
512
513
514
515
            .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...
516
517
518
519
520
521
522
        var animation_duration = 300;
        var animation_delay = 100;

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

1f7df547   Antoine Goutenoir   Hack SVG plot dow...
525
        svg.selectAll("line.stick")
30f014d5   Antoine Goutenoir   Add a lollipop pl...
526
            .transition()
b7411dd3   Antoine Goutenoir   Improve the plots...
527
            .duration(animation_duration*0.618)
30f014d5   Antoine Goutenoir   Add a lollipop pl...
528
            .attr("x1", function (d) { return x(d[x_key]); })
bd847bc9   Antoine Goutenoir   Add some interact...
529
530
531
532
533
534
535
536
            .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...
537
        // Download SVG
1f7df547   Antoine Goutenoir   Hack SVG plot dow...
538
539
540
541
542
543
544
545
546
547
548
        $(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...
549
550
551
552
553
554
555
556
557
558
559
560
561
        // 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]);
            simg.download();
            // Hide the values
            $(vizid+" svg .value-text").css("opacity", 0);
            return false;
        });

30f014d5   Antoine Goutenoir   Add a lollipop pl...
562
563
564
565
    });

});

39d46569   Antoine Goutenoir   Surpriiiiise ! :p...
566
</script>
cb02e6bf   Antoine Goutenoir   Clean up.
567
568

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