Example things I like: geometry, trippy geometry, recursion, maps. 👌
Published
Edited
Aug 31, 2021
1 fork
Importers
clock(t)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
let t = 0;
const c = clock(t);
while (true) {
t += 0.001;
c.update(t + Math.sin(now / 10000));
yield c;
}
}
function clock(t) {
const r = s / 2;
const strokeWidth = 1;
const degreesPerRadian = 180 / Math.PI;
const rh = 0.5 * r;
const rm = 0.9 * r;
const gray = "#aaa";
const hourHand = svg`<line y2=${-rh} stroke="#111" stroke-width=3 />`;
const minuteHand = svg`<line y2=${-rm} stroke="#111" stroke-width=2 />`;
// Having a mark for each minute decreases performance.
// const minuteMarks = Array.from({ length: 60 }).map((_, i) => {
// const isFive = i % 5 === 0;
// return svg`<line y1=${(isFive ? 0.8 : 0.9) * r} y2=${r *
// 0.9} stroke="${gray}" stroke-width=1 transform="rotate(${6 * i})" />`;
// });
const hy1 = 0.8 * r;
const hy2 = 0.9 * r;
const hourMarks = Array.from({ length: 12 }).map((_, i) => {
return svg`<line y1=${hy1} y2=${hy2} stroke="${gray}" stroke-width=1 transform="rotate(${30 *
i})" />`;
});
const theSvg = svg`<svg width=${s} height=${s} viewBox="0 0 ${s} ${s}">
<g transform="translate(${s / 2}, ${s / 2})" stroke-linecap="round">
<circle r=${r -
strokeWidth / 2} stroke="${gray}" stroke-width=1 fill="none" />
${hourMarks /*minuteMarks*/}
${hourHand}
${minuteHand}
</g>
</svg>`;
function update(t) {
theSvg.t = t;
const ah = (t % 0.5) * 2 * tau;
const am = ((t * 24) % 1) * tau;
hourHand.setAttribute("transform", `rotate(${degreesPerRadian * ah})`);
minuteHand.setAttribute("transform", `rotate(${degreesPerRadian * am})`);
}
theSvg.update = update;
update(t);
return theSvg;
}
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.
