The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Calendar componentExample cohort analysis in SQLUser Retention: Cohort Grid ComponentMultidrag AxisCash FlowTable ValidatorSurvey Visualization SuggestionsSurvey Free Response ComponentSurvey Question SelectorSurvey Matrix CompareSurvey Pie ChartSurvey HistogramSurvey DataSurvey Component LibraryGitHub API HelpersDraggable Cash Flow Curve
Templates: Table of Instructions
instructions = md`---
## How to add instructions
### 1. Import the function
### 2. Write your instructions
### 3. Call the function`
toc = instructions => {
const tocWidth = 200;
const paragraphWidth = 640;
if (width < paragraphWidth + tocWidth) return "";
const instructionsTitle = instructions.querySelector("h2").innerText;
const headers = Array.from(document.querySelectorAll("h2, h3")).map(d => [d.tagName, d.innerText])
const start = headers.indexOf(headers.find(d => d[1] === instructionsTitle))
const end = headers.indexOf(headers.find((d, i) => d[0] === "H2" && i > start))
const subheds = headers.slice(start + 1, end !== -1 ? end : undefined)
return htl.html`<div style=${{
width: `${tocWidth}px`,
float: "right",
fontFamily: "var(--sans-serif)",
fontSize: "12px",
marginTop: "12px",
zIndex: 1,
position: "relative",
}}>
<strong>${instructionsTitle}</strong>
${subheds.map(d => htl.html`<div>${d[1]}</div>`)}
<div><a href="#instructions">details…</a></div>
</div>`
}
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.
