Designing and Engineering a Better Tomorrow
Unlisted
Edited
Sep 19, 2021
svg1 ={
while(true){
let t = Math.sin(Date.now() / 1000);
let svg1 = svg`<svg viewBox="0 0 12 12" width=128 height=128>
<circle stroke=black stroke-width=${1.5 + t} fill=none cx=6 cy=6 r=${3.5 + t}></circle>
</svg>`;
yield svg1;
}
}
svg2 ={
const svg2 = svg`<svg viewBox="0 0 12 12" width=128 height=128><circle stroke=black stroke-width=1.5 fill=none cx=6 cy=6 r=3.5></circle></svg>` ;
let frame;
(function tick() {
const t = Math.sin(Date.now() / 1000);
d3.select(svg2).select("circle").attr("stroke-width",1.5 + t).attr("r",3.5 + t);
frame = requestAnimationFrame(tick);
})();
invalidation.then(() => cancelAnimationFrame(frame));
return svg2;
}
// Referencing svg1 in this cell displays a rendered svg element
svg1
// Referencing svg2 in this cell DOES NOT display a rendered svg element
svg2
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.
