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.crossd3.ascending, d3.descendingd3.merged3.ranged3.permuted3.shuffled3-array 2.0
d3.pairs
d3.pairs([1, 2, 3, 4])
d3.pairs([])
d3.pairs([1])
prices = [100, 110, 112, 115, 123, 122, 127]
changes = d3.pairs(prices, (a, b) => (b - a) / a)
html`<svg width=640 height=120 stroke=black>
<marker id=arrow markerHeight=10 markerWidth=10 refX=9 refY=3 orient=auto>
<path d="M0,0L9,3L0,6Z" />
</marker>
${d3.pairs(
Array.from(
{length: 20},
(_, i) => [i / 10 * 640, Math.random() * 120]
),
([x1, y1], [x2, y2]) => svg`<line
marker-end=url(${location}#arrow)
x1=${x1} y1=${y1}
x2=${x2} y2=${y2}>`
)}
</svg>`
rsp = ["rock", "scissors", "paper"]
d3.pairs(rsp.concat(rsp[0]), (a, b) => `${a} beats ${b}`)
d3.pairs(
"🌝🌝🌝🌝🌝🌝🌝🌝🌚🌚🌚🌚🌚🌚🌝🌚🌚🌚🌚🌚🌚🌝🌝🌝🌝🌝🌚🌚🌚🌚🌝🌝",
d3.descending
)
differences = {
const numbers = Float64Array.from({length: 100000}, Math.random);
return d3.pairs(numbers, (a, b) => a - b);
}
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.
