count = links.length
links = Generators.observe(notify => {
let length = 0;
const observed = () => {
const links = document.querySelectorAll("a[title]");
if (length !== links.length) {
length = links.length;
notify(Array.from(links, a => a.href).sort());
}
};
const observer = new MutationObserver(observed);
observer.observe(document.body, {childList: true, subtree: true});
observed();
return () => observer.disconnect();
})
function previews(notebooks) {
return htl.html`<div style="display: grid; grid-gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(160px, 5fr));">${notebooks.map(preview)}</div>`;
}
function preview({path, title, author, thumbnail}) {
return htl.html`<a href="/${encodeURI(path)}" target="_blank" title="${title} by ${author}" style="display: inline-flex; flex-direction: column; align-items: start; font: 400 .75rem var(--sans-serif); color: #1b1e23; width: 100%;" onmouseover=${event => event.currentTarget.firstElementChild.style.borderColor = "#1b1e23"} onmouseout=${event => event.currentTarget.firstElementChild.style.borderColor = "#e8e8e8"}>
<div style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 100%; padding-top: 62.5%; background-size: cover; background-image: url(https://static.observableusercontent.com/thumbnail/${encodeURI(thumbnail)}.jpg);"></div>
<div style="width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">${title}</div>
</a>`;
}
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.
