htl.html`<i>Hello world</i>`
htl.html.fragment`<i>Hello world</i>`
htl.html`<ul>
${d3.range(3).map(
(d) => htl.html`
<li>Item ${d}</li>
`
)}
</ul>`.outerHTML
htl.html`<ul>
${d3.range(3).map(
(d) => htl.html.fragment`
<li>Item ${d}</li>
`
)}
</ul>`.outerHTML
htl.html`<table>
<tr><th>title</th></tr>
${htl.html`
<tr><td>hello</td></tr>
<tr><td>world</td></tr>
`}
</table>`
htl.html`<table>
<tr><th>title</th></tr>
${htl.html.fragment`
<tr><td>hello</td></tr>
<tr><td>world</td></tr>
`}
</table>`
htl.html`<dl>
${[
["hello", "hel·lo | həˈlō, heˈlō | (also hallo or mainly British hullo) — exclamation used as a greeting or to begin a phone conversation: hello there, Katie!"
],
["world", "world | wərld | noun — 1 (usually the world) the earth, together with all of its countries, peoples, and natural features: he was doing his bit to save the world."
]
].map(([word, def]) => htl.html`
<dt>${word}</dt>
<dd>${def}</dd>
`)}
</dl>`
htl.html`<dl>
${[
["hello", "hel·lo | həˈlō, heˈlō | (also hallo or mainly British hullo) — exclamation used as a greeting or to begin a phone conversation: hello there, Katie!"
],
["world", "world | wərld | noun — 1 (usually the world) the earth, together with all of its countries, peoples, and natural features: he was doing his bit to save the world."
]
].map(([word, def]) => htl.html.fragment`
<dt>${word}</dt>
<dd>${def}</dd>
`)}
</dl>`
<style>
dl > dt { font-weight: bold; }
</style>
toph = htl.html.fragment`<i>Hello world</i>`
((d) => (d.appendChild(toph.cloneNode(true)), d))(
document.createElement("span")
)
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.
