{
let isSpinning = true;
let element = DOM.canvas(width, 800);
let illo = new Zdog.Illustration({
element,
dragRotate: true,
onDragStart: () => (isSpinning = false),
onDragEnd: () => (isSpinning = true),
rotate: {
x: -Math.PI / 4,
z: Math.PI
}
});
d3.range(0, 255 + 10, 20).forEach(r => {
d3.range(0, 255 + 10, 20).forEach(g => {
d3.range(0, 255 + 10, 20).forEach(b => {
const x = r - 255 / 2;
const y = g - 255 / 2;
const z = b - 255 / 2;
const color = d3.rgb(r, g, b);
color.displayable() &&
new Zdog.Shape({
addTo: illo,
stroke: 20,
path: [{ x, y, z }],
color: color.hex()
});
});
});
});
while (true) {
if (isSpinning) illo.rotate.y += 0.03;
illo.updateRenderGraph();
yield element;
}
}
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.
