// sets the points at which to draw a flap, and what color it is
// generator for the logo points, basically "walks" the perimeter
baseShape = {
// clicking the button invalidates this cell
replay;
// generate the points of the pinwheel
const pointCount = 17;
const data = [];
for (let i = 0; i < pointCount; ++i) {
data.push([
// angle
(Math.PI / 8) * i,
// radius
radii[i % 4]
]);
// yield rather than return, so we can animate
yield await Promises.delay(1000 / speed, data);
}
}
// FUN: apply a transformation to the baseShape based on the sliders above
logoPoints = baseShape.map(([a, rad], i) => {
switch (i % 4) {
case 0:
return [a, rad * boxScale];
case 1:
return [a, rad * innerScale];
case 2:
return [a, rad * outerScale];
case 3:
return [a, rad * innerScale];
}
})
path = (points, attrs = []) =>
`<path d="${d3.lineRadial()(
points
)}" transform="translate(150,150)" ${attrs.length > 0 &&
attrs.reduce((acc, [k, v]) => (acc += ` ${k}="${v}"`), "")} />`
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.
