How to reprocuce a chart using d3 and grouped bar chart

I want to reproduce this image with D3.js:

Currently, my javascript code is this.

This is a short extract:

var margin = { top: 20, right: 20, bottom: 30, left: 40 },
        width = 800 - margin.left - margin.right,
        height = 400 - margin.top - margin.bottom;

    var x0 = d3.scaleBand().rangeRound([0, width], 0.5);
    var x1 = d3.scaleBand();
    var y = d3.scaleLinear().rangeRound([height, 0]);
    var xAxis = d3
        .axisBottom()
        .scale(x0)
        .tickFormat(d3.timeFormat("Week %V"))
        .tickValues(this.groupData.map((d) => d.key));

    var yAxis = d3.axisLeft().scale(y);

    const color = d3.scaleOrdinal(d3.schemeCategory10);

It gives me this basic result:

How should I edit my code in order to obtain both results ? Thank you

from How to reprocuce a chart using d3 and grouped bar chart