Published
Edited
Aug 14, 2019
29 stars
Insert cell
Insert cell
Insert cell
subject = {
const div = html`<div style="
background: black;
font: 64px var(--sans-serif);
height: 800px;
display: flex;
align-items: center;
justify-content: center;
">`;
const observer = new IntersectionObserver(entries => {
const entry = entries.pop();
div.style.color = `hsl(0, 100%, ${entry.intersectionRatio * 100}%)`;
div.textContent = `${(entry.intersectionRatio * 100).toFixed(0)}% visible`;
}, {
threshold: Array.from({length: 101}, (_, i) => i / 100)
});
observer.observe(div);
invalidation.then(() => observer.disconnect());
return div;
}
Insert cell
Insert cell

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.
Learn more