Image Sharpeningd3.blurd3.rankd3.flatGroup, d3.flatRollupd3.moded3.groupSortSet Operationsd3.groups as a hierarchyd3.fsum, d3.AdderTime thresholds for d3.bind3.cumsumTidy Stacked Area ChartMerging Duplicate Valuesd3.zip, d3.transposed3.bind3.ticksd3.mean, d3.median, and friendsd3.quickselectd3.bisectd3.sumd3.group, d3.rollup, d3.indexd3.countd3.min, d3.max, d3.extentd3.least, d3.greatestd3.pairsd3.ascending, d3.descendingd3.merged3.ranged3.permuted3.shuffled3-array 2.0
d3.cross
d3.cross([1, 2, 3], ["x", "y"])
d3.cross([1, 2, 3], [4, 5, 6], [7, 8, 9])
d3.cross()
d3.cross([1, 2, 3])
{
const product = [];
for (let a of [1, 2, 3]) {
for (let b of ["x", "y"]) {
product.push([a, b]);
}
}
return product;
}
{
const product = [];
for (let a of [1, 2, 3]) {
for (let b of [4, 5, 6]) {
for (let c of [7, 8, 9]) {
product.push([a, b, c]);
}
}
}
return product;
}
d3.select(html`<svg width=100 height=100>`)
.call(svg => svg.selectAll("g")
.data(d3.range(10))
.join("g")
.attr("transform", j => `translate(0,${j * 10})`)
.selectAll("circle")
.data(d3.range(10))
.join("circle")
.attr("transform", i => `translate(${i * 10},0)`)
.attr("cx", 5)
.attr("cy", 5)
.attr("r", 2.5))
.node()
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))
.node()
d3.cross([1, 2], ["x", "y"], (a, b) => `${a}/${b}`)
svg`<svg width=400 height=400 viewBox="0 0 10 10">
${d3.cross(
d3.range(10),
d3.range(10),
(i, j) => svg`<rect x=${i} y=${j} width=0.9 height=0.9 fill=#9${i}${j}>`
)}`
svg`<svg width=400 height=400 viewBox="-1 -1 5 5">
${d3.cross(
d3.range(4),
d3.range(4),
d3.range(4),
(i, j, k) =>
svg`<rect
x=${i - k / 3}
y=${2 - j + k / 3} width=0.9 height=0.9
fill=#${9 - 2 * i}${9 - 2 * j}${9 - 2 * k}
stroke=white stroke-width=0.01>`
)}`
${d3.cross(
[
"l’accecante / globo / di fuoco",
"si espande / rapidamente",
"trenate volte / piú luminoso / del sole"
],
[
"la testa / premuta / sulla spalla",
"i capelli / tra le labbra"
],
[
"mentre la moltitudine / delle cose / accade",
"io contemplo / il loro ritorno",
"malgrado / che le cose / fioriscano"
],
(a, b, c) => `_${a}<br>${b}<br>${c}_`
).join("\n\n")}
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.
