countries = FileAttachment("countries.json").json()
countries
Type Table, then Shift-Enter. Ctrl-space for more options.
d3.map(countries, (country) => `${country.label} (${country.code})`)
d3.filter(countries, (country) => country.suggested)
countries.reduce((acc, country) => {
acc[country.code] = country.label;
return acc;
}, {});
d3.reduce(countries, (acc, country, index) => {
acc[country.code] = country.label
return acc
}, {})
d3.merge([[1], [2, 3]])
d3.merge([[1], [2, 3], [1, 2, 3]])
d3.merge(new Set([new Set([1]), new Set([2, 3])]))
d3.merge([[1, 2], [3, [4, 5]]])
d3.merge([[1, 2], [3], d3.merge([[4, 5], [6, 7]])]) // lol 😝
d3.cross([1, 2], ["x", "y"])
d3.cross([1, 2], ["x", "y"], (a, b) => a + b)
d3.cross([{ id: 1}, {id: 2 }], ["x", "y"], (a, b) => `${a.id}-${b}`)
d3
.select(html`<svg width=100 height=100>`)
.call((svg) =>
svg
.selectAll("circle")
.data(d3.cross(d3.range(10), d3.range(10)))
.join("circle")
.attr("transform", ([i, j]) => `translate(${i * 10},${j * 10})`)
.attr("cx", 5)
.attr("cy", 5)
.attr("r", 2.5)
.style("fill", ([i]) => (i <= 4 ? "green" : "red"))
)
.node()
d3.pairs([1, 2, 3, 4])
d3.pairs([1]) // less than two elements
d3.pairs([{ name: "Xavi" }, { name: "Messi" }, { name: "Iniesta" }])
d3.pairs(
[{ name: "Rice" }, { name: "Beans" }, { name: "Plantain" }],
(a, b) => `${a.name} & ${b.name}`
)
d3.pairs([{name: "John", yob: "1993"}, {name: "Jane", yob: "1995"}, {name: "Bob", yob: "1998"}], (a, b) => `${b.name} is older than ${a.name} by ${b.yob - a.yob} years.`)
d3.zip(["Messi", "Xavi", "Iniesta"], [10, 6, 8])
d3.transpose([
["Messi", "Neymar", "Suarez"],
[10, 11, 9]
])
d3.transpose([
["Messi", 10],
["Neymar", 11],
["Suarez", 9]
])
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.
