Published
Edited
Dec 4, 2021
updatingData = {
let i = 0;
let change = 1;
while (true) {
if (i > 30) {
change = -2;
} else if (i < 0) {
change = 2;
}
yield Promises.delay(5, (i += change));
}
}
element = DOM.canvas(width, 400)
isSpinning = ({
value: true
})
illo = new Zdog.Illustration({
element,
dragRotate: true,
// pause spinning while dragging
onDragStart: () => (isSpinning.value = false),
onDragEnd: () => (isSpinning.value = true)
})
{
while (true) {
if (isSpinning.value) illo.rotate.y += 0.03;
//This is the critical line used to update preexisting elements without resetting the scene! Note that the index used to access the children array is based on order creation. The zeroeth item is the first element added to the illustration, the second element added would be the first index...
illo.children[0].translate.y = updatingData;
illo.updateRenderGraph();
yield element;
}
}
startingShapes = {
new Zdog.Rect({
addTo: illo,
width: 80,
height: 80,
translate: { z: 40 },
stroke: 12,
color: "#E62",
fill: true,
id: "my name"
});
new Zdog.Ellipse({
addTo: illo,
diameter: 20,
translate: { z: 20 },
stroke: 8,
color: "#636"
});
}
Zdog = require("zdog@1/dist/zdog.dist.min.js")
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.
