I’m trying to implement a heat map in D3+reactjs with grouped/multi-level axes displayed in opposite sides. Year labels on top x-axis, day labels on bottom x-axis and months on y-axis scale.
Also separate the years with some line separators

I did try this –

const yearScale = d3
      .scaleBand()
      .domain(data.map((d) => d.year))
      .range([0, width])
      .padding(0.1);
const dayScale = d3
      .scaleBand()
      .domain(days)
      .range([0, yearScale.bandwidth()])
      .padding(0.1);
....
   g.append("g").attr("class", "year-axis").call(d3.axisTop(yearScale));

    g.selectAll(".day-axis")
      .data(data.map((d) => d.year))
      .enter()
      .append("g")
      .attr("class", "day-axis")
      .attr("transform", (d) => `translate(${yearScale(d)}, ${height})`)
      .call(d3.axisBottom(dayScale));

But I’m getting separate day axis generated for each year. Output looks like – Heatmap
Full code is available in here – CodeSandbox