The avatar for @d3
D3
Bring your data to life.
Public
d3-array
Edited
Oct 24, 2023
Fork of d3.bisect
•
2 forks
18 stars
d3-array
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.bin
d3.ticks
d3.mean, d3.median, and friendsd3.quickselectd3.bisectd3.sumd3.group, d3.rollup, d3.indexd3.countd3.min, d3.max, d3.extentd3.least, d3.greatestd3.pairsd3.crossd3.ascending, d3.descendingd3.merged3.ranged3.permuted3.shuffled3-array 2.0
Insert cell
Insert cell
Insert cell
start = 0
Insert cell
stop = 10
Insert cell
count = 100
Insert cell
ticks = d3.ticks(start, stop, count)
Insert cell
visualize(ticks)
Insert cell
Insert cell
d3.ticks(-10, 10, 4)
Insert cell
d3.ticks(0, 10, 3)
Insert cell
d3.ticks(0, 1, 5)
Insert cell
d3.ticks(0, 1000, 20)
Insert cell
Insert cell
Insert cell
ticks_reversed = d3.ticks(8.5, 0.65, 100)
Insert cell
visualize(ticks_reversed)
Insert cell
Insert cell
d3.tickIncrement(0, 10, 10)
Insert cell
d3.tickIncrement(0, 10, 100000)
Insert cell
Insert cell
d3.tickStep(0, 10, 100000)
Insert cell
Insert cell
d3 = require("d3-array@3")
Insert cell
function visualize(ticks) {
return svg`<svg width=${width} height=30 style="font:12px sans-serif; text-anchor:middle">

${ticks.map(
d =>
svg`<line y2=${d == (d | 0) ? 10 : 6} transform="translate(${10 +
(d * (width - 20)) / 10},0)" stroke="black" />`
)}

${ticks
.filter(d => d == (d | 0))
.map(
d =>
svg`<text y=28 transform="translate(${10 +
(d * (width - 20)) / 10},0)" fill="black">${d}</text>`
)}

</svg>`;
}
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