Public
Edited
Mar 18, 2024
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const start = 2,
stop = 10,
step = 2;
return d3.range(start, stop, step); // Go from _start_ to _stop_ in steps of _step_
}
Insert cell
Insert cell
{
const stop = 5;
return d3.range(stop);
}
Insert cell
d3.range(5, -1, -1)
Insert cell
Insert cell
d3.range(0, 1, 0.2)
Insert cell
d3.range(0.3, 1, 0.2)
Insert cell
Insert cell
Insert cell
Insert cell
ticks1 = {
const start = 1;
const stop = 6;
const count = 4;
return d3.ticks(start, stop, count);
}
Insert cell
visualize(ticks1)
Insert cell
ticks2 = d3.ticks(0, 1, 10)
Insert cell
visualize(ticks2)
Insert cell
ticks3 = d3.ticks(-10, 10, 3)
Insert cell
Insert cell
ticks_reversed = d3.ticks(10, 0, 100)
Insert cell
visualize(ticks_reversed)
Insert cell
Insert cell
Insert cell
{
const start = 0;
const stop = 10;
const count = 5;

return {
ticks: d3.ticks(start, stop, count),
tickIncrement: d3.tickIncrement(start, stop, count)
};
}

Insert cell
Insert cell
Insert cell
Insert cell
{
const start = 1;
const stop = 9;
const count = 20;

return {
ticks: d3.ticks(start, stop, count),
tickIncrement: d3.tickIncrement(start, stop, count)
};
}
Insert cell
Insert cell
Insert cell
d3.tickStep(0, 10, 5)
Insert cell
Insert cell
{
const start = 9;
const stop = 3;
const count = 20;

return {
ticks: d3.ticks(start, stop, count),
tickStep: d3.tickStep(start, stop, count)
};
}
Insert cell
Insert cell
Insert cell
{
const start = 1;
const stop = 9;
const count = 5;

return {
ticks: d3.ticks(start, stop, count),
nice: d3.nice(start, stop, count)
};
}
Insert cell
Insert cell
Insert cell
Insert cell
// https://observablehq.com/@d3/d3-ticks#visualize
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