carbon / travel-carbon-footprint.irap.omp.eu

Commit 13b5231b9c346cb664843863a6e75c69d5555a2d

Authored by Adrenesis
1 parent a289e7f7
Exists in master

Add an area to tell which side is aimed by the crusor

Showing 1 changed file with 26 additions and 5 deletions   Show diff stats
Inline Side-by-side
flaskr/static/js/plots/sorted_emissions_inequality.js
  Diff comments   View file @13b5231
... ... @@ -78,7 +78,7 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
78 78  
79 79 }
80 80  
81   - function refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip) {
  81 + function refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip, selectedArea) {
82 82 const x = d3.pointer(event)[0];
83 83 const y = d3.pointer(event)[1];
84 84 // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
... ... @@ -100,11 +100,13 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
100 100 ) {
101 101 vertical.style("display", "none");
102 102 horizontal.style("display", "none");
  103 + selectedArea.style("display", "none");
103 104 tooltip.style("display", "none");
104 105 }
105 106 else {
106 107 vertical.style("display", "inherit");
107 108 horizontal.style("display", "inherit");
  109 + selectedArea.style("display", "inherit");
108 110 tooltip.style("display", "inherit");
109 111 let sliceCollision = getSliceCollision(xInGraph, yInGraph, barSettings);
110 112 // console.log(sliceCollision);
... ... @@ -112,7 +114,10 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
112 114 if (sliceCollision.isXDriving) {
113 115 vertical.style("left", x + "px");
114 116 horizontal.style("top", yScale(sliceCollision.otherAxisLevel) + margin.top + "px");
115   -
  117 + selectedArea.style("top", yScale(sliceCollision.otherAxisLevel) + margin.top + "px");
  118 + selectedArea.style("height", yScale(0) - yScale(sliceCollision.otherAxisLevel) + "px");
  119 + selectedArea.style("left", xScale(0) + margin.left + "px");
  120 + selectedArea.style("width", x - margin.left - xScale(0) + "px");
116 121 tooltip.text(
117 122 Math.round(xInGraph) +
118 123 "% of 🖘 attendees emitted " +
... ... @@ -122,7 +127,10 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
122 127 } else {
123 128 horizontal.style("top", y + "px");
124 129 vertical.style("left", xScale(sliceCollision.otherAxisLevel) + margin.left + "px");
125   -
  130 + selectedArea.style("top", margin.top + "px");
  131 + selectedArea.style("height", y - margin.top + "px");
  132 + selectedArea.style("left", xScale(sliceCollision.otherAxisLevel) + margin.left + "px");
  133 + selectedArea.style("width", xScale(100) - (xScale(sliceCollision.otherAxisLevel)) + "px");
126 134 tooltip.text(
127 135 Math.round(100.0 - sliceCollision.otherAxisLevel) +
128 136 "% of 🖙 attendees emitted " +
... ... @@ -180,12 +188,25 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
180 188 .style("border", "1px solid grey")
181 189 .style("background", "rgba(255, 255, 255, 0.7)");
182 190  
  191 + let selectedArea = d3.select(containerSelector)
  192 + .append("div")
  193 + .attr("class", "no-pointer-events")
  194 + .style("display", "none")
  195 + .style("position", "absolute")
  196 + .style("z-index", "-50")
  197 + .style("width", "0px")
  198 + .style("height", (height) + "px")
  199 + .style("top", (margin.top) + "px")
  200 + .style("bottom", "30px")
  201 + .style("left", "0px")
  202 + .style("background", "rgba(60, 200, 60, 0.3)");
  203 +
183 204 d3.select(containerSelector)
184 205 .on("mousemove", function (event) {
185   - refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip);
  206 + refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip, selectedArea);
186 207 })
187 208 .on("mouseover", function (event) {
188   - refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip);
  209 + refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip, selectedArea);
189 210 });
190 211 }
191 212  
... ...