{
const size = 720;
const padding = 10;
const maxLevel = 4;
const d = size - padding * 2;
const y2 = size - padding;
const y1 = y2 - d * 0.75;
const mx = size / 2;
const dx = (d * Math.sqrt(3)) / 4;
const points = [cm.vec(mx - dx, y1), cm.vec(mx + dx, y1), cm.vec(mx, y2)];
addPoint(2, 3, 0, points);
addPoint(1, 2, 0, points);
addPoint(0, 1, 0, points);
function addPoint(i, j, level) {
if (level > maxLevel) return;
const n = points.length;
const start = points[i % n];
const end = points[j % n];
const dir = cm.vecSub(end, start).div(3);
const a = dir.angle() - Math.PI / 3;
const p0 = cm.vecAdd(start, dir);
const p1 = cm.vecAdd(p0, cm.vecFromAngle(a).mult(dir.mag()));
const p2 = cm.vecAdd(p0, dir);
points.splice(i + 1, 0, p0, p1, p2); // Insert points once!
for (let j = i + 4; j > i; j--) addPoint(j - 1, j, level + 1); // Add in reverse order.
}
const app = cm.app({
width: size,
height: size,
draw: [
cm.svg("polygon", {
stroke: "black",
strokeWidth: 2,
fill: "none",
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.
