Published
Edited
May 29, 2019
3 forks
26 stars
Insert cell
Insert cell
{
let isSpinning = true;
let element = DOM.canvas(width, 400);
let illo = new Zdog.Illustration({
element,
dragRotate: true,
// pause spinning while dragging
onDragStart: () => isSpinning = false,
onDragEnd: () => isSpinning = true
});

new Zdog.Ellipse({
addTo: illo,
diameter: 80,
translate: {z: 40},
stroke: 20,
color: '#636',
});

new Zdog.Rect({
addTo: illo,
width: 80,
height: 80,
translate: {z: -40},
stroke: 12,
color: '#E62',
fill: true,
});

while (true) {
if (isSpinning) illo.rotate.y += 0.03;
illo.updateRenderGraph();
yield element;
}
}
Insert cell
Zdog = require("zdog@1/dist/zdog.dist.min.js")
Insert cell

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.
Learn more