Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published unlisted
Edited
Jan 22, 2019
5 stars
viewof data = table([
{"Borough name": "Brent", code: 1, value: 1234},
{"Borough name": "Camden", code: 2, value: 432},
{"Borough name": "Haringey", code: 3, value: 423}
])
data
function table(data, keys = Object.keys(data[0])) {
return Object.assign(html`<table>
<thead><tr>${keys.map(key => {
return Object.assign(html`<th>`, {
textContent: key
});
})}</tr>
<tbody>${data.map(d => {
return html`<tr>${keys.map(key => {
return Object.assign(html`<td contenteditable>`, {
textContent: d[key] = d[key] + "", // Coerce to string.
oninput: event => d[key] = event.target.textContent
});
})}`;
})}
</table>`, {
value: data
});
}
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.
