Public
Edited
Dec 30, 2022
Paused
Mandala({ design })
viewof mandala = {
const mandala = d3.create("svg").attr("width", size).attr("height", size);
yield mandala.node();
// board
// d3
// .create("g")
// .attr("transform", `scale(${size / 2}) translate(1, 1)`)
// .html(design.board)
// .node();
const board = svg`<g transform="scale(${size / 2}) translate(1, 1) ">${
design.board
}</g>`;
mandala.node().append(board);
// pieces
for (const type_info of design.piece_types) {
for (const i of _.times(design.num_sectors)) {
// const polygon = `<g><polygon points=${points} fill=${fill} /></g>`;
// await Promises.delay(20);
// mandala.append(piece);
}
}
// cursor
mandala.node().append(html`<style>
.mandala-piece:hover { cursor:grab; }
.mandala-piece:active { cursor:grabbing; }
</style>`);
}
design.board
height = width
size = Math.min(width, 0.8 * mutable outerHeight)
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.
