Consultant Designer & Developer
function drawCircles(dots) {
const xMid = width / 2;
const yMid = height / 2;
let circElems = "";
dots.flat().forEach(d => {
const [r, rad, dR] = d;
const R = r * size * 0.5 + dR * 16;
const x = xMid + R * Math.cos(rad * Math.PI * 2);
const y = yMid + R * Math.sin(rad * Math.PI * 2);
circElems += `<circle cx="${x}" cy="${y}" r="${dotR * dR}" fill="${
colors.fg
}" />`;
});
return circElems;
}
function animateDots(dots, t) {
return dots.map((circle, i, arr) => {
const dI = 1 - i / arr.length;
let dTheta = t;
dTheta = eases.quintOut(dTheta);
let dR = Math.abs(((t + dI) % 1) - 0.5);
dR = eases.cubicInOut(dR);
dR = CSMath.lerp(0.25, 1.25, dR);
return circle.map((dot, j) => [dot[0], dot[1] + 0.0333 * dTheta, dR]);
});
}
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.
