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

Commit e86f2462431a8d66b7edabba94b61fb5f6ee0dc7

Authored by Antoine Goutenoir
1 parent 79eadc9f
Exists in master

design: refactor thickness and tooltip margins

Showing 1 changed file with 20 additions and 22 deletions   Show diff stats
Inline Side-by-side
flaskr/static/js/plots/emissions-per-distance.js
  Diff comments   View file @e86f246
... ... @@ -17,7 +17,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
17 17  
18 18 function getBottomTicks(maxDistance) {
19 19 let range = getTicks(maxDistance, 2500, 2500);
20   - range.push(500);
  20 + range.push(sliceThickness);
21 21 return range;
22 22 }
23 23  
... ... @@ -45,8 +45,6 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
45 45 const x = d3.pointer(event)[0];
46 46 const y = d3.pointer(event)[1];
47 47 // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
48   - // x += 5;
49   -
50 48 // console.log("Mouse move", x, y);
51 49  
52 50 vertical.style("left", x + "px");
... ... @@ -55,10 +53,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
55 53 tooltip.style("left", (x + 10) + "px");
56 54 tooltip.style("top", (y - 20) + "px");
57 55  
58   - // let sliceId = xScale.invert(x - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().right) / 500;
59   -
60 56 let sliceId = xScale.invert(x - margin.left) / sliceThickness;
61   -
62 57 // console.log(`Slice ${sliceId} under the mouse.`);
63 58  
64 59 // let sliceId = xScale.invert(x * 1.025 - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().x- margin.left)/500 +1;
... ... @@ -72,24 +67,22 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
72 67 ||
73 68 y > height + margin.top
74 69 ) {
75   - rightArea.style("width", 0);
76   - vertical.style("width", 0);
  70 + rightArea.style("display", "none");
  71 + vertical.style("display", "none");
77 72 tooltip.style("display", "none");
78   - }
79   - else {
80   - rightArea.style("width", d3.selectAll("g.yr.axis")._groups[0][0].getBoundingClientRect().x - x);
81   - vertical.style("width", "2px");
  73 + } else {
  74 + rightArea.style("display", "inherit");
  75 + vertical.style("display", "inherit");
82 76 tooltip.style("display", "inherit");
83 77 }
84 78 tooltip.text(attendeePercent + " % of attendees");
85   - // console.log(d3.selectAll("g.x.axis")._groups[0][0]);
86   - // console.log(d3.selectAll("g.x.axis")._groups[0][0].getBoundingClientRect().x);
87 79 }
88 80  
89 81 function addVerticalLineAndListenCursor(xScale, attendeeNumberPerGroup, attendeeSum) {
90 82 let verticalRuler = d3.select(divSelector)
91 83 .append("div")
92 84 // .attr("class", "remove")
  85 + .style("display", "none")
93 86 .style("position", "absolute")
94 87 .style("z-index", "19")
95 88 .style("width", "2px")
... ... @@ -102,6 +95,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
102 95 let rightArea = d3.select(divSelector)
103 96 .append("div")
104 97 // .attr("class", "remove")
  98 + .style("display", "none")
105 99 .style("position", "absolute")
106 100 .style("z-index", "-50")
107 101 .style("width", "0px")
... ... @@ -117,11 +111,15 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
117 111 .style("display", "none")
118 112 .style("position", "absolute")
119 113 .style("z-index", "20")
120   - .style("width", "150px")
121   - .style("height", "22px")
  114 + .style("width", "155px")
  115 + .style("height", "35px")
122 116 .style("top", "10px")
123 117 .style("bottom", "30px")
124 118 .style("left", "0px")
  119 + .style("padding-left", "10px")
  120 + .style("padding-right", "0px")
  121 + .style("padding-top", "6px")
  122 + .style("padding-bottom", "6px")
125 123 .style("border", "1px solid grey")
126 124 .style("background", "rgba(255, 255, 255, 0.7)");
127 125  
... ... @@ -162,7 +160,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
162 160 let attendeeNumber = trainAttendee + planeAttendee;
163 161 let distance_km = datum.distance_km / attendeeNumber;
164 162 let co2_kg = parseFloat(datum.co2_kg);
165   - if (co2_kg === "NaN" || distance_km / 500 > 37 || distance_km === "NaN") {
  163 + if (co2_kg === "NaN" || distance_km / sliceThickness > 37 || distance_km === "NaN") {
166 164 return;
167 165 }
168 166 rows.push(datum);
... ... @@ -172,7 +170,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
172 170 };
173 171  
174 172 const on_csv_ready = function () {
175   - for (let i = 0; i <= maxDistance / 500; i++) {
  173 + for (let i = 0; i <= maxDistance / sliceThickness; i++) {
176 174 emissionsPerGroup[i] = 0;
177 175 attendeeNumberPerGroup[i] = 0;
178 176 }
... ... @@ -182,8 +180,8 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
182 180 let attendeeNumber = trainAttendee + planeAttendee;
183 181 let distance_km = element.distance_km / attendeeNumber;
184 182 let co2_kg = parseFloat(element.co2_kg);
185   - emissionsPerGroup[Math.floor(distance_km / 500)] += parseFloat(co2_kg);
186   - attendeeNumberPerGroup[Math.floor(distance_km / 500)] += attendeeNumber;
  183 + emissionsPerGroup[Math.floor(distance_km / sliceThickness)] += parseFloat(co2_kg);
  184 + attendeeNumberPerGroup[Math.floor(distance_km / sliceThickness)] += attendeeNumber;
187 185 attendeeSum += attendeeNumber;
188 186 });
189 187 emissionsPerGroup.forEach((element, index) => {
... ... @@ -196,7 +194,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
196 194 // Title
197 195 svg.append("text")
198 196 .attr("transform",
199   - "translate(" + (0) + ", -18)")
  197 + "translate(" + (0) + ", "+ (-18) +")")
200 198 .style("font-weight", "bold")
201 199 .style("font-size", "130%")
202 200 .text("Emissions per distance");
... ... @@ -264,7 +262,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
264 262 // set the parameters for the histogram
265 263 const histogram = d3.histogram()
266 264 .domain(x.domain()) // then the domain of the graphic
267   - .thresholds(x.ticks(Math.floor(maxDistance / 500))); // then the numbers of bins
  265 + .thresholds(x.ticks(Math.floor(maxDistance / sliceThickness))); // then the numbers of bins
268 266  
269 267 let histolol = histogram(0);
270 268 // console.log(histolol);
... ...