Published unlisted
Edited
Mar 7, 2019
class Row {
constructor({values = [], x = 0, y = 0, colLength = 20, hsla = [[225, 50, 50]], randomColor = null}) {
this.values = values;
this.x = x;
this.y = y;
this.colLength = colLength;
this.hsla = hsla;
if (randomColor) {
this.hsla = randomHsla(values.length);
}
}
showValues() {
return this.values;
}
draw(context) {
for (let i = 0; i < this.values.length; i++) {
let index = i % this.hsla.length;
context.fillStyle = `hsla(${this.hsla[index][0]}, ${this.hsla[index][1]}%, ${this.hsla[index][2]}%)`;
context.fillRect(this.x+i*(this.colLength + 5), this.y, this.colLength, 5);
}
}
move(x, y) {
this.x = x;
this.y = y;
}
coords() {
return [this.x, this.y];
}
changeColor(idx, newVals) {
this.hsla[idx] = newVals;
}
changeSaturation(idx, sat) {
this.hsla[idx][1] = sat;
return this;
}
getSaturation(idx) {
return this.hsla[idx][1];
}
}
rotatingHsla = function(...hueValues) {
return hueValues.map((val) => [val, Math.random() * 50 + 50, Math.random() * 20 + 50]);
}
randomHsla = function(numValues) {
let i = 0;
let hslaArray = [];
while (i < numValues) {
hslaArray.push(Math.random() * 360);
i++;
}
return rotatingHsla(...hslaArray);
}
testRow = new Row({values:[2,3,4,5], colLength: 20, hsla: rotatingHsla(225, 13, 80)})
makeRows = function(numRows, colLength, hsla, randomColor = null) {
let rows = [];
for (let i = 0; i < numRows; i++) {
rows.push(new Row({values: [0,0,0,0], colLength, hsla, x: 0, y: i*10, randomColor}));
}
return rows;
}
drawRows = function(rows, ctx) {
for (let i = 0; i < rows.length; i++) {
rows[i].draw(ctx);
}
}
makeRows(3, 20, randomHsla(4))
testRows = makeRows(5, 20, randomHsla(4))
{
const ctx = DOM.context2d(350, 100);
drawRows(testRows, ctx);
return ctx.canvas;
}
{
for (let i = 0; i < testRows.length; i++) {
testRows[i].changeSaturation(2, 5 * i);
}
}
testRows[3].hsla[2][1]
testRows[0].hsla[2][1]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
