{
const width = 800;
const height = 250;
const points = [cm.vec(0, height - 10), cm.vec(width, height - 10)];
const maxLevel = 4;
addPoint(0, 1, 0);
function addPoint(i, j, level) {
if (level > maxLevel) return;
const start = points[i];
const end = points[j];
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: width,
height: height,
draw: [
cm.svg("polyline", {
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.
