diff --git a/flaskr/static/js/plots/emissions-per-distance.js b/flaskr/static/js/plots/emissions-per-distance.js index 14fcc49..186e28c 100644 --- a/flaskr/static/js/plots/emissions-per-distance.js +++ b/flaskr/static/js/plots/emissions-per-distance.js @@ -5,11 +5,9 @@ let margin = {top: 30, right: 62, bottom: 62, left: 72}, let divId = "chart-container"; -function getTicks(maxValue, interval, startValue=0) -{ +function getTicks(maxValue, interval, startValue = 0) { let range = []; - for (let i = startValue ; i <= maxValue ; i+=interval) - { + for (let i = startValue; i <= maxValue; i += interval) { range.push(i); } return range; @@ -22,20 +20,18 @@ function getBottomTicks(maxDistance) { } function getLeftTicks(maxemissions) { - return getTicks(maxemissions, Math.floor((maxemissions / 8) / 1000)* 1000) ; + return getTicks(maxemissions, Math.floor((maxemissions / 8) / 1000) * 1000); } function getRightTicks(maxemissionsPercent) { return getTicks(maxemissionsPercent, 2); } -function getAttendeeOnRight(sliceId, attendeeNumberPerGroup) -{ +function getAttendeeOnRight(sliceId, attendeeNumberPerGroup) { let attendeeSum = 0; let sliceInt = Math.floor(sliceId); let sliceFloat = sliceId - sliceInt; - for(let i = sliceInt; i < attendeeNumberPerGroup.length; i++) - { + for (let i = sliceInt; i < attendeeNumberPerGroup.length; i++) { attendeeSum += attendeeNumberPerGroup[i] * (1 - sliceFloat); sliceFloat = 0; } @@ -43,30 +39,27 @@ function getAttendeeOnRight(sliceId, attendeeNumberPerGroup) } -function setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea) -{ +function setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea) { // mousex = d3.mouse(this); var x = d3.pointer(event)[0]; var y = d3.pointer(event)[1]; // var y = d3.event.pageY - document.getElementById().getBoundingClientRect().y + 10 // x += 5; - vertical.style("left", x + "px" ); - rightArea.style("left", x + "px" ); + vertical.style("left", x + "px"); + rightArea.style("left", x + "px"); box.style("left", (x + 10) + "px"); box.style("top", (y - 20) + "px"); - let sliceId = xScale.invert(x - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right)/500; + let sliceId = xScale.invert(x - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right) / 500; // let sliceId = xScale.invert(x * 1.025 - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().x- margin.left)/500 +1; let attendeePercent = (getAttendeeOnRight(sliceId, attendeeNumberPerGroup) / attendeeSum * 100.0).toFixed(1); - if(x > d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x || - x < d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right) - { + if (x > d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x || + x < d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right) { rightArea.style("width", 0); vertical.style("width", 0); box.style("display", "none"); } - else - { - rightArea.style("width", d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x - x ); + else { + rightArea.style("width", d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x - x); vertical.style("width", "2px"); box.style("display", "inherit"); } @@ -115,10 +108,10 @@ function addVerticalLineAndListenCursor(xScale, attendeeNumberPerGroup, attendee .style("border", "1px solid grey") .style("background", "rgba(255, 255, 255, 0.7)"); d3.select("#" + divId) - .on("mousemove", function(event){ + .on("mousemove", function (event) { setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea); }) - .on("mouseover", function(event){ + .on("mouseover", function (event) { setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea); }); @@ -149,23 +142,20 @@ document.onreadystatechange = () => { d3.csv("2020-09-30_04_21_19_87a1.csv", function (data) { let trainAttendee = parseInt(data["train trips_amount"]); let planeAttendee = parseInt(data["plane trips_amount"]); - if(trainAttendee === 0 && planeAttendee === 0) - { + if (trainAttendee === 0 && planeAttendee === 0) { return; } let attendeeNumber = trainAttendee + planeAttendee; let distance_km = data.distance_km / attendeeNumber; let co2_kg = parseFloat(data.co2_kg); - if (co2_kg === "NaN" || distance_km/500 > 37 || distance_km === "NaN") - { + if (co2_kg === "NaN" || distance_km / 500 > 37 || distance_km === "NaN") { return; } rows.push(data); maxDistance = Math.max(maxDistance, distance_km); emissionsSum += co2_kg; }).then((() => { - for (let i = 0; i <= maxDistance/500; i++) - { + for (let i = 0; i <= maxDistance / 500; i++) { emissionsPerGroup[i] = 0; attendeeNumberPerGroup[i] = 0; } @@ -175,8 +165,8 @@ document.onreadystatechange = () => { let attendeeNumber = trainAttendee + planeAttendee; let distance_km = element.distance_km / attendeeNumber; let co2_kg = parseFloat(element.co2_kg); - emissionsPerGroup[Math.floor(distance_km/500)] += parseFloat(co2_kg); - attendeeNumberPerGroup[Math.floor(distance_km/500)] += attendeeNumber; + emissionsPerGroup[Math.floor(distance_km / 500)] += parseFloat(co2_kg); + attendeeNumberPerGroup[Math.floor(distance_km / 500)] += attendeeNumber; attendeeSum += attendeeNumber; }); emissionsPerGroup.forEach((element, index) => { @@ -189,7 +179,7 @@ document.onreadystatechange = () => { //Title svg.append("text") .attr("transform", - "translate(" + (70 + margin.left) + ", -12)") + "translate(" + (70 + margin.left) + ", -12)") .style("text-anchor", "middle") .style("font-weight", "bold") .style("font-size", "130%") @@ -235,15 +225,15 @@ document.onreadystatechange = () => { svg.append("text") .attr("transform", - "translate(" + (width/2) + " ," + + "translate(" + (width / 2) + " ," + (height + margin.top + 12) + ")") .style("text-anchor", "middle") .text("Distance travelled (km)"); svg.append("text") .attr("transform", - "translate(" + (width) + ", 0), rotate(-90)") - .attr("x",0 - (height / 2)) + "translate(" + (width) + ", 0), rotate(-90)") + .attr("x", 0 - (height / 2)) .attr("y", 42) .style("text-anchor", "middle") .text("Share of emission [%]"); @@ -251,25 +241,25 @@ document.onreadystatechange = () => { svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - margin.left) - .attr("x",0 - (height / 2)) + .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Emission (tCO2e)"); // set the parameters for the histogram var histogram = d3.histogram() .domain(x.domain()) // then the domain of the graphic - .thresholds(x.ticks(Math.floor(maxDistance/500))); // then the numbers of bins + .thresholds(x.ticks(Math.floor(maxDistance / 500))); // then the numbers of bins let histolol = histogram(0); // console.log(histolol); let barSettings = []; emissionsPerGroup.forEach((element, index) => { - barSettings[index]= - { - height : element, - leftBorder : histolol[index].x0, - rightBorder : histolol[index].x1, - }; + barSettings[index] = + { + height: element, + leftBorder: histolol[index].x0, + rightBorder: histolol[index].x1, + }; // console.log(index); // console.log(barSettings[index]); }); @@ -278,9 +268,15 @@ document.onreadystatechange = () => { .enter() .append("rect") .attr("x", 1) - .attr("transform", function(d) { return "translate(" + x(d.leftBorder) + "," + yl(d.height) + ")"; }) - .attr("width", function(d) { return x(d.rightBorder) - x(d.leftBorder) -1 ; }) - .attr("height", function(d) { return (height-yl(d.height)); }) + .attr("transform", function (d) { + return "translate(" + x(d.leftBorder) + "," + yl(d.height) + ")"; + }) + .attr("width", function (d) { + return x(d.rightBorder) - x(d.leftBorder) - 1; + }) + .attr("height", function (d) { + return (height - yl(d.height)); + }) .style("z-index", "500") .style("fill", "#4444E5"); addVerticalLineAndListenCursor(x, attendeeNumberPerGroup, attendeeSum); -- libgit2 0.21.2