Public
Edited
Oct 26, 2023
1 fork
31 stars
Insert cell
Insert cell
Insert cell
map = new Map([["foo", 1], ["bar", 2]])
Insert cell
d3.selectAll("div").data(map)
Insert cell
Insert cell
d3.selectAll(document.links)
Insert cell
Insert cell
[...d3.selectAll("div")]
Insert cell
Insert cell
Insert cell
d3.create("button")
.on("mouseover mouseout mousedown click", event => event.currentTarget.textContent = event.type)
.text("click me")
.node()
Insert cell
Insert cell
d3.create("button")
.datum(0)
.on("click", (event, count) => d3.select(event.currentTarget)
.datum(count + 1)
.text(count => `${count} clicks`))
.text("click me")
.node()
Insert cell
Insert cell
Insert cell
d3.create("button")
.on("click", event => event.currentTarget.textContent = `click at ${d3.pointer(event)}`)
.text("click me")
.node()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.create("ul")
.call(ul => ul
.selectChildren()
.data([1, 2, 3])
.join("li")
.text(d => d))
.node()
Insert cell
Insert cell
d3.selection().merge(d3.transition())
Insert cell
Insert cell
d3.selection().merge(d3.transition().selection())
Insert cell
Insert cell
{
const s = d3.selection();
return s.selection() === s;
}
Insert cell
Insert cell
d3 = require("d3-selection@2", "d3-transition@2")
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