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

Commit 79eadc9f0e1ee1dc8384d3555250678ab8633c59

Authored by Antoine Goutenoir
1 parent 8daea46b
Exists in master

feat: polish

Showing 1 changed file with 15 additions and 12 deletions   Show diff stats
Inline Side-by-side
flaskr/static/js/plots/emissions-per-distance.js
  Diff comments   View file @79eadc9
1 1 function draw_emissions_per_distance(divSelector, csvUrl) {
2 2 // set the dimensions and margins of the graph
3   - let margin = {top: 42, right: 88, bottom: 62, left: 98},
  3 + let margin = {top: 48, right: 88, bottom: 68, left: 98},
4 4 width = 960 - margin.left - margin.right,
5 5 height = 540 - margin.top - margin.bottom;
6 6  
... ... @@ -51,6 +51,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
51 51  
52 52 vertical.style("left", x + "px");
53 53 rightArea.style("left", x + "px");
  54 + rightArea.style("width", (width+margin.left-x) + "px");
54 55 tooltip.style("left", (x + 10) + "px");
55 56 tooltip.style("top", (y - 20) + "px");
56 57  
... ... @@ -58,7 +59,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
58 59  
59 60 let sliceId = xScale.invert(x - margin.left) / sliceThickness;
60 61  
61   - console.log(`Slice ${sliceId} under the mouse.`);
  62 + // console.log(`Slice ${sliceId} under the mouse.`);
62 63  
63 64 // let sliceId = xScale.invert(x * 1.025 - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().x- margin.left)/500 +1;
64 65 let attendeePercent = (getAttendeesAmountOnRight(sliceId, attendeeNumberPerGroup) / attendeeSum * 100.0).toFixed(1);
... ... @@ -66,6 +67,10 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
66 67 x < margin.left
67 68 ||
68 69 x > width + margin.left
  70 + ||
  71 + y < margin.top
  72 + ||
  73 + y > height + margin.top
69 74 ) {
70 75 rightArea.style("width", 0);
71 76 vertical.style("width", 0);
... ... @@ -89,7 +94,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
89 94 .style("z-index", "19")
90 95 .style("width", "2px")
91 96 .style("height", (height) + "px")
92   - .style("top", (10 + margin.top) + "px")
  97 + .style("top", (margin.top) + "px")
93 98 .style("bottom", "30px")
94 99 .style("left", "-10px")
95 100 .style("background", "#000");
... ... @@ -100,9 +105,8 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
100 105 .style("position", "absolute")
101 106 .style("z-index", "-50")
102 107 .style("width", "0px")
103   - // .style("width", "2000px")
104 108 .style("height", (height) + "px")
105   - .style("top", (10 + margin.top) + "px")
  109 + .style("top", (margin.top) + "px")
106 110 .style("bottom", "30px")
107 111 .style("left", "0px")
108 112 .style("background", "rgba(60, 200, 60, 0.3)");
... ... @@ -192,8 +196,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
192 196 // Title
193 197 svg.append("text")
194 198 .attr("transform",
195   - "translate(" + (70 + margin.left) + ", -12)")
196   - .style("text-anchor", "middle")
  199 + "translate(" + (0) + ", -18)")
197 200 .style("font-weight", "bold")
198 201 .style("font-size", "130%")
199 202 .text("Emissions per distance");
... ... @@ -239,7 +242,7 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
239 242 svg.append("text")
240 243 .attr("transform",
241 244 "translate(" + (width / 2) + " ," +
242   - (height + margin.top + 12) + ")")
  245 + (height + margin.top + 2) + ")")
243 246 .style("text-anchor", "middle")
244 247 .text("Distance travelled (km)");
245 248  
... ... @@ -247,17 +250,17 @@ function draw_emissions_per_distance(divSelector, csvUrl) {
247 250 .attr("transform",
248 251 "translate(" + (width) + ", 0), rotate(-90)")
249 252 .attr("x", 0 - (height / 2))
250   - .attr("y", 42)
  253 + .attr("y", 13 + margin.right / 2.0)
251 254 .style("text-anchor", "middle")
252   - .text("Share of emission [%]");
  255 + .text("Share of emission (%)");
253 256  
254 257 svg.append("text")
255 258 .attr("transform", "rotate(-90)")
256   - .attr("y", 0 - margin.left)
  259 + .attr("y", 0 - (5 * margin.left / 6.0))
257 260 .attr("x", 0 - (height / 2))
258 261 .attr("dy", "1em")
259 262 .style("text-anchor", "middle")
260   - .text("Emission (tCO2e)");
  263 + .text("Emission (kgCO2e)");
261 264 // set the parameters for the histogram
262 265 const histogram = d3.histogram()
263 266 .domain(x.domain()) // then the domain of the graphic
... ...