Commit bd847bc9e36820037ceb4a7e33e06b45601911a2
1 parent
5ee1ecdc
Exists in
master
Add some interactivity to the lollipop plot.
/spend 8h
Showing
1 changed file
with
92 additions
and
11 deletions
Show diff stats
flaskr/templates/estimation.html
... | ... | @@ -284,10 +284,10 @@ jQuery(document).ready(function($){ |
284 | 284 | d3.csv(csvUrl, function (data) { |
285 | 285 | |
286 | 286 | // Extrema |
287 | - var data_x_max = d3.max(data, function(d) { return parseFloat(d[x_key]); }); | |
287 | + var data_x_max = d3.max(data, function (d) { return parseFloat(d[x_key]); }); | |
288 | 288 | var axis_x_max = ceil_value_to_magnitude(data_x_max); |
289 | 289 | |
290 | - // Add X axis | |
290 | + // X axis | |
291 | 291 | var x = d3.scaleLinear() |
292 | 292 | .domain([0, axis_x_max]) |
293 | 293 | .range([0, width]); |
... | ... | @@ -322,12 +322,6 @@ jQuery(document).ready(function($){ |
322 | 322 | {#svg.select(".legendQuant")#} |
323 | 323 | {# .call(legend);#} |
324 | 324 | |
325 | - svg.append("g") | |
326 | - .append('text') | |
327 | - .attr("transform", "translate("+(-180+width/2.0)+","+(height+111)+")") | |
328 | - {#.text("CO2 emissions as a function of travelling distance");#} | |
329 | - .text("CO\u2082 emissions equivalent (kg) per target city."); | |
330 | - | |
331 | 325 | // Lines |
332 | 326 | svg.selectAll("myline") |
333 | 327 | .data(data) |
... | ... | @@ -357,10 +351,90 @@ jQuery(document).ready(function($){ |
357 | 351 | .attr("cy", function (d) { |
358 | 352 | return y(d[y_key]); |
359 | 353 | }) |
360 | - .attr("r", "0") | |
354 | + .attr("r", "0") // animated below | |
361 | 355 | .style("fill", "#69b3a2") |
362 | 356 | .attr("stroke", "black"); |
363 | 357 | |
358 | + // Value text on mouse hover | |
359 | + svg.selectAll("hoverrects") | |
360 | + .data(data) | |
361 | + .enter() | |
362 | + .append("rect") | |
363 | + .style("opacity", 0) | |
364 | + .attr("class", "hover_trigger") | |
365 | + .attr("data-target", function (d, i) { | |
366 | + return "hover_value_" + i.toString(); | |
367 | + }) | |
368 | + .attr("x", function (d) { | |
369 | + return 0; | |
370 | + }) | |
371 | + .attr("y", function (d) { | |
372 | + return y(d[y_key])-6; | |
373 | + }) | |
374 | + .attr("width", width) | |
375 | + .attr("height", 13) | |
376 | + .on("mouseenter", function (d) { | |
377 | + var target_id = d3.select(this).attr("data-target"); | |
378 | + d3.select("#"+target_id).style("opacity", 1); | |
379 | + d3.select("#shadow_"+target_id).style("opacity", 1); | |
380 | + }) | |
381 | + .on("mouseleave", function (d) { | |
382 | + var target_id = d3.select(this).attr("data-target"); | |
383 | + d3.select("#"+target_id).style("opacity", 0); | |
384 | + d3.select("#shadow_"+target_id).style("opacity", 0); | |
385 | + }); | |
386 | + | |
387 | + var compute_text_anchor = function (d) { | |
388 | + if (x(d[x_key]) < width / 2.0) { | |
389 | + return 'start'; | |
390 | + } else { | |
391 | + return 'end'; | |
392 | + } | |
393 | + }; | |
394 | + var compute_text_text = function (d) { | |
395 | + return Math.round(d[x_key]).toLocaleString() + " kg CO\u2082"; | |
396 | + }; | |
397 | + var compute_text_transform = function (d) { | |
398 | + var x_pos = x(d[x_key]); | |
399 | + if (x_pos < width / 2.0) { | |
400 | + return "translate("+(x(d[x_key])+7)+","+(y(d[y_key])+4)+")"; | |
401 | + } else { | |
402 | + return "translate("+(x(d[x_key])-9)+","+(y(d[y_key])+4)+")"; | |
403 | + } | |
404 | + }; | |
405 | + | |
406 | + svg.selectAll("hovertextsshadows") | |
407 | + .data(data) | |
408 | + .enter() | |
409 | + .append("text") | |
410 | + .style("opacity", 0) | |
411 | + .style("pointer-events", "none") | |
412 | + .style("stroke", "white") | |
413 | + .style("stroke-width", "0.618em") | |
414 | + .attr("id", function (d, i) { | |
415 | + return "shadow_hover_value_" + i.toString(); | |
416 | + }) | |
417 | + .attr("font-size", 10) | |
418 | + .attr("text-anchor", compute_text_anchor) | |
419 | + .attr("transform", compute_text_transform) | |
420 | + .text(compute_text_text); | |
421 | + | |
422 | + svg.selectAll("hovertexts") | |
423 | + .data(data) | |
424 | + .enter() | |
425 | + .append("text") | |
426 | + .style("opacity", 0) | |
427 | + .style("pointer-events", "none") | |
428 | + .attr("id", function (d, i) { | |
429 | + return "hover_value_" + i.toString(); | |
430 | + }) | |
431 | + .attr("font-size", 10) | |
432 | + .attr("text-anchor", compute_text_anchor) | |
433 | + .attr("transform", compute_text_transform) | |
434 | + .text(compute_text_text); | |
435 | + | |
436 | + | |
437 | + // Animations | |
364 | 438 | var animation_duration = 300; |
365 | 439 | var animation_delay = 100; |
366 | 440 | |
... | ... | @@ -368,13 +442,20 @@ jQuery(document).ready(function($){ |
368 | 442 | .transition() |
369 | 443 | .duration(animation_duration) |
370 | 444 | .attr("r", "4") |
371 | - .delay(function(d, i) { return(i*animation_delay); }); | |
445 | + .delay(function (d, i) { return(i*animation_delay); }); | |
372 | 446 | |
373 | 447 | svg.selectAll("line") |
374 | 448 | .transition() |
375 | 449 | .duration(animation_duration*0.618) |
376 | 450 | .attr("x1", function (d) { return x(d[x_key]); }) |
377 | - .delay(function(d, i) { return(i*animation_delay); }); | |
451 | + .delay(function (d, i) { return(i*animation_delay); }); | |
452 | + | |
453 | + // Title | |
454 | + svg.append("g") | |
455 | + .append('text') | |
456 | + .attr("transform", "translate("+(-180+width/2.0)+","+(height+111)+")") | |
457 | + .text("CO\u2082 emissions equivalent (kg) per target city."); | |
458 | + | |
378 | 459 | }); |
379 | 460 | |
380 | 461 | }); | ... | ... |