diff --git a/Exercise 8/bar-chart-with-bars.html b/Exercise 8/bar-chart-with-bars.html
index 5b14b58..afb50a4 100644
--- a/Exercise 8/bar-chart-with-bars.html
+++ b/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 y = canvas.height * (n - i + 1 ) / (n+1);
- const text = step * i;
- drawLineWithText(text, 50, y, canvas.width - 100, y);
- }
+ const yOffset = i => canvas.height * (n - i + 1 ) / (n+1);
+ for (let i = 1; i <= n; i++)
+ drawLineWithText(step * i, 50, yOffset(i), canvas.width - 100, yOffset(i));
}
/**
@@ -72,15 +70,13 @@
* @yields {string} A color
*/
function* colorCycler(colors) {
- let i = 0;
- while (true) {
- yield colors[i];
- i = (i + 1) % colors.length
- }
+ while (true)
+ for (color of colors)
+ yield color;
}
/**
- * 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
- for (i in properties) {
- drawLabel(properties[i], colors.next().value, yOffset+30*i);
- }
+ const yOffset = i => canvas.height / 12 + 30 * i;
+ for (i in properties)
+ 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 y = adjustY(value);
- const localWidth = width / (values.length) - sep;
- const localHeight = canvas.height - y;
- drawRectangle(x, y, localWidth, localHeight, colors.next().value);
- }
+ const drawBar = (value, x) =>
+ drawRectangle(
+ x,
+ adjustY(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 canvas.height * ( 1 - val / (step * (range/step + 1)));
+ const adjustY = val => canvas.height * ( 1 - val / (range + step));
drawColumnSet(data, colorList, adjustY);
}
diff --git a/Exercise 8/bar-chart-with-labels.html b/Exercise 8/bar-chart-with-labels.html
index 33a958c..69e34f5 100644
--- a/Exercise 8/bar-chart-with-labels.html
+++ b/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