{
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, 100 + 15, 15).forEach(c => {
d3.range(0, 360, 5).forEach(h => {
d3.range(0, 100 + 10, 10).forEach(l => {
const x = Math.cos((h * Math.PI) / 180) * c * 2;
const y = l * 5 - 250;
const z = Math.sin((h * Math.PI) / 180) * c * 2;
const color = d3.hcl(h, c, l);
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.
