Mid align axisX in a plot

I build a gantt timeline using plot in this notebook - Vacation Gantt / hashg | Observable

I’m trying to add 2 plot.axisX to this plot

  1. representing the month
  2. Representing Date & Day of the week.

I’m able to get the Date & Week rendered.

But I’m having challenge representing the month above it. Similar to this representation.

Thanks in advance.


It’s possible, but pretty tricky, to do exactly what you’re describing. You’ll need to do some date math using d3-time to compute the middle of the months, intersected with the domain of your data. I’ve compiled a few techniques that might be relevant for you here:

An easier place to start might be to just label the start of the months with a separate axis or a multi-line tick format.