Published
Edited
Dec 20, 2020
Fork of Lch in Zdog
Importers
Insert cell
Insert cell
{
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;
}
}
Insert cell
Insert cell
Insert cell
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