{
const size = 800;
const vector = d3.range(5);
const matrix = d3.cross(vector, vector);
const grid = d3.scaleBand(vector, [0, size]).padding(0.4);
const length = grid.bandwidth() / 2;
const x = (d) => grid(d) + length;
const I = [0, 1, 2];
const C = ["#FD9DB9", "#FFD7E2", "#FFF"];
const L = [length, length / 1.38, length / 2.25].map((d) => d | 0);
const app = cm.app({
width: size,
height: size,
styleBackground: "rgb(255, 64, 119)",
loop: true,
draw: ({ time }) => [
cm.svg("g", matrix, {
transform: ([m, n]) => `translate(${x(m)}, ${x(n)})`,
children: I.map((i) => ([m, n]) => star({
length: L[i],
stroke: C[i],
time,
x: x(m),
y: x(n)
})) // prettier-ignore
})
]
});
invalidation.then(() => app.dispose());
return app.render();
}
function star({ length, stroke = "white", time, x, y }) {
const angles = d3.range(5).map((i) => ((Math.PI * 2) / 5) * i - Math.PI / 2);
const width = (length / 3) * 2;
const scale = (angle) => (t) => {
const x1 = x + Math.cos(angle) * t * length;
const y1 = y + Math.sin(angle) * t * length;
const a = time / 1200 + 0.005 * x1 + y1 * 0.008;
return 0.7 + 0.3 * Math.sin(10.0 * Math.sin(a));
};
return cm.svg("g", angles, {
transform: (d) => `rotate(${(d * 180) / Math.PI})`,
children: [(d) => line({ length, stroke, width, time, scale: scale(d) })]
});
}
function line({ length, width, stroke, scale }) {
const points = Array.from({ length }, (_, x) => [x, (width / 2) * scale(x / length / period)]); // prettier-ignore
const area = d3.area().x((d) => d[0]).y0((d) => d[1]).y1((d) => -d[1]); // prettier-ignore
return [
cm.svg("path", { fill: stroke, d: area(points) }),
cm.svg("circle", {
cx: length - 1,
fill: stroke,
r: points[length - 1][1]
})
];
}
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.
