Commit 30f014d5cbde16ca5e21ccc3449e7d73e3534680
1 parent
d1d60d50
Exists in
master
Add a lollipop plot that will scale much better with the cities' count.
Showing
1 changed file
with
106 additions
and
2 deletions
Show diff stats
flaskr/templates/estimation.html
@@ -72,6 +72,9 @@ | @@ -72,6 +72,9 @@ | ||
72 | <div class="row"> | 72 | <div class="row"> |
73 | <h4>Total CO<sub>2</sub> footprint (in grams-equivalent) of each city</h4> | 73 | <h4>Total CO<sub>2</sub> footprint (in grams-equivalent) of each city</h4> |
74 | <div id="cities_footprints_d3viz"></div> | 74 | <div id="cities_footprints_d3viz"></div> |
75 | + <br> | ||
76 | + <hr> | ||
77 | + <div id="cities_footprints_d3viz_lollipop"></div> | ||
75 | {# <br>#} | 78 | {# <br>#} |
76 | {# <p>A Legend here</p>#} | 79 | {# <p>A Legend here</p>#} |
77 | </div> | 80 | </div> |
@@ -81,7 +84,7 @@ | @@ -81,7 +84,7 @@ | ||
81 | <div class="row"> | 84 | <div class="row"> |
82 | 85 | ||
83 | {% if not estimation.has_failed() %} | 86 | {% if not estimation.has_failed() %} |
84 | -{% set estimation_output = estimation.get_output_dict() %} | 87 | +{#{% set estimation_output = estimation.get_output_dict() %}#} |
85 | {% if estimation.has_many_to_many() %} | 88 | {% if estimation.has_many_to_many() %} |
86 | <div class="col-md-6"> | 89 | <div class="col-md-6"> |
87 | <p> | 90 | <p> |
@@ -94,7 +97,7 @@ | @@ -94,7 +97,7 @@ | ||
94 | <p> | 97 | <p> |
95 | Carbon footprint for each city. | 98 | Carbon footprint for each city. |
96 | </p> | 99 | </p> |
97 | - {{ render_cities(estimation_output.mean_footprint.cities) }} | 100 | + {{ render_cities(estimation_output.cities) }} |
98 | </div> | 101 | </div> |
99 | {% endif %} | 102 | {% endif %} |
100 | 103 | ||
@@ -175,6 +178,7 @@ var ceil_value_to_magnitude = function(value) { | @@ -175,6 +178,7 @@ var ceil_value_to_magnitude = function(value) { | ||
175 | 178 | ||
176 | 179 | ||
177 | /** PLOTS **/ | 180 | /** PLOTS **/ |
181 | + | ||
178 | jQuery(document).ready(function($){ | 182 | jQuery(document).ready(function($){ |
179 | 183 | ||
180 | var vizid = "#cities_footprints_d3viz"; | 184 | var vizid = "#cities_footprints_d3viz"; |
@@ -247,6 +251,106 @@ jQuery(document).ready(function($){ | @@ -247,6 +251,106 @@ jQuery(document).ready(function($){ | ||
247 | }); | 251 | }); |
248 | 252 | ||
249 | }); | 253 | }); |
254 | + | ||
255 | + | ||
256 | +jQuery(document).ready(function($){ | ||
257 | + var vizid = "#cities_footprints_d3viz_lollipop"; | ||
258 | + var csvUrl = "/estimation/{{ estimation.public_id }}.csv"; | ||
259 | + var y_key = 'city'; | ||
260 | + var x_key = 'co2 (g)'; | ||
261 | + | ||
262 | + var margin = {top: 10, right: 30, bottom: 100, left: 100}, | ||
263 | + height = Math.max(300, 100+16*{{ estimation_output.cities | length }}) - margin.top - margin.bottom; | ||
264 | + var width = Math.max(880, $(vizid).parent().width()); | ||
265 | + width = width - margin.left - margin.right; | ||
266 | + | ||
267 | + var svg = d3.select(vizid) | ||
268 | + .append("svg") | ||
269 | + .attr("width", width + margin.left + margin.right) | ||
270 | + .attr("height", height + margin.top + margin.bottom) | ||
271 | + .append("g") | ||
272 | + .attr("transform", | ||
273 | + "translate(" + margin.left + "," + margin.top + ")"); | ||
274 | + | ||
275 | + d3.csv(csvUrl, function (data) { | ||
276 | + | ||
277 | + // Extrema | ||
278 | + var data_x_max = d3.max(data, function(d) { return parseFloat(d[x_key]); }); | ||
279 | + var axis_x_max = ceil_value_to_magnitude(data_x_max); | ||
280 | + | ||
281 | + // Add X axis | ||
282 | + var x = d3.scaleLinear() | ||
283 | + .domain([0, axis_x_max]) | ||
284 | + .range([0, width]); | ||
285 | + svg.append("g") | ||
286 | + .attr("transform", "translate(0," + height + ")") | ||
287 | + .call(d3.axisBottom(x)) | ||
288 | + .selectAll("text") | ||
289 | + .attr("transform", "translate(-10,0)rotate(-45)") | ||
290 | + .style("text-anchor", "end"); | ||
291 | + | ||
292 | + // Y axis | ||
293 | + var y = d3.scaleBand() | ||
294 | + .range([0, height]) | ||
295 | + .domain(data.map(function (d) { | ||
296 | + return d[y_key]; | ||
297 | + })) | ||
298 | + .padding(1); | ||
299 | + svg.append("g") | ||
300 | + .call(d3.axisLeft(y)); | ||
301 | + | ||
302 | + | ||
303 | + // Lines | ||
304 | + svg.selectAll("myline") | ||
305 | + .data(data) | ||
306 | + .enter() | ||
307 | + .append("line") | ||
308 | +// .attr("x1", function (d) { | ||
309 | +// return x(d[x_key]); | ||
310 | +// }) | ||
311 | + .attr("x1", x(0)) | ||
312 | + .attr("x2", x(0)) | ||
313 | + .attr("y1", function (d) { | ||
314 | + return y(d[y_key]); | ||
315 | + }) | ||
316 | + .attr("y2", function (d) { | ||
317 | + return y(d[y_key]); | ||
318 | + }) | ||
319 | + .attr("stroke", "grey"); | ||
320 | + | ||
321 | + // Circles | ||
322 | + svg.selectAll("mycircle") | ||
323 | + .data(data) | ||
324 | + .enter() | ||
325 | + .append("circle") | ||
326 | + .attr("cx", function (d) { | ||
327 | + return x(d[x_key]); | ||
328 | + }) | ||
329 | + .attr("cy", function (d) { | ||
330 | + return y(d[y_key]); | ||
331 | + }) | ||
332 | + .attr("r", "0") | ||
333 | + .style("fill", "#69b3a2") | ||
334 | + .attr("stroke", "black"); | ||
335 | + | ||
336 | + var animation_duration = 300; | ||
337 | + var animation_delay = 100; | ||
338 | + | ||
339 | + svg.selectAll("circle") | ||
340 | + .transition() | ||
341 | + .duration(animation_duration) | ||
342 | + .attr("r", "4") | ||
343 | + .delay(function(d, i) { return(i*animation_delay); }); | ||
344 | + | ||
345 | + svg.selectAll("line") | ||
346 | + .transition() | ||
347 | + .duration(animation_duration) | ||
348 | + .attr("x1", function (d) { return x(d[x_key]); }) | ||
349 | + .delay(function(d, i) { return(i*animation_delay); }); | ||
350 | + }); | ||
351 | + | ||
352 | +}); | ||
353 | + | ||
250 | </script> | 354 | </script> |
251 | {% endblock %} | 355 | {% endblock %} |
252 | 356 |