Public
Edited
Dec 23, 2022
1 star
Time scale ticks
startDate = new Date('01/20/2022')
endDate = new Date('02/10/2022')
timeScale = d3.scaleTime().domain([startDate, endDate]).range([0, width]);
tickNum = 5
tickDates = timeScale.ticks(tickNum);
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 26]);
svg.append("g")
.call(d3.axisBottom().scale(timeScale).tickFormat(formatDate) );
return svg.node();
}
width = 1000
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, 26]);
svg.append("g")
.call(
d3.axisBottom(timeScale)
.tickValues(interValArray.map(d => new Date(d)))
.tickFormat(formatDate)
.tickSizeInner(5)
.tickSizeOuter(0)
//.tickSize(5)
.tickPadding(5)
)
//.call(g => g.select(".domain")
//.remove())
return svg.node();
}
dayCount = d3.timeDay.count(startDate, endDate)
everyInterval = Math.floor(dayCount/tickNum)
intervalF = d3.timeDay.filter(d => d3.timeDay.count(0, d) % (everyInterval - 1) === 0)
interValArray = timeScale.ticks(intervalF)
formatDate = (date) => {
return date.toLocaleString("en", {
month: 'short',
day: '2-digit',
year: 'numeric',
})
}
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.
