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

Commit 2ee2acee1a876d02b0d164f779f85674840b6ca6

Authored by Antoine Goutenoir
1 parent 701dbf83
Exists in master

feat: continue with emission inequality plot

Showing 1 changed file with 218 additions and 224 deletions   Show diff stats
Inline Side-by-side
flaskr/static/js/plots/sorted-carbon-emissions.js renamed to flaskr/static/js/plots/sorted_emissions_inequality.js
  Diff comments   View file @2ee2ace
1 -// set the dimensions and margins of the graph  
2 -let margin = {top: 30, right: 10, bottom: 62, left: 72},  
3 - width = 600 - margin.left - margin.right,  
4 - height = 700 - margin.top - margin.bottom;  
5 -  
6 -function getTicks(maxValue, interval, startValue=0)  
7 -{  
8 - let range = [];  
9 - for (let i = startValue ; i <= maxValue ; i+=interval)  
10 - {  
11 - range.push(i); 1 +function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
  2 +
  3 + // set the dimensions and margins of the graph
  4 + let margin = {top: 30, right: 10, bottom: 62, left: 72},
  5 + width = 600 - margin.left - margin.right,
  6 + height = 700 - margin.top - margin.bottom;
  7 +
  8 + function getTicks(maxValue, interval, startValue = 0) {
  9 + let range = [];
  10 + for (let i = startValue; i <= maxValue; i += interval) {
  11 + range.push(i);
  12 + }
  13 + return range;
12 } 14 }
13 - return range;  
14 -}  
15 -  
16 -function getBottomTicks(maxAttendeePercent) {  
17 - return getTicks(maxAttendeePercent, 20);  
18 -}  
19 -  
20 -function getLeftTicks(maxemissionsPercent) {  
21 - return getTicks(maxemissionsPercent, 20);  
22 -}  
23 -  
24 -function getSliceCollision(x, y, barSettings)  
25 -{  
26 - let result = false;  
27 - barSettings.forEach((element, index) => {  
28 - if(x < element.rightBorder && x > element.leftBorder)  
29 - {  
30 - let binYDiff = element.topBorder - element.bottomBorder;  
31 - let binXDiff = element.rightBorder - element.leftBorder;  
32 - let binDiagonalAngle = Math.atan2(binYDiff , binXDiff);  
33 - // let binYCenter = (element.topBorder + element.bottomBorder)/2;  
34 - // let binXCenter = (element.rightBorder + element.leftBorder)/2;  
35 - let mouseXDiff = element.rightBorder - x;  
36 - let mouseYDiff = element.topBorder - y;  
37 - let mouseToCenterAngle = Math.atan2(mouseYDiff , mouseXDiff);  
38 - // console.log(binDiagonalAngle);  
39 - // console.log(mouseToCenterAngle);  
40 -  
41 - if (mouseToCenterAngle < binDiagonalAngle )  
42 - {  
43 - barSettings.forEach((element, index) => {  
44 - if(y < element.topBorder && y > element.bottomBorder)  
45 - {  
46 - let lb = barSettings[index].leftBorder;  
47 - let rb = barSettings[index].rightBorder;  
48 - let tb = barSettings[index].topBorder;  
49 - let bb = barSettings[index].bottomBorder;  
50 - let binCollisionRatio = (y - bb) / (tb - bb);  
51 - let otherAxisLevel = (rb - lb) * binCollisionRatio + lb;  
52 - result = {  
53 - binDiagonalAngle : binDiagonalAngle,  
54 - isXDriving: false,  
55 - binIndex: index,  
56 - otherAxisLevel: otherAxisLevel  
57 - };  
58 -  
59 - }  
60 - }); 15 +
  16 + function getBottomTicks(maxAttendeePercent) {
  17 + return getTicks(maxAttendeePercent, 20);
  18 + }
  19 +
  20 + function getLeftTicks(maxemissionsPercent) {
  21 + return getTicks(maxemissionsPercent, 20);
  22 + }
  23 +
  24 + function getSliceCollision(x, y, barSettings) {
  25 + let result = false;
  26 + barSettings.forEach((element, index) => {
  27 + if (x < element.rightBorder && x > element.leftBorder) {
  28 + let binYDiff = element.topBorder - element.bottomBorder;
  29 + let binXDiff = element.rightBorder - element.leftBorder;
  30 + let binDiagonalAngle = Math.atan2(binYDiff, binXDiff);
  31 + // let binYCenter = (element.topBorder + element.bottomBorder)/2;
  32 + // let binXCenter = (element.rightBorder + element.leftBorder)/2;
  33 + let mouseXDiff = element.rightBorder - x;
  34 + let mouseYDiff = element.topBorder - y;
  35 + let mouseToCenterAngle = Math.atan2(mouseYDiff, mouseXDiff);
  36 + // console.log(binDiagonalAngle);
  37 + // console.log(mouseToCenterAngle);
  38 +
  39 + if (mouseToCenterAngle < binDiagonalAngle) {
  40 + barSettings.forEach((element, index) => {
  41 + if (y < element.topBorder && y > element.bottomBorder) {
  42 + let lb = barSettings[index].leftBorder;
  43 + let rb = barSettings[index].rightBorder;
  44 + let tb = barSettings[index].topBorder;
  45 + let bb = barSettings[index].bottomBorder;
  46 + let binCollisionRatio = (y - bb) / (tb - bb);
  47 + let otherAxisLevel = (rb - lb) * binCollisionRatio + lb;
  48 + result = {
  49 + binDiagonalAngle: binDiagonalAngle,
  50 + isXDriving: false,
  51 + binIndex: index,
  52 + otherAxisLevel: otherAxisLevel
  53 + };
  54 +
  55 + }
  56 + });
61 57
62 58
63 - }  
64 - else  
65 - {  
66 - let lb = barSettings[index].leftBorder;  
67 - let rb = barSettings[index].rightBorder;  
68 - let tb = barSettings[index].topBorder;  
69 - let bb = barSettings[index].bottomBorder;  
70 - let binCollisionRatio = (x - lb) / (rb - lb);  
71 - let otherAxisLevel = (tb - bb) * binCollisionRatio + bb;  
72 - // console.log(otherAxisLevel);  
73 - result = {  
74 - binDiagonalAngle : binDiagonalAngle,  
75 - isXDriving: true,  
76 - binIndex: index,  
77 - otherAxisLevel: otherAxisLevel 59 + }
  60 + else {
  61 + let lb = barSettings[index].leftBorder;
  62 + let rb = barSettings[index].rightBorder;
  63 + let tb = barSettings[index].topBorder;
  64 + let bb = barSettings[index].bottomBorder;
  65 + let binCollisionRatio = (x - lb) / (rb - lb);
  66 + let otherAxisLevel = (tb - bb) * binCollisionRatio + bb;
  67 + // console.log(otherAxisLevel);
  68 + result = {
  69 + binDiagonalAngle: binDiagonalAngle,
  70 + isXDriving: true,
  71 + binIndex: index,
  72 + otherAxisLevel: otherAxisLevel
  73 + }
78 } 74 }
79 } 75 }
80 - }  
81 - });  
82 - return result;  
83 -  
84 -}  
85 -  
86 -function setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box)  
87 -{  
88 - // mousex = d3.mouse(this);  
89 - var x = d3.pointer(event)[0];  
90 - var y = d3.pointer(event)[1];  
91 - // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10  
92 - // x += 5;  
93 - box.style("left", (x + 10) + "px");  
94 - box.style("top", (y - 20) + "px");  
95 - let xInGraph = xScale.invert(x - d3.selectAll("g.y.axis")._groups[0][0].getBoundingClientRect().right);  
96 - let yInGraph = yScale.invert(y - margin.top );  
97 -  
98 -  
99 -  
100 - // let sliceId = xScale.invert(x * 1.025 - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().x- margin.left)/500 +1;  
101 - // let attendeePercent = (getAttendeeOnRight(sliceId, attendeeNumberPerGroup) / attendeeSum * 100.0).toFixed(1);  
102 - if(x > width + d3.selectAll("g.y.axis")._groups[0][0].getBoundingClientRect().right ||  
103 - x < d3.selectAll("g.y.axis")._groups[0][0].getBoundingClientRect().right ||  
104 - y < margin.top +5 ||  
105 - y > d3.selectAll("g.x.axis")._groups[0][0].getBoundingClientRect().top)  
106 - {  
107 - vertical.style("width", 0);  
108 - horizontal.style("height", 0);  
109 - box.style("display", "none"); 76 + });
  77 + return result;
  78 +
110 } 79 }
111 - else  
112 - {  
113 - vertical.style("width", "2px");  
114 - horizontal.style("height", "2px");  
115 - box.style("display", "inherit");  
116 - let sliceCollision = getSliceCollision(xInGraph, yInGraph, barSettings);  
117 - // console.log(sliceCollision);  
118 - if(sliceCollision)  
119 - {  
120 - if(sliceCollision.isXDriving)  
121 - {  
122 -  
123 - vertical.style("left", x + "px" );  
124 - horizontal.style("top", yScale(sliceCollision.otherAxisLevel) + margin.top + "px");  
125 -  
126 - box.text(xInGraph + " " + sliceCollision.otherAxisLevel);  
127 - }  
128 - else  
129 - {  
130 - horizontal.style("top", y + "px");  
131 - vertical.style("left", xScale(sliceCollision.otherAxisLevel) + d3.selectAll("g.y.axis")._groups[0][0].getBoundingClientRect().right + "px" );  
132 80
133 - box.text(sliceCollision.otherAxisLevel + " " + yInGraph);  
134 - } 81 + function setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box) {
  82 + // mousex = d3.mouse(this);
  83 + const x = d3.pointer(event)[0];
  84 + const y = d3.pointer(event)[1];
  85 + // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
  86 + // x += 5;
  87 + box.style("left", (x + 10) + "px");
  88 + box.style("top", (y - 20) + "px");
  89 + let xInGraph = xScale.invert(x - margin.left);
  90 + let yInGraph = yScale.invert(y - margin.top);
  91 +
  92 +
  93 + // let sliceId = xScale.invert(x * 1.025 - d3.selectAll("g.yl.axis")._groups[0][0].getBoundingClientRect().x- margin.left)/500 +1;
  94 + // let attendeePercent = (getAttendeeOnRight(sliceId, attendeeNumberPerGroup) / attendeeSum * 100.0).toFixed(1);
  95 + if (
  96 + x < margin.left
  97 + ||
  98 + x > width + margin.left
  99 + ||
  100 + y < margin.top
  101 + ||
  102 + y > height + margin.top
  103 + ) {
  104 + vertical.style("width", 0);
  105 + horizontal.style("height", 0);
  106 + box.style("display", "none");
135 } 107 }
  108 + else {
  109 + vertical.style("width", "2px");
  110 + horizontal.style("height", "2px");
  111 + box.style("display", "inherit");
  112 + let sliceCollision = getSliceCollision(xInGraph, yInGraph, barSettings);
  113 + // console.log(sliceCollision);
  114 + if (sliceCollision) {
  115 + if (sliceCollision.isXDriving) {
  116 + vertical.style("left", x + "px");
  117 + horizontal.style("top", yScale(sliceCollision.otherAxisLevel) + margin.top + "px");
  118 +
  119 + box.text(xInGraph + " " + sliceCollision.otherAxisLevel);
  120 + } else {
  121 + horizontal.style("top", y + "px");
  122 + vertical.style("left", xScale(sliceCollision.otherAxisLevel) + margin.right + "px");
  123 +
  124 + box.text(sliceCollision.otherAxisLevel + " " + yInGraph);
  125 + }
  126 + }
136 127
  128 + }
  129 + // box.text(attendeePercent + " % of attendees");
  130 + // console.log(d3.selectAll("g.x.axis")._groups[0][0]);
  131 + // console.log(d3.selectAll("g.x.axis")._groups[0][0].getBoundingClientRect().x);
137 } 132 }
138 - // box.text(attendeePercent + " % of attendees");  
139 - // console.log(d3.selectAll("g.x.axis")._groups[0][0]);  
140 - // console.log(d3.selectAll("g.x.axis")._groups[0][0].getBoundingClientRect().x);  
141 -}  
142 -  
143 -function addVerticalLineAndListenCursor(xScale, yScale, barSettings) {  
144 - let vertical = d3.select("#chart-container")  
145 - .append("div")  
146 - .attr("class", "remove")  
147 - .style("position", "absolute")  
148 - .style("z-index", "19")  
149 - .style("width", "2px")  
150 - .style("height", (height) + "px")  
151 - .style("top", (10 + margin.top) + "px")  
152 - .style("bottom", "30px")  
153 - .style("left", "0px")  
154 - .style("background", "#000");  
155 -  
156 - let horizontal = d3.select("#chart-container")  
157 - .append("div")  
158 - .attr("class", "remove")  
159 - .style("position", "absolute")  
160 - .style("z-index", "19")  
161 - .style("width", (width) + "px")  
162 - .style("height", "2px")  
163 - .style("top", "0px")  
164 - .style("bottom", "30px")  
165 - .style("left", (10 + margin.left) + "px")  
166 - .style("background", "#000");  
167 -  
168 - let box = d3.select("#chart-container")  
169 - .append("div")  
170 - .attr("class", "remove")  
171 - .style("position", "absolute")  
172 - .style("z-index", "20")  
173 - .style("width", "150px")  
174 - .style("height", "44px")  
175 - .style("top", "10px")  
176 - .style("bottom", "30px")  
177 - .style("left", "0px")  
178 - .style("border", "1px solid grey")  
179 - .style("background", "rgba(255, 255, 255, 0.7)");  
180 -  
181 - d3.select("#chart-container")  
182 - .on("mousemove", function(event){  
183 - setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box);  
184 - })  
185 - .on("mouseover", function(event){  
186 - setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box);  
187 -  
188 - });  
189 -}  
190 133
  134 + function addVerticalLineAndListenCursor(xScale, yScale, barSettings) {
  135 + let vertical = d3.select(containerSelector)
  136 + .append("div")
  137 + .attr("class", "no-pointer-events")
  138 + .style("position", "absolute")
  139 + .style("z-index", "19")
  140 + .style("width", "2px")
  141 + .style("height", (height) + "px")
  142 + .style("top", (10 + margin.top) + "px")
  143 + .style("bottom", "30px")
  144 + .style("left", "0px")
  145 + .style("background", "#000");
  146 +
  147 + let horizontal = d3.select(containerSelector)
  148 + .append("div")
  149 + .attr("class", "no-pointer-events")
  150 + .style("position", "absolute")
  151 + .style("z-index", "19")
  152 + .style("width", (width) + "px")
  153 + .style("height", "2px")
  154 + .style("top", "0px")
  155 + .style("bottom", "30px")
  156 + .style("left", (10 + margin.left) + "px")
  157 + .style("background", "#000");
  158 +
  159 + let box = d3.select(containerSelector)
  160 + .append("div")
  161 + .attr("class", "no-pointer-events")
  162 + .style("position", "absolute")
  163 + .style("z-index", "20")
  164 + .style("width", "150px")
  165 + .style("height", "44px")
  166 + .style("top", "10px")
  167 + .style("bottom", "30px")
  168 + .style("left", "0px")
  169 + .style("border", "1px solid grey")
  170 + .style("background", "rgba(255, 255, 255, 0.7)");
  171 +
  172 + d3.select(containerSelector)
  173 + .on("mousemove", function (event) {
  174 + setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box);
  175 + })
  176 + .on("mouseover", function (event) {
  177 + setupCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, box);
  178 + });
  179 + }
