Public
Edited
Apr 2
n = 2000
Plot.plot({
x: {
domain: [1, n * 1.1],
},
marks: [
Plot.axisX({
tickLabel: {dy: 10},
tickValues: getTicks(2000, 10),
tickFormat: null
})
]
});
function getTicks(max, count = 10) {
let ticks = d3.ticks(1, max, count); // Generate approximately `count` ticks
if (ticks[0] !== 1) ticks = [1, ...ticks]; // Ensure 1 is the first tick
return ticks.slice(0, count); // Ensure exactly `count` ticks
}
layout = {
// Set the dimensions of the SVG container
const width = 1000;
const height = 40;
const svg = d3.create("svg")
.attr('width', width)
.attr('height', height)
.attr("viewBox", [0, 0, width, height])
// Create the x scale
const xScale = d3.scaleLinear()
.domain([1, n * 1.1]) // Set the domain
.range([0, width]); // Set the range based on the width
// Function to generate ticks (same as before)
function getTicks(max, count = 10) {
let ticks = d3.ticks(1, max, count - 1); // Generate ticks excluding 1
return [1, ...ticks]; // Ensure 1 is always the first tick
}
// Create the x-axis using D3
const xAxis = d3.axisBottom(xScale)
.tickValues(getTicks(n*1.1, 10)) // Explicitly set tick values
.tickSize(2) // Set tick size
.tickFormat(d3.format('d')); // Ensure the ticks are whole numbers
// Append the axis to the SVG container
svg.append('g')
.attr('transform', `translate(0, ${height / 2})`) // Center the axis vertically
.call(xAxis);
// Adjust tick labels if necessary (e.g., dy adjustment for vertical positioning)
svg.selectAll('.tick text')
.attr('dy', 10); // Adjust vertical position of tick labels
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.
