Public
Edited
Jun 16, 2023
Insert cell
Insert cell
data = new Array(100).fill(0).map((d, i) => ({ a: i % 10, b: i % 20, c: Math.random() }))
Insert cell
function mark(d) {
return `<span style="display:inline-block;background-color:pink;width:10px;height:10px"></span>`;
}
Insert cell
function td(fn) {
return d => `<td>${fn(d)}</td>`;
}
Insert cell
{
const rows = [...new Set(data.map(d => d.a))];
const cells = data.map(td(mark)).join("");
return html`${cells}`;
}
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