Public
Edited
Jun 19, 2024
Insert cell
Insert cell
Insert cell
Insert cell
{
let lucas = [2, 1, 3, 4, 7, 11, 18, 29, 47, 76, 123, 199, 322, 521, 843];
return drawQuiltArray(lucas, { title: "Lucas Numbers" });
}
Insert cell
{
let squares = _.range(1, 26).map((x) => x ** 2);
return drawQuiltArray(squares, { title: "Square Numbers" });
}
Insert cell
{
let mul5 = _.range(1, 50 + 1).map((x) => x * 5);
return drawQuiltArray(mul5, { title: "Multiples of 5", size: 100 });
}
Insert cell
{
let pow2 = _.range(1, 11).map((x) => 2 ** x);
return drawQuiltArray(pow2, { title: "Powers of 2" });
}
Insert cell
{
let pow3 = _.range(1, 8).map((x) => 3 ** x);
return drawQuiltArray(pow3, { title: "Powers of 3" });
}
Insert cell
{
let primes = [
2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71,
73, 79, 83, 89, 97, 101, 103, 107, 109, 113, 127, 131, 137, 139, 149, 151,
157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 211, 223, 227, 229, 233,
239, 241, 251, 257, 263, 269, 271, 277, 281
];
return drawQuiltArray(primes, { title: "Prime Numbers", size: 100 });
}
Insert cell
{
let hcomp = [
1, 2, 4, 6, 12, 24, 36, 48, 60, 120, 180, 240, 360, 720, 840, 1260, 1680,
2520
];
return drawQuiltArray(hcomp, { title: "Highly Composite Numbers" });
}
Insert cell
function drawQuiltArray(array, { size = 200, title = "" } = {}) {
return html`<h2>${title}</h2><div style="display: flex; flex-wrap: wrap; gap: 16px;">${array.map(
(n) =>
html`<div>${n}</div><a href="/@tesseralis/pisano-quilts?n=${n}&scheme=${
inputs.scheme
}&palette=${
inputs.palette
}" target="_blank" rel=”noopener noreferrer”>${drawQuilt(pisanoQuilt(n), {
...inputs,
size
})}`
)}</a></div>`;
}
Insert cell
import { pisanoQuilt, drawQuilt, scales } from "@tesseralis/pisano-quilts"
Insert cell

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.
Learn more