Notebooks 2.0 is here.

Read the preview announcement
The avatar for @mbostock
Mike Bostock
Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Feb 1, 2022
Importers
3 stars
Insert cell
Insert cell
html`<select>${values.map(v => `
<option value="${v}">${v}</option>`)}
</select>`
Insert cell
values = ["Foo", "Bar\"></option><option selected>Oops"]
Insert cell
Insert cell
html`<select>${values.map(v => {
const option = html`<option>`;
option.textContent = v;
return option;
})}</select>`
Insert cell
Insert cell
html`<select>${values.map(v => Object.assign(
html`<option>`, {textContent: v}
))}</select>`
Insert cell
Insert cell
html`<select>${values.map(v => `
<option value="${escapeHtml(v)}">${escapeHtml(v)}</option>`)}
</select>`
Insert cell
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
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