191 180
192 181
193 -document.onreadystatechange = () => {  
194 - if (document.readyState === 'complete') { 182 + document.addEventListener("DOMContentLoaded", () => {
  183 + width = Math.max(880, $(containerSelector).parent().width());
  184 + width = width - margin.left - margin.right;
195 let maxAttendeePercent = 100; 185 let maxAttendeePercent = 100;
196 let maxEmissionsPercent = 100; 186 let maxEmissionsPercent = 100;
197 - let svg = d3.select("#chart-container") 187 + let svg = d3.select(containerSelector)
198 .append("svg") 188 .append("svg")
199 .attr("id", "graph-svg") 189 .attr("id", "graph-svg")
200 .attr("width", width + margin.left + margin.right) 190 .attr("width", width + margin.left + margin.right)
@@ -207,31 +197,29 @@ document.onreadystatechange = () =&gt; { @@ -207,31 +197,29 @@ document.onreadystatechange = () =&gt; {
207 let attendeeNumberPerGroup = []; 197 let attendeeNumberPerGroup = [];
208 let emissionsSum = 0; 198 let emissionsSum = 0;
209 let attendeeSum = 0; 199 let attendeeSum = 0;
210 - let rows = [];  
211 - d3.csv("2020-09-30_04_21_19_87a1.csv", function (data) {  
212 - let trainAttendee = parseInt(data["train trips_amount"]);  
213 - let planeAttendee = parseInt(data["plane trips_amount"]);  
214 - if(trainAttendee === 0 && planeAttendee === 0)  
215 - { 200 + let data = [];
  201 + d3.csv(csvUrl, function (datum) {
  202 + let trainAttendee = parseInt(datum["train trips_amount"]);
  203 + let planeAttendee = parseInt(datum["plane trips_amount"]);
  204 + if (trainAttendee === 0 && planeAttendee === 0) {
216 return; 205 return;
217 } 206 }
218 let attendeeNumber = trainAttendee + planeAttendee; 207 let attendeeNumber = trainAttendee + planeAttendee;
219 - let distance_km = data.distance_km / attendeeNumber;  
220 - let co2_kg = parseFloat(data.co2_kg);  
221 - if (co2_kg === "NaN" || distance_km === "NaN")  
222 - { 208 + let distance_km = datum.distance_km / attendeeNumber;
  209 + let co2_kg = parseFloat(datum.co2_kg);
  210 + if (co2_kg === "NaN" || distance_km === "NaN") {
223 return; 211 return;
224 } 212 }
225 - rows.push(data); 213 + data.push(datum);
226 }).then((() => { 214 }).then((() => {
227 - rows.forEach((element, index) => {  
228 - let trainAttendee = parseInt(element["train trips_amount"]);  
229 - let planeAttendee = parseInt(element["plane trips_amount"]); 215 + data.forEach((datum, index) => {
  216 + let trainAttendee = parseInt(datum["train trips_amount"]);
  217 + let planeAttendee = parseInt(datum["plane trips_amount"]);
230 let attendeeNumber = trainAttendee + planeAttendee; 218 let attendeeNumber = trainAttendee + planeAttendee;
231 - element["emissions_per_capita"] = parseFloat(element.co2_kg) / attendeeNumber; 219 + datum["emissions_per_capita"] = parseFloat(datum.co2_kg) / attendeeNumber;
232 }); 220 });
233 221
234 - rows.sort(function (a, b) { 222 + data.sort(function (a, b) {
235 if (a.emissions_per_capita > b.emissions_per_capita) { 223 if (a.emissions_per_capita > b.emissions_per_capita) {
236 return 1; 224 return 1;
237 } 225 }
@@ -240,13 +228,13 @@ document.onreadystatechange = () =&gt; { @@ -240,13 +228,13 @@ document.onreadystatechange = () =&gt; {
240 } 228 }
241 return 0; 229 return 0;
242 }); 230 });
243 - console.log(rows); 231 + console.log(data);
244 let dataIndex = 0; 232 let dataIndex = 0;
245 - rows.forEach((element, index) => {  
246 - let trainAttendee = parseInt(element["train trips_amount"]);  
247 - let planeAttendee = parseInt(element["plane trips_amount"]); 233 + data.forEach((datum, index) => {
  234 + let trainAttendee = parseInt(datum["train trips_amount"]);
  235 + let planeAttendee = parseInt(datum["plane trips_amount"]);
248 let attendeeNumber = trainAttendee + planeAttendee; 236 let attendeeNumber = trainAttendee + planeAttendee;
249 - let co2_kg = parseFloat(element.co2_kg); 237 + let co2_kg = parseFloat(datum.co2_kg);
250 emissionsSum += co2_kg; 238 emissionsSum += co2_kg;
251 attendeeSum += attendeeNumber; 239 attendeeSum += attendeeNumber;
252 emissionsPerGroup[dataIndex] = emissionsSum; 240 emissionsPerGroup[dataIndex] = emissionsSum;
@@ -263,7 +251,7 @@ document.onreadystatechange = () =&gt; { @@ -263,7 +251,7 @@ document.onreadystatechange = () =&gt; {
263 //Title 251 //Title
264 svg.append("text") 252 svg.append("text")
265 .attr("transform", 253 .attr("transform",
266 - "translate(" + (70 + margin.left) + ", -12)") 254 + "translate(" + (70 + margin.left) + ", -12)")
267 .style("text-anchor", "middle") 255 .style("text-anchor", "middle")
268 .style("font-weight", "bold") 256 .style("font-weight", "bold")
269 .style("font-size", "130%") 257 .style("font-size", "130%")
@@ -292,7 +280,7 @@ document.onreadystatechange = () =&gt; { @@ -292,7 +280,7 @@ document.onreadystatechange = () =&gt; {
292 280
293 svg.append("text") 281 svg.append("text")
294 .attr("transform", 282 .attr("transform",
295 - "translate(" + (width/2) + " ," + 283 + "translate(" + (width / 2) + " ," +
296 (height + margin.top + 12) + ")") 284 (height + margin.top + 12) + ")")
297 .style("text-anchor", "middle") 285 .style("text-anchor", "middle")
298 .text("% of participants, sorted by per capita emission"); 286 .text("% of participants, sorted by per capita emission");
@@ -300,7 +288,7 @@ document.onreadystatechange = () =&gt; { @@ -300,7 +288,7 @@ document.onreadystatechange = () =&gt; {
300 svg.append("text") 288 svg.append("text")
301 .attr("transform", "rotate(-90)") 289 .attr("transform", "rotate(-90)")
302 .attr("y", 0 - margin.left) 290 .attr("y", 0 - margin.left)
303 - .attr("x",0 - (height / 2)) 291 + .attr("x", 0 - (height / 2))
304 .attr("dy", "1em") 292 .attr("dy", "1em")
305 .style("text-anchor", "middle") 293 .style("text-anchor", "middle")
306 .text("% of total emissions"); 294 .text("% of total emissions");
@@ -309,23 +297,21 @@ document.onreadystatechange = () =&gt; { @@ -309,23 +297,21 @@ document.onreadystatechange = () =&gt; {
309 emissionsPerGroup.forEach((element, index) => { 297 emissionsPerGroup.forEach((element, index) => {
310 let bottomBorder; 298 let bottomBorder;
311 let leftBorder; 299 let leftBorder;
312 - if(index === 0)  
313 - { 300 + if (index === 0) {
314 bottomBorder = 0; 301 bottomBorder = 0;
315 leftBorder = 0; 302 leftBorder = 0;
316 } 303 }
317 - else  
318 - {  
319 - bottomBorder = emissionsPerGroup[index-1] / emissionsSum * 100.0;  
320 - leftBorder = attendeeNumberPerGroup[index-1] /attendeeSum * 100.0; 304 + else {
  305 + bottomBorder = emissionsPerGroup[index - 1] / emissionsSum * 100.0;
  306 + leftBorder = attendeeNumberPerGroup[index - 1] / attendeeSum * 100.0;
321 } 307 }
322 - barSettings[index]=  
323 - {  
324 - topBorder : emissionsPerGroup[index] / emissionsSum * 100.0,  
325 - bottomBorder: bottomBorder,  
326 - leftBorder : leftBorder,  
327 - rightBorder : attendeeNumberPerGroup[index] / attendeeSum * 100.0,  
328 - }; 308 + barSettings[index] =
  309 + {
  310 + topBorder: emissionsPerGroup[index] / emissionsSum * 100.0,
  311 + bottomBorder: bottomBorder,
  312 + leftBorder: leftBorder,
  313 + rightBorder: attendeeNumberPerGroup[index] / attendeeSum * 100.0,
  314 + };
329 // console.log(index); 315 // console.log(index);
330 // console.log(barSettings[index]); 316 // console.log(barSettings[index]);
331 }); 317 });
@@ -335,13 +321,21 @@ document.onreadystatechange = () =&gt; { @@ -335,13 +321,21 @@ document.onreadystatechange = () =&gt; {
335 .enter() 321 .enter()
336 .append("rect") 322 .append("rect")
337 .attr("x", 1) 323 .attr("x", 1)
338 - .attr("transform", function(d) { return "translate(" + x(d.leftBorder) + "," + y(d.topBorder) + ")"; })  
339 - .attr("width", function(d) { return x(d.rightBorder) - x(d.leftBorder) -1 ; })  
340 - .attr("height", function(d) { return (y(d.bottomBorder)- y(d.topBorder)); }) 324 + .attr("transform", function (d) {
  325 + return "translate(" + x(d.leftBorder) + "," + y(d.topBorder) + ")";
  326 + })
  327 + .attr("width", function (d) {
  328 + return x(d.rightBorder) - x(d.leftBorder) - 1;
  329 + })
  330 + .attr("height", function (d) {
  331 + return (y(d.bottomBorder) - y(d.topBorder));
  332 + })
341 .style("z-index", "500") 333 .style("z-index", "500")
342 .style("fill", "#4444E5"); 334 .style("fill", "#4444E5");
343 addVerticalLineAndListenCursor(x, y, barSettings); 335 addVerticalLineAndListenCursor(x, y, barSettings);
344 })); 336 }));
345 337
346 - }  
347 -};  
348 \ No newline at end of file 338 \ No newline at end of file
  339 +
  340 + });
  341 +
  342 +}
349 \ No newline at end of file 343 \ No newline at end of file