Render calendar using plots

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

1 Like

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


Also see

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.

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

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

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

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?