Commit 955be6d002853ca9b704a33bb1854ca1e001e2f9
1 parent
70d40a43
Exists in
master
fix: infinite loop
Co-authored by: @Adrenesis
Showing
1 changed file
with
53 additions
and
8 deletions
Show diff stats
flaskr/static/js/plots/emissions-per-distance.js
@@ -8,10 +8,20 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -8,10 +8,20 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
8 | 8 | ||
9 | 9 | ||
10 | function getTicks(maxValue, interval, startValue = 0) { | 10 | function getTicks(maxValue, interval, startValue = 0) { |
11 | + // console.log("getTicks", maxValue, interval, startValue); | ||
12 | + if (0 === interval) { | ||
13 | + console.error("No interval for ticks."); | ||
14 | + return [0]; | ||
15 | + } | ||
16 | + if (Math.sign(maxValue-startValue) !== Math.sign(interval)) { | ||
17 | + console.warn("Wrong interval sign for ticks. Corrected."); | ||
18 | + interval *= -1; | ||
19 | + } | ||
11 | let range = []; | 20 | let range = []; |
12 | for (let i = startValue; i <= maxValue; i += interval) { | 21 | for (let i = startValue; i <= maxValue; i += interval) { |
13 | range.push(i); | 22 | range.push(i); |
14 | } | 23 | } |
24 | + // console.log("range", range); | ||
15 | return range; | 25 | return range; |
16 | } | 26 | } |
17 | 27 | ||
@@ -21,8 +31,30 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -21,8 +31,30 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
21 | return range; | 31 | return range; |
22 | } | 32 | } |
23 | 33 | ||
24 | - function getLeftTicks(maxemissions) { | ||
25 | - return getTicks(maxemissions, Math.floor((maxemissions / 8) / 1000) * 1000); | 34 | + function getLeftTicks(maximumValue) { |
35 | + maximumValue = 3200+1; | ||
36 | + if (0 > maximumValue) { | ||
37 | + console.error("Only positive values are supported on left axis."); | ||
38 | + } | ||
39 | + if (0 === maximumValue) { | ||
40 | + return [0]; | ||
41 | + } | ||
42 | + let ticksAmount = 8.0; // MUST BE > 2 | ||
43 | + let magnitude = 100000.0; | ||
44 | + let interval = 0; | ||
45 | + while (interval * (ticksAmount) < maximumValue) { | ||
46 | + interval = ( | ||
47 | + Math.floor( | ||
48 | + (maximumValue / (ticksAmount-1)) / magnitude | ||
49 | + ) | ||
50 | + * | ||
51 | + magnitude | ||
52 | + ); | ||
53 | + //console.log("interval + magnitude", interval, magnitude); | ||
54 | + magnitude *= 0.1; | ||
55 | + } | ||
56 | + | ||
57 | + return getTicks(maximumValue, interval); | ||
26 | } | 58 | } |
27 | 59 | ||
28 | function getRightTicks(maxemissionsPercent) { | 60 | function getRightTicks(maxemissionsPercent) { |
@@ -134,6 +166,7 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -134,6 +166,7 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
134 | } | 166 | } |
135 | 167 | ||
136 | document.addEventListener("DOMContentLoaded", () => { | 168 | document.addEventListener("DOMContentLoaded", () => { |
169 | + console.info("[Emissions Per Distance] Starting…"); | ||
137 | width = Math.max(880, $(containerSelector).parent().width()); | 170 | width = Math.max(880, $(containerSelector).parent().width()); |
138 | width = width - margin.left - margin.right; | 171 | width = width - margin.left - margin.right; |
139 | let maxemissions = 0; | 172 | let maxemissions = 0; |
@@ -163,7 +196,13 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -163,7 +196,13 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
163 | let attendeeNumber = trainAttendee + planeAttendee; | 196 | let attendeeNumber = trainAttendee + planeAttendee; |
164 | let distance_km = datum.distance_km / attendeeNumber; | 197 | let distance_km = datum.distance_km / attendeeNumber; |
165 | let co2_kg = parseFloat(datum.co2_kg); | 198 | let co2_kg = parseFloat(datum.co2_kg); |
166 | - if (co2_kg === "NaN" || distance_km / sliceThickness > 37 || distance_km === "NaN") { | 199 | + if ( |
200 | + (co2_kg === "NaN") | ||
201 | + || | ||
202 | + (distance_km === "NaN") | ||
203 | + || | ||
204 | + (distance_km / sliceThickness > 37) | ||
205 | + ) { | ||
167 | return; | 206 | return; |
168 | } | 207 | } |
169 | rows.push(datum); | 208 | rows.push(datum); |
@@ -173,6 +212,7 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -173,6 +212,7 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
173 | }; | 212 | }; |
174 | 213 | ||
175 | const on_csv_ready = function () { | 214 | const on_csv_ready = function () { |
215 | + console.info("[Emissions Per Distance] Generating…"); | ||
176 | for (let i = 0; i <= maxDistance / sliceThickness; i++) { | 216 | for (let i = 0; i <= maxDistance / sliceThickness; i++) { |
177 | emissionsPerGroup[i] = 0; | 217 | emissionsPerGroup[i] = 0; |
178 | attendeeNumberPerGroup[i] = 0; | 218 | attendeeNumberPerGroup[i] = 0; |
@@ -192,7 +232,6 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -192,7 +232,6 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
192 | maxemissionsPercent = Math.max(maxemissionsPercent, element / emissionsSum * 100.0) | 232 | maxemissionsPercent = Math.max(maxemissionsPercent, element / emissionsSum * 100.0) |
193 | }); | 233 | }); |
194 | maxDistance += 2000; | 234 | maxDistance += 2000; |
195 | - // console.log(maxDistance); | ||
196 | 235 | ||
197 | // Title | 236 | // Title |
198 | svg.append("text") | 237 | svg.append("text") |
@@ -207,7 +246,9 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -207,7 +246,9 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
207 | .domain([0, maxDistance]) | 246 | .domain([0, maxDistance]) |
208 | .range([0, width]); | 247 | .range([0, width]); |
209 | let xAxis = d3.axisBottom(x) | 248 | let xAxis = d3.axisBottom(x) |
210 | - .tickValues(getBottomTicks(maxDistance)); | 249 | + .ticks(11) |
250 | + // .tickValues(getBottomTicks(maxDistance)) | ||
251 | + ; | ||
211 | svg.append("g") | 252 | svg.append("g") |
212 | .attr("transform", "translate(0," + height + ")") | 253 | .attr("transform", "translate(0," + height + ")") |
213 | .attr("class", "x axis") | 254 | .attr("class", "x axis") |
@@ -224,7 +265,9 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -224,7 +265,9 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
224 | .domain([0, maxemissions]) | 265 | .domain([0, maxemissions]) |
225 | .range([height, 0]); | 266 | .range([height, 0]); |
226 | let ylAxis = d3.axisLeft(yl) | 267 | let ylAxis = d3.axisLeft(yl) |
227 | - .tickValues(getLeftTicks(maxemissions)); | 268 | + .ticks(13) |
269 | + // .tickValues(getLeftTicks(maxemissions)) | ||
270 | + ; | ||
228 | svg.append("g") | 271 | svg.append("g") |
229 | .attr("class", "yl axis") | 272 | .attr("class", "yl axis") |
230 | .call(ylAxis); | 273 | .call(ylAxis); |
@@ -234,7 +277,9 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -234,7 +277,9 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
234 | .domain([0, maxemissionsPercent]) | 277 | .domain([0, maxemissionsPercent]) |
235 | .range([height, 0]); | 278 | .range([height, 0]); |
236 | let yrAxis = d3.axisRight(yr) | 279 | let yrAxis = d3.axisRight(yr) |
237 | - .tickValues(getRightTicks(maxemissionsPercent)); | 280 | + .ticks(20) |
281 | + // .tickValues(getRightTicks(maxemissionsPercent)) | ||
282 | + ; | ||
238 | svg.append("g") | 283 | svg.append("g") |
239 | .attr("transform", "translate(" + width + ", 0)") | 284 | .attr("transform", "translate(" + width + ", 0)") |
240 | .attr("class", "yr axis") | 285 | .attr("class", "yr axis") |
@@ -268,7 +313,6 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -268,7 +313,6 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
268 | .thresholds(x.ticks(Math.floor(maxDistance / sliceThickness))); // then the numbers of bins | 313 | .thresholds(x.ticks(Math.floor(maxDistance / sliceThickness))); // then the numbers of bins |
269 | 314 | ||
270 | let histolol = histogram(0); | 315 | let histolol = histogram(0); |
271 | - // console.log(histolol); | ||
272 | let barSettings = []; | 316 | let barSettings = []; |
273 | emissionsPerGroup.forEach((element, index) => { | 317 | emissionsPerGroup.forEach((element, index) => { |
274 | barSettings[index] = { | 318 | barSettings[index] = { |
@@ -306,6 +350,7 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | @@ -306,6 +350,7 @@ function draw_emissions_per_distance(containerSelector, csvUrl) { | ||
306 | .style("z-index", "500") | 350 | .style("z-index", "500") |
307 | .style("fill", "#4444E5"); | 351 | .style("fill", "#4444E5"); |
308 | addVerticalLineAndListenCursor(x, attendeeNumberPerGroup, attendeeSum); | 352 | addVerticalLineAndListenCursor(x, attendeeNumberPerGroup, attendeeSum); |
353 | + console.info("[Emissions Per Distance] Done."); | ||
309 | }; | 354 | }; |
310 | 355 | ||
311 | d3.csv(csvUrl, on_csv_datum) | 356 | d3.csv(csvUrl, on_csv_datum) |