Tech Lead at Taktile.
Formerly Firebase, Google
timeseries = (frame) => {
const segments = 256;
const width = 512;
return svg`<svg viewBox="-1.5 -1.5 3 3" width="${width}">
<style>
.line {
fill: none;
stroke-width:0.005;
}
.thick {
fill: "black";
stroke-width:0.001;
}
</style>
${range(18, 0, -0.2).map((w, i) =>
svg`<g transform = "rotate(${w*360 - (0.1* frame * 360) % 360} 0 0) scale(${w + (frame * 10 % 1)})">
<rect x = "-0.1"
y = "-0.1"
height = "0.2"
width = "0.2"
stroke="green"
class="thick"
/>
</g>`
)}
${range(-Math.PI, Math.PI, 2 * Math.PI / segments).map((theta, i) =>
svg`<circle cx="${Math.cos(theta) * 0.5 * (1 + Math.cos(1 + 2 * Math.PI * frame))}"
cy="${Math.sin(theta) * 0.5 * (1 + Math.sin(1 * 2 * Math.PI * frame))}"
r="${0.25 * (1 + Math.sin(frame * 2))}" class="line"
stroke="${colors[Math.floor((frame * segments * 1 + i) % segments)]}"/>`
)}</svg>`
}
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.
