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

Commit 4256c4773e4b3d7a38f7d3dce7f6dd4d915c9bc4

Authored by Antoine Goutenoir
1 parent 2ee2acee
Exists in master

feat: integrate the emissions graph some more

Showing 1 changed file with 27 additions and 23 deletions   Show diff stats
Inline Side-by-side
flaskr/static/js/plots/sorted_emissions_inequality.js
  Diff comments   View file @4256c47
... ... @@ -78,18 +78,15 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
78 78  
79 79 }
80 80  
81   - function setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box) {
82   - // mousex = d3.mouse(this);
  81 + function setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip) {
83 82 const x = d3.pointer(event)[0];
84 83 const y = d3.pointer(event)[1];
85 84 // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
86   - // x += 5;
87   - box.style("left", (x + 10) + "px");
88   - box.style("top", (y - 20) + "px");
  85 + tooltip.style("left", (x + 10) + "px");
  86 + tooltip.style("top", (y - 30) + "px");
89 87 let xInGraph = xScale.invert(x - margin.left);
90 88 let yInGraph = yScale.invert(y - margin.top);
91 89  
92   -
93 90 // let sliceId = xScale.invert(x * 1.025 - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().x- margin.left)/500 +1;
94 91 // let attendeePercent = (getAttendeeOnRight(sliceId, attendeeNumberPerGroup) / attendeeSum * 100.0).toFixed(1);
95 92 if (
... ... @@ -101,32 +98,35 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
101 98 ||
102 99 y > height + margin.top
103 100 ) {
104   - vertical.style("width", 0);
105   - horizontal.style("height", 0);
106   - box.style("display", "none");
  101 + vertical.style("display", "none");
  102 + horizontal.style("display", "none");
  103 + tooltip.style("display", "none");
107 104 }
108 105 else {
109   - vertical.style("width", "2px");
110   - horizontal.style("height", "2px");
111   - box.style("display", "inherit");
  106 + vertical.style("display", "inherit");
  107 + horizontal.style("display", "inherit");
  108 + tooltip.style("display", "inherit");
112 109 let sliceCollision = getSliceCollision(xInGraph, yInGraph, barSettings);
113 110 // console.log(sliceCollision);
114 111 if (sliceCollision) {
  112 +
115 113 if (sliceCollision.isXDriving) {
116 114 vertical.style("left", x + "px");
117 115 horizontal.style("top", yScale(sliceCollision.otherAxisLevel) + margin.top + "px");
118 116  
119   - box.text(xInGraph + " " + sliceCollision.otherAxisLevel);
  117 + tooltip.text(Math.round(xInGraph) + "% of participants emitted " + Math.round(sliceCollision.otherAxisLevel) + "% of CO\u2082eq");
120 118 } else {
121 119 horizontal.style("top", y + "px");
122   - vertical.style("left", xScale(sliceCollision.otherAxisLevel) + margin.right + "px");
  120 + vertical.style("left", xScale(sliceCollision.otherAxisLevel) + margin.left + "px");
123 121  
124   - box.text(sliceCollision.otherAxisLevel + " " + yInGraph);
  122 + // noinspection JSSuspiciousNameCombination o.O
  123 + tooltip.text(Math.round(100.0 - sliceCollision.otherAxisLevel) + "% of participants emitted " + Math.round(100.0 - yInGraph) + "% of CO\u2082eq");
  124 + // tooltip.text(sliceCollision.otherAxisLevel + " " + yInGraph);
125 125 }
126 126 }
127 127  
128 128 }
129   - // box.text(attendeePercent + " % of attendees");
  129 + // tooltip.text(attendeePercent + " % of attendees");
130 130 // console.log(d3.selectAll("g.x.axis")._groups[0][0]);
131 131 // console.log(d3.selectAll("g.x.axis")._groups[0][0].getBoundingClientRect().x);
132 132 }
... ... @@ -135,11 +135,12 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
135 135 let vertical = d3.select(containerSelector)
136 136 .append("div")
137 137 .attr("class", "no-pointer-events")
  138 + .style("display", "none")
138 139 .style("position", "absolute")
139 140 .style("z-index", "19")
140 141 .style("width", "2px")
141 142 .style("height", (height) + "px")
142   - .style("top", (10 + margin.top) + "px")
  143 + .style("top", (margin.top) + "px")
143 144 .style("bottom", "30px")
144 145 .style("left", "0px")
145 146 .style("background", "#000");
... ... @@ -147,34 +148,37 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
147 148 let horizontal = d3.select(containerSelector)
148 149 .append("div")
149 150 .attr("class", "no-pointer-events")
  151 + .style("display", "none")
150 152 .style("position", "absolute")
151 153 .style("z-index", "19")
152 154 .style("width", (width) + "px")
153 155 .style("height", "2px")
154 156 .style("top", "0px")
155 157 .style("bottom", "30px")
156   - .style("left", (10 + margin.left) + "px")
  158 + .style("left", (margin.left) + "px")
157 159 .style("background", "#000");
158 160  
159   - let box = d3.select(containerSelector)
  161 + let tooltip = d3.select(containerSelector)
160 162 .append("div")
161 163 .attr("class", "no-pointer-events")
  164 + .style("display", "none")
162 165 .style("position", "absolute")
163 166 .style("z-index", "20")
164   - .style("width", "150px")
165   - .style("height", "44px")
  167 + .style("width", "230px")
  168 + .style("height", "60px")
166 169 .style("top", "10px")
167 170 .style("bottom", "30px")
168 171 .style("left", "0px")
  172 + .style("padding", "7px 10px")
169 173 .style("border", "1px solid grey")
170 174 .style("background", "rgba(255, 255, 255, 0.7)");
171 175  
172 176 d3.select(containerSelector)
173 177 .on("mousemove", function (event) {
174   - setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box);
  178 + setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip);
175 179 })
176 180 .on("mouseover", function (event) {
177   - setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box);
  181 + setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip);
178 182 });
179 183 }
180 184  
... ...