toc()
function toc(selector = "h1,h2,h3", heading = "<b>Table of Contents</b>", classPrefix = "toc-") {
return Generators.observe(notify => {
let headings = [];
function observed() {
const h = Array.from(document.querySelectorAll(selector));
if (h.length !== headings.length || h.some((h, i) => headings[i] !== h)) {
notify(html`${heading}<ul>${Array.from(headings = h, h => {
return Object.assign(
html`<li class=${classPrefix+h.tagName}><a href=#${h.id}>${DOM.text(h.textContent)}`,
{onclick: e => (e.preventDefault(), h.scrollIntoView())}
);
})}`);
}
}
const observer = new MutationObserver(observed);
observer.observe(document.body, {childList: true, subtree: true});
observed();
return () => observer.disconnect();
});
}
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.
