diff --git a/flaskr/templates/estimation.html b/flaskr/templates/estimation.html
index 119bff8..6b15d67 100644
--- a/flaskr/templates/estimation.html
+++ b/flaskr/templates/estimation.html
@@ -72,6 +72,9 @@
{% if not estimation.has_failed() %}
-{% set estimation_output = estimation.get_output_dict() %}
+{#{% set estimation_output = estimation.get_output_dict() %}#}
{% if estimation.has_many_to_many() %}
@@ -94,7 +97,7 @@
Carbon footprint for each city.
- {{ render_cities(estimation_output.mean_footprint.cities) }}
+ {{ render_cities(estimation_output.cities) }}
{% endif %}
@@ -175,6 +178,7 @@ var ceil_value_to_magnitude = function(value) {
/** PLOTS **/
+
jQuery(document).ready(function($){
var vizid = "#cities_footprints_d3viz";
@@ -247,6 +251,106 @@ jQuery(document).ready(function($){
});
});
+
+
+jQuery(document).ready(function($){
+ var vizid = "#cities_footprints_d3viz_lollipop";
+ var csvUrl = "/estimation/{{ estimation.public_id }}.csv";
+ var y_key = 'city';
+ var x_key = 'co2 (g)';
+
+ var margin = {top: 10, right: 30, bottom: 100, left: 100},
+ height = Math.max(300, 100+16*{{ estimation_output.cities | length }}) - margin.top - margin.bottom;
+ var width = Math.max(880, $(vizid).parent().width());
+ width = width - margin.left - margin.right;
+
+ 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 + ")");
+
+ d3.csv(csvUrl, function (data) {
+
+ // Extrema
+ var data_x_max = d3.max(data, function(d) { return parseFloat(d[x_key]); });
+ var axis_x_max = ceil_value_to_magnitude(data_x_max);
+
+ // Add X axis
+ var x = d3.scaleLinear()
+ .domain([0, axis_x_max])
+ .range([0, width]);
+ 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");
+
+ // Y axis
+ var y = d3.scaleBand()
+ .range([0, height])
+ .domain(data.map(function (d) {
+ return d[y_key];
+ }))
+ .padding(1);
+ svg.append("g")
+ .call(d3.axisLeft(y));
+
+
+ // Lines
+ svg.selectAll("myline")
+ .data(data)
+ .enter()
+ .append("line")
+// .attr("x1", function (d) {
+// return x(d[x_key]);
+// })
+ .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]);
+ })
+ .attr("r", "0")
+ .style("fill", "#69b3a2")
+ .attr("stroke", "black");
+
+ var animation_duration = 300;
+ var animation_delay = 100;
+
+ svg.selectAll("circle")
+ .transition()
+ .duration(animation_duration)
+ .attr("r", "4")
+ .delay(function(d, i) { return(i*animation_delay); });
+
+ svg.selectAll("line")
+ .transition()
+ .duration(animation_duration)
+ .attr("x1", function (d) { return x(d[x_key]); })
+ .delay(function(d, i) { return(i*animation_delay); });
+ });
+
+});
+
{% endblock %}
--
libgit2 0.21.2