The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Dec 11, 2019
12 forks
Importers
4 stars
test = {
let isSpinning = true;
const illo = new Zdog.Illustration({
element: DOM.canvas(width, width / 2),
dragRotate: true,
onDragStart() { isSpinning = false },
onDragEnd() { isSpinning = true },
});
illo.element.style.backgroundColor = 'slategray';
const animate = dog(illo);
let frame = 0;
while (true) {
if (isSpinning)
illo.rotate.y += .03;
if (animate)
animate(frame++);
illo.updateRenderGraph();
yield illo.element;
}
}
dog = illo => {
const body = new Zdog.Shape({
addTo: illo,
stroke: 50,
path: [{ y: 0 }, { y: 30 }],
color: 'palegreen',
})
const leftEye = new Zdog.Shape({
addTo: body,
translate: { x: -10, z: 20 },
stroke: 10,
color: 'black',
})
const rightEye = leftEye.copy({
translate: { x: 10, z: 20 },
})
const mouth = new Zdog.Shape({
addTo: body,
color: 'white',
stroke: 20,
path: [{ x: -5 }, { x: 5 }],
translate: { y: 20, z: 15 },
})
return (frame, dogs) => {
body.rotate = { z: Zdog.TAU/32 * Math.sin(frame / 10) }
}
}
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.
