{
const width = 640;
const height = 240;
const lines = branch(
cm.vec(width / 2, height),
cm.vec(width / 2, height - 80)
);
function branch(start, end, lines = []) {
const len = cm.vecDist(end, start);
if (len < 2) return;
lines.push([start, end]);
const dir = cm.vecSub(end, start).angle();
const len2 = len * 0.67;
const n1 = cm.vecFromAngle(dir - angle).mult(len2);
const n2 = cm.vecFromAngle(dir + angle).mult(len2);
branch(end, cm.vecAdd(end, n1), lines);
branch(end, cm.vecAdd(end, n2), lines);
return lines;
}
const app = cm.app({
width: width,
height: height,
draw: [
cm.svg("line", lines, {
x1: (d) => d[0].x,
y1: (d) => d[0].y,
x2: (d) => d[1].x,
y2: (d) => d[1].y,
stroke: "black",
strokeWidth: 1.5
})
]
});
return app.render();
}
cm = require("charmingjs@0.0.15")
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.
