{
const width = 720;
const padding = 10;
const d = width - padding * 2;
const height = (d / 2) * Math.sqrt(3) + padding * 2;
const maxLevel = 4;
const triangles = [
[
cm.vec(width / 2, padding),
cm.vec(padding, height - padding),
cm.vec(width - padding, height - padding)
]
];
split(0, 1);
function split(i, level) {
if (level > maxLevel) return;
const [p0, p1, p2] = triangles[i];
const m01 = cm.vecAdd(p0, p1).div(2);
const m12 = cm.vecAdd(p1, p2).div(2);
const m20 = cm.vecAdd(p2, p0).div(2);
const t0 = [p0, m01, m20];
const t1 = [m01, p1, m12];
const t2 = [m12, p2, m20];
triangles.splice(i, 1, t0, t1, t2);
split(i + 2, level + 1);
split(i + 1, level + 1);
split(i + 0, level + 1);
}
const app = cm.app({
width,
height,
draw: [
cm.svg("polygon", triangles, {
fill: "black",
points: (points) => points.map((d) => `${d.x},${d.y}`)
})
]
});
return app.render();
}
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.
