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

Commit 510157f897a5624ae7f843250efe576d098c2dd8

Authored by Antoine Goutenoir
1 parent c99525f9
Exists in master

chore: eslint

Showing 1 changed file with 41 additions and 45 deletions   Show diff stats
Inline Side-by-side
flaskr/static/js/plots/emissions-per-distance.js
  Diff comments   View file @510157f
... ... @@ -5,11 +5,9 @@ let margin = {top: 30, right: 62, bottom: 62, left: 72},
5 5  
6 6 let divId = "chart-container";
7 7  
8   -function getTicks(maxValue, interval, startValue=0)
9   -{
  8 +function getTicks(maxValue, interval, startValue = 0) {
10 9 let range = [];
11   - for (let i = startValue ; i <= maxValue ; i+=interval)
12   - {
  10 + for (let i = startValue; i <= maxValue; i += interval) {
13 11 range.push(i);
14 12 }
15 13 return range;
... ... @@ -22,20 +20,18 @@ function getBottomTicks(maxDistance) {
22 20 }
23 21  
24 22 function getLeftTicks(maxemissions) {
25   - return getTicks(maxemissions, Math.floor((maxemissions / 8) / 1000)* 1000) ;
  23 + return getTicks(maxemissions, Math.floor((maxemissions / 8) / 1000) * 1000);
26 24 }
27 25  
28 26 function getRightTicks(maxemissionsPercent) {
29 27 return getTicks(maxemissionsPercent, 2);
30 28 }
31 29  
32   -function getAttendeeOnRight(sliceId, attendeeNumberPerGroup)
33   -{
  30 +function getAttendeeOnRight(sliceId, attendeeNumberPerGroup) {
34 31 let attendeeSum = 0;
35 32 let sliceInt = Math.floor(sliceId);
36 33 let sliceFloat = sliceId - sliceInt;
37   - for(let i = sliceInt; i < attendeeNumberPerGroup.length; i++)
38   - {
  34 + for (let i = sliceInt; i < attendeeNumberPerGroup.length; i++) {
39 35 attendeeSum += attendeeNumberPerGroup[i] * (1 - sliceFloat);
40 36 sliceFloat = 0;
41 37 }
... ... @@ -43,30 +39,27 @@ function getAttendeeOnRight(sliceId, attendeeNumberPerGroup)
43 39  
44 40 }
45 41  
46   -function setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea)
47   -{
  42 +function setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea) {
48 43 // mousex = d3.mouse(this);
49 44 var x = d3.pointer(event)[0];
50 45 var y = d3.pointer(event)[1];
51 46 // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
52 47 // x += 5;
53   - vertical.style("left", x + "px" );
54   - rightArea.style("left", x + "px" );
  48 + vertical.style("left", x + "px");
  49 + rightArea.style("left", x + "px");
55 50 box.style("left", (x + 10) + "px");
56 51 box.style("top", (y - 20) + "px");
57   - let sliceId = xScale.invert(x - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right)/500;
  52 + let sliceId = xScale.invert(x - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right) / 500;
58 53 // let sliceId = xScale.invert(x * 1.025 - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().x- margin.left)/500 +1;
59 54 let attendeePercent = (getAttendeeOnRight(sliceId, attendeeNumberPerGroup) / attendeeSum * 100.0).toFixed(1);
60   - if(x > d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x ||
61   - x < d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right)
62   - {
  55 + if (x > d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x ||
  56 + x < d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right) {
63 57 rightArea.style("width", 0);
64 58 vertical.style("width", 0);
65 59 box.style("display", "none");
66 60 }
67   - else
68   - {
69   - rightArea.style("width", d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x - x );
  61 + else {
  62 + rightArea.style("width", d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x - x);
70 63 vertical.style("width", "2px");
71 64 box.style("display", "inherit");
72 65 }
... ... @@ -115,10 +108,10 @@ function addVerticalLineAndListenCursor(xScale, attendeeNumberPerGroup, attendee
115 108 .style("border", "1px solid grey")
116 109 .style("background", "rgba(255, 255, 255, 0.7)");
117 110 d3.select("#" + divId)
118   - .on("mousemove", function(event){
  111 + .on("mousemove", function (event) {
119 112 setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea);
120 113 })
121   - .on("mouseover", function(event){
  114 + .on("mouseover", function (event) {
122 115 setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea);
123 116  
124 117 });
... ... @@ -149,23 +142,20 @@ document.onreadystatechange = () =&gt; {
149 142 d3.csv("2020-09-30_04_21_19_87a1.csv", function (data) {
150 143 let trainAttendee = parseInt(data["train trips_amount"]);
151 144 let planeAttendee = parseInt(data["plane trips_amount"]);
152   - if(trainAttendee === 0 && planeAttendee === 0)
153   - {
  145 + if (trainAttendee === 0 && planeAttendee === 0) {
154 146 return;
155 147 }
156 148 let attendeeNumber = trainAttendee + planeAttendee;
157 149 let distance_km = data.distance_km / attendeeNumber;
158 150 let co2_kg = parseFloat(data.co2_kg);
159   - if (co2_kg === "NaN" || distance_km/500 > 37 || distance_km === "NaN")
160   - {
  151 + if (co2_kg === "NaN" || distance_km / 500 > 37 || distance_km === "NaN") {
161 152 return;
162 153 }
163 154 rows.push(data);
164 155 maxDistance = Math.max(maxDistance, distance_km);
165 156 emissionsSum += co2_kg;
166 157 }).then((() => {
167   - for (let i = 0; i <= maxDistance/500; i++)
168   - {
  158 + for (let i = 0; i <= maxDistance / 500; i++) {
169 159 emissionsPerGroup[i] = 0;
170 160 attendeeNumberPerGroup[i] = 0;
171 161 }
... ... @@ -175,8 +165,8 @@ document.onreadystatechange = () =&gt; {
175 165 let attendeeNumber = trainAttendee + planeAttendee;
176 166 let distance_km = element.distance_km / attendeeNumber;
177 167 let co2_kg = parseFloat(element.co2_kg);
178   - emissionsPerGroup[Math.floor(distance_km/500)] += parseFloat(co2_kg);
179   - attendeeNumberPerGroup[Math.floor(distance_km/500)] += attendeeNumber;
  168 + emissionsPerGroup[Math.floor(distance_km / 500)] += parseFloat(co2_kg);
  169 + attendeeNumberPerGroup[Math.floor(distance_km / 500)] += attendeeNumber;
180 170 attendeeSum += attendeeNumber;
181 171 });
182 172 emissionsPerGroup.forEach((element, index) => {
... ... @@ -189,7 +179,7 @@ document.onreadystatechange = () =&gt; {
189 179 //Title
190 180 svg.append("text")
191 181 .attr("transform",
192   - "translate(" + (70 + margin.left) + ", -12)")
  182 + "translate(" + (70 + margin.left) + ", -12)")
193 183 .style("text-anchor", "middle")
194 184 .style("font-weight", "bold")
195 185 .style("font-size", "130%")
... ... @@ -235,15 +225,15 @@ document.onreadystatechange = () =&gt; {
235 225  
236 226 svg.append("text")
237 227 .attr("transform",
238   - "translate(" + (width/2) + " ," +
  228 + "translate(" + (width / 2) + " ," +
239 229 (height + margin.top + 12) + ")")
240 230 .style("text-anchor", "middle")
241 231 .text("Distance travelled (km)");
242 232  
243 233 svg.append("text")
244 234 .attr("transform",
245   - "translate(" + (width) + ", 0), rotate(-90)")
246   - .attr("x",0 - (height / 2))
  235 + "translate(" + (width) + ", 0), rotate(-90)")
  236 + .attr("x", 0 - (height / 2))
247 237 .attr("y", 42)
248 238 .style("text-anchor", "middle")
249 239 .text("Share of emission [%]");
... ... @@ -251,25 +241,25 @@ document.onreadystatechange = () =&gt; {
251 241 svg.append("text")
252 242 .attr("transform", "rotate(-90)")
253 243 .attr("y", 0 - margin.left)
254   - .attr("x",0 - (height / 2))
  244 + .attr("x", 0 - (height / 2))
255 245 .attr("dy", "1em")
256 246 .style("text-anchor", "middle")
257 247 .text("Emission (tCO2e)");
258 248 // set the parameters for the histogram
259 249 var histogram = d3.histogram()
260 250 .domain(x.domain()) // then the domain of the graphic
261   - .thresholds(x.ticks(Math.floor(maxDistance/500))); // then the numbers of bins
  251 + .thresholds(x.ticks(Math.floor(maxDistance / 500))); // then the numbers of bins
262 252  
263 253 let histolol = histogram(0);
264 254 // console.log(histolol);
265 255 let barSettings = [];
266 256 emissionsPerGroup.forEach((element, index) => {
267   - barSettings[index]=
268   - {
269   - height : element,
270   - leftBorder : histolol[index].x0,
271   - rightBorder : histolol[index].x1,
272   - };
  257 + barSettings[index] =
  258 + {
  259 + height: element,
  260 + leftBorder: histolol[index].x0,
  261 + rightBorder: histolol[index].x1,
  262 + };
273 263 // console.log(index);
274 264 // console.log(barSettings[index]);
275 265 });
... ... @@ -278,9 +268,15 @@ document.onreadystatechange = () =&gt; {
278 268 .enter()
279 269 .append("rect")
280 270 .attr("x", 1)
281   - .attr("transform", function(d) { return "translate(" + x(d.leftBorder) + "," + yl(d.height) + ")"; })
282   - .attr("width", function(d) { return x(d.rightBorder) - x(d.leftBorder) -1 ; })
283   - .attr("height", function(d) { return (height-yl(d.height)); })
  271 + .attr("transform", function (d) {
  272 + return "translate(" + x(d.leftBorder) + "," + yl(d.height) + ")";
  273 + })
  274 + .attr("width", function (d) {
  275 + return x(d.rightBorder) - x(d.leftBorder) - 1;
  276 + })
  277 + .attr("height", function (d) {
  278 + return (height - yl(d.height));
  279 + })
284 280 .style("z-index", "500")
285 281 .style("fill", "#4444E5");
286 282 addVerticalLineAndListenCursor(x, attendeeNumberPerGroup, attendeeSum);
... ...