Render calendar using plots

[kadale]

Using plot, is it possible to render calendar to match the below image?

[Fil]

Yes. Check Calendar Component / Observable | Observable for an example

[mbostock]

Also see

Plot: Calendar

[kadale]

Thanks @Fil and @mbostock for reference. I got the Y-axis legend, X-axis legend and plot data working. But I’m having difficulty rendering date per each cell as per reference picture.

One line calendar

[kadale]

Is my approach correct ? One line calendar / hashg | Observable

[kadale]

I looked at the Plot.Calendar function @ Plot: Calendar / Observable | Observable

function calendar({
  date = Plot.identity,
  inset = 0.5,
  ...options
} = {}) {
  let D;
  return {
    fy: {transform: (data) => (D = Plot.valueof(data, date, Array)).map((d) => d.getUTCFullYear())},
    x: {transform: () => D.map((d) => d3.utcWeek.count(d3.utcYear(d), d))},
    y: {transform: () => D.map((d) => d.getUTCDay())},
    inset,
    ...options
  };
}

It tried to modify this code to render only two months with all days next to each other. After 3 days of monkeying around. I figured this is too advanced for my brain. Any tips on how to get it render like this?