Published
Edited
Apr 21, 2018
1 fork
md`
${svg`
<svg width=500 height="300">
<g transform="translate(0,200)">
<rect width=50
height=${animate(50)}
y=${animate(-50)}
/>
<rect x=55 width=50
height=${animate(100)}
y=${animate(-100)}
/>
<rect x=110 width=50
height=${animate(150)}
y=${animate(-150)}
/>
<rect x=165 width=50
height=${animate(120)}
y=${animate(-120)}
/>
</g>
</svg>
`}
`
function animate(prop){
return secondAnimation*prop;
}
getGenerator = async function* getGenerator(value,duration,delay) {
if(delay) {
await Promises.delay(delay);
}
let defaultTime = duration||1000;
let defaultDelay = 10;
let tickCounts = defaultTime/defaultDelay;
for (let i = 0; i <= tickCounts; ++i) {
await Promises.delay(defaultDelay);
yield i*value/tickCounts;
}
yield value;
}
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.
