howTo()
howTo('test')
howTo('test', {title:'Hint'})
howTo('test', {title:'Hint', open: true})
howTo(`
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
\`\`\`someSyntax
aq.from(data)
.derive({ Year: aq.escape ( d => d.ColumnName.someMethod() ) })
\`\`\`
`, {title:'How can I do this?', open: true}
)
function howTo(content, {title='How to... 🤔' , open=false} = {}) {
return htl.html`
<details open=${open} style="max-width: 640px; background: #fffced; box-sizing: border-box; padding: 10px 20px;">
<summary style="font-weight: bold; cursor: pointer; outline: none;">
${title}
</summary>
<div style="margin-bottom: -1em;">${md`
${ !!content ? content : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras pulvinar mattis nunc sed blandit. Nunc vel risus commodo viverra maecenas. Eget magna fermentum iaculis eu. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Nunc eget lorem dolor sed viverra ipsum. Porttitor rhoncus dolor purus non enim praesent. Amet venenatis urna cursus eget nunc scelerisque viverra mauris in. In iaculis nunc sed augue lacus. Suspendisse faucibus interdum posuere lorem. Sit amet facilisis magna etiam tempor orci eu. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Magna sit amet purus gravida quis blandit. Risus pretium quam vulputate dignissim suspendisse in est.'
}
`}</div>
</details>`;
}
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.
