Public
Edited
Nov 23, 2022
function f(n) {
let t = Math.floor((Math.sqrt(1 + 8 * n) - 1) / 2);
let k = n - (t * (t + 1)) / 2;
if (t % 2 == 0) return [k, t - k];
return [t - k, k];
}
viewof n = Inputs.range([0, 255], { step: 1 })
f(n)
{
const d = 10;
const sz = 40;
const matrix = html`<div style='width: ${d * sz}px; height: ${
d * sz
}px; position: relative;'/>`;
const mcell = [];
const [ii, jj] = f(n);
for (let i = 0; i < d; ++i) {
let mrow = [];
for (let j = 0; j < d; ++j) {
const ty = ii == i && jj == j ? "pivotcell" : "normalcell";
let cell = html`<div class = 'matrixcell ${ty}' style='top: ${
sz * i
}px; left: ${sz * j}px;' ></div>`;
cell.appendChild(html`(${i},${j})`);
mrow.push(cell);
matrix.appendChild(cell);
}
mcell.push(mrow);
}
return matrix;
}
html`<style>
.matrixcell {
position: absolute;
width: 40px;
height: 40px;
background-color: #F0F0F0;
border: 2px solid white;
line-height: 40px;
text-align: center;
}
.pivotcell {
background-color: tomato;
}
.normalcell {
background-color: #F0F0F0;
}
}
</style>`
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.
