Consultant Designer & Developer
Public
Edited
Mar 21, 2023
sampleFigure = figure(
htl.svg`<svg width=640 height=400><rect width=640 height=400 fill=seagreen></rect>`,
{
caption: "A sample image with a sample caption."
}
)
You can add reference link to figure using sampleFigure.refLink():
${sampleFigure.refLink()}, or like ${sampleFigure.refLink("See this figure")}.
function figure(el, { caption, fullWidth = true } = {}) {
const id = DOM.uid("figure").id;
const captionEl = caption != null ? htl.html`<figcaption>${caption}` : null;
let classnames = [ns];
if (fullWidth) {
classnames.push(`${ns}--full-width`);
}
const ui = htl.html`<figure id=${id} class=${classnames.join(" ")}>
${el}
${captionEl}
</figure>`;
function refLink(text) {
text = text != null ? text : isString(caption) ? caption : "Figure";
const link = htl.html`<a href=${`#${id}`}>${text}`;
link.addEventListener("click", (e) => {
e.preventDefault();
ui.scrollIntoView();
});
return link;
}
initializeStyles();
return Object.assign(ui, { refLink });
}
initializeStyles = {
let initialized;
return () => {
if (initialized) return;
initialized = true;
const styles = html`<style>
.${ns} figcaption > *:first-child {
margin-block-start: 0;
}
.${ns}--full-width {
max-width: 100%;
}
.${ns}--full-width p,
.${ns}--full-width table,
.${ns}--full-width figure,
.${ns}--full-width figcaption,
.${ns}--full-width h1,
.${ns}--full-width h2,
.${ns}--full-width h3,
.${ns}--full-width h4,
.${ns}--full-width h5,
.${ns}--full-width h6,
.${ns}--full-width .katex-display {
max-width: 100%;
}
</style>`;
document.querySelector("head").append(styles);
invalidation.then(
() => styles.parentNode && styles.parentNode.removeChild(styles)
);
};
}
ns = {
const base = Inputs.text().classList[0];
return base.replace("oi-", "figure-");
}
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.
