Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 8, 2020
28 stars
names = ["Alice", "Bob", "Carlos"]
html`<ul>${names.map(name => html`
<li>My name is ${name}!</li>
`)}</ul>`
function click(name) {
input.value = name;
}
input = html`<input type=text readonly>`
html`<ul>${names.map(name => html`
<li>My name is ${name}! <a href="#" onclick=${() => click(name)}>Pick me.</a></li>
`)}</ul>`
htl = require("htl@0.2")
html = htl.html
html`<ul>${names.map(name => html`
<li>My name is ${name}! ${Object.assign(html`<a href="#">Pick me.</a>`, {onclick() { click(name)}})}</li>
`)}</ul>`
d3.create("ul")
.call(ul => ul.selectAll("li")
.data(names)
.join("li")
.text(name => `My name is ${name}! `)
.append("a")
.attr("href", "#")
.on("click", click)
.text("Pick me."))
.node()
d3 = require("d3-selection@1")
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.
