{
const width = 640;
const height = 400;
const lines = [];
addLines(width / 4, height / 2, (3 * width) / 4, height / 2);
function addLines(x1, y1, x2, y2) {
const dx = x2 - x1;
const dy = y2 - y1;
lines.push({ x1, y1, x2, y2 });
if (dx == 0 && dy > 4) {
addLines(x1 - dy / 3, y1, x1 + dy / 3, y1);
addLines(x1 - dy / 3, y2, x1 + dy / 3, y2);
} else if (dy == 0 && dx > 4) {
addLines(x1, y1 - dx / 3, x1, y1 + dx / 3);
addLines(x2, y1 - dx / 3, x2, y1 + dx / 3);
}
}
const app = cm.app({
width: width,
height: height,
draw: [
cm.svg("line", lines, {
x1: (d) => d.x1,
y1: (d) => d.y1,
x2: (d) => d.x2,
y2: (d) => d.y2,
stroke: "black",
strokeWidth: 2
})
]
});
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.
