Published
Edited
Apr 25, 2022
1 fork
2 stars
d3Axis = FileAttachment("d3-axis@1.js").url().then(require) // built from the dev branch
{
const svg = d3.create("svg").attr("height", 30);
svg.append("g").call(
d3Axis.axisBottom(d3.scaleLinear([0, 10], [20, 270])).tickSize(() => 10) // 🌶
);
return svg.node();
}
{
const svg = d3.create("svg").attr("height", 60);
svg.append("g").call(
d3Axis
.axisBottom(d3.scaleLinear([0, 10], [20, 270]))
.tickSize((d, i) => 5 * i)
);
return svg.node();
}
{
const svg = d3.create("svg").attr("height", 30);
svg
.append("g")
.call(d3Axis.axisBottom(d3.scaleLinear([0, 10], [20, 270])).tickSize(10));
return svg.node();
}
{
const majorTickNumber = 5;
const svg = d3.create("svg").attr("height", 30);
svg
.append("g")
.call(d3Axis
.axisBottom(d3.scaleLinear([0, 10], [20, 270]))
.tickSize((d, i) => i % majorTickNumber ? 4 : 10)
.tickFormat((d, i) => i % majorTickNumber ? null : d));
return svg.node();
}
{
const majorTickNumber = 5;
const svg = d3.create("svg").attr("height", 40);
svg
.append("g")
.call(d3Axis
.axisBottom(d3.scaleLinear([0, 10], [20, 270]))
.tickSize((d, i) => i === majorTickNumber ? 25 : 10)
.tickFormat((d, i) => i === majorTickNumber ? `Long label ${d}` : d));
return svg.node();
}
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.
