Published unlisted
Edited
May 23, 2019
Insert cell
Insert cell
htm`<h1 onclick=${function() { this.style.color = "red"; }} style=${{color: "green"}}>${`<hello>`}</h1>`
Insert cell
viewof checked = htm`<input type=checkbox checked />`
Insert cell
checked
Insert cell
htm`<p>hello ${new Map([[1, 2]])} world</p>`
Insert cell
htm`<table>
<thead>
<tr><th>Sport</th><th>Athletes</th></tr>
</thead>
<tbody>${Array.from(athletesBySport, ([key, values]) => html`
<tr>
<td>${key}</td>
<td>${values.map(d => d.name).join(", ")}</td>
</tr>`)}</tbody>
</table>`
Insert cell
hx`<table>
<thead>
<tr><th>Sport</th><th>Athletes</th></tr>
</thead>
<tbody>${Array.from(athletesBySport, ([key, values]) => html`
<tr>
<td>${key}</td>
<td>${values.map(d => d.name).join(", ")}</td>
</tr>`)}</tbody>
</table>`
Insert cell
import {athletesBySport} from "@d3/d3-group-d3-rollup"
Insert cell
htm = {
const [htm, hyperscript] = await Promise.all([
require("htm@2/mini/index.umd.js"),
require("https://bundle.run/hyperscript@2")
]);
return htm.bind(hyperscript);
}
Insert cell
hx = {
const [hx, hyperscript] = await Promise.all([
require("https://bundle.run/hyperx@2"),
require("https://bundle.run/hyperscript@2")
]);
return hx(hyperscript);
}
Insert cell

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.
Learn more