{
regenerate;
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 n = d3.randomInt(1, 4)();
for (let i = 0; i < 2; i++) {
const a = d3.randomUniform(-Math.PI / 2, Math.PI / 2)();
const v = cm.vecFromAngle(dir + a).mult(len2);
branch(end, cm.vecAdd(end, v), 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.
