Last changes

Exercise 8/bar-chart-with-bars.html

@@ -42,11 +42,9 @@
        * @param {number} step - Number to add to y axis
        */
       const drawNLines = (n, step) => {
-        for (let i = 1; i <= n; i++) {
+        const yOffset = i => canvas.height * (n - i + 1 ) / (n+1);
-          const y = canvas.height * (n - i + 1 ) / (n+1);
+        for (let i = 1; i <= n; i++)
-          const text = step * i;
+          drawLineWithText(step * i, 50, yOffset(i), canvas.width - 100, yOffset(i));
-          drawLineWithText(text, 50, y, canvas.width - 100, y);
-        }
       }
 
       /**
@@ -72,15 +70,13 @@
        * @yields {string} A color
        */
       function* colorCycler(colors) {
-        let i = 0;
+        while (true) 
-        while (true) {
+          for (color of colors) 
-          yield colors[i];
+            yield color;
-          i = (i + 1) % colors.length
-        }
       }
 
       /**
-       * Draw a legend entry on the canvas
+       * Draw a legend on the canvas
        * 
        * @param {string[]} properties - An array of labels
        * @param {[string[]} colorList - An array of colors to cycle when making labels
@@ -89,14 +85,13 @@
         const colors = colorCycler(colorList);
 
         const drawLabel = (text, color, y) => {
-          drawText(text, canvas.width-45, y + 15)
+          drawText(text, canvas.width - 45, y + 15);
           drawRectangle(canvas.width - 90, y, 40, 20, color);
         }
 
-        const yOffset = canvas.height / 12
+        const yOffset = i => canvas.height / 12 + 30 * i;
-        for (i in properties) {
+        for (i in properties)
-          drawLabel(properties[i], colors.next().value, yOffset+30*i);
+          drawLabel(properties[i], colors.next().value, yOffset(i));
-        }
       }
 
       /**
@@ -119,19 +114,22 @@
        */
       const drawBars = ({x, width, adjustY, object, sep, colorList}) => {
         const colors = colorCycler(colorList);
-        const values = Object.values(object)
+        const values = Object.values(object);
 
-        const drawBar = (value, x) => {
+        const drawBar = (value, x) => 
-          const y = adjustY(value);
+          drawRectangle(
-          const localWidth = width / (values.length) - sep;
+            x,
-          const localHeight = canvas.height - y;
+            adjustY(value),
-          drawRectangle(x, y, localWidth, localHeight, colors.next().value);
+            width / (values.length) - sep,
-        }
+            canvas.height - adjustY(value), 
+            colors.next().value
+          );
+        
+
+        const xOffset = i => x + i * (sep + width / (values.length));
+        for (let i=0; i<values.length; i++) 
+          drawBar(values[i], xOffset(i));
 
-        for (let i=0; i<values.length; i++) {
-          const xOffset = x + i * (sep + width / (values.length));
-          drawBar(values[i], xOffset);
-        }
         colors.return();
       }
 
@@ -149,7 +147,7 @@
         const initialXOffset = 50 + columnSetWidth;
         const xOffset = 2*columnSetWidth;
 
-        for (i in data) {
+        for (i in data)
           drawBars({
             x: initialXOffset + i*xOffset,
             width: columnSetWidth,
@@ -158,7 +156,6 @@
             sep: 5, 
             colorList: colorList
           });
-        }
       }
 
       /**
@@ -174,7 +171,7 @@
         const colorList = ['red', 'blue'];
         drawLabels(Object.getOwnPropertyNames(data[0]), colorList);
 
-        const adjustY = val => canvas.height * ( 1 - val / (step * (range/step + 1)));
+        const adjustY = val => canvas.height * ( 1 - val / (range + step));
         drawColumnSet(data, colorList, adjustY);
       }
 

Exercise 8/bar-chart-with-labels.html

@@ -80,7 +80,7 @@
       }
 
       /**
-       * Draw a legend entry on the canvas
+       * Draw a legend on the canvas
        * 
        * @param {string[]} properties - An array of labels
        * @param {[string[]} colorList - An array of colors to cycle when making labels