Grouped Stacked Bar Chart with D3 JS

Question

I have created two different stacked charts. I want to combine them so that they can be visualized in a single chart.

The data I have looks like:

I divided the data into two parts, one containing the male data and the other containing female data ('M - ' and 'F - ' headers), and created two different charts:

The code for creating the charts are:

m_data = data.map((d) => ({
  Characteristic: d["Characteristic"],
  "US Citizen or PR": d["M - US Citizen or PR"],
  "Temp VISA Holder": d["M - Temp VISA Holder"],
  Unknown: d["M - Unknown"]
}));
m_cat = data.columns.slice(1,4).map((s) => s.slice(4));
m_doc = m_cat.flatMap((CitizenStatus) =>
  m_data.map((d) => ({
    FieldOfStudy: d.Characteristic,
    CitizenStatus,
    Count: d[CitizenStatus]
  }))
);
Plot.plot({
  width,
  y: { tickFormat: "s", domain: [0, 8000] },
  color: { scheme: "spectral", domain: m_cat },
  marks: [
    Plot.barY(m_doc, {
      x: "FieldOfStudy",
      y: "Count",
      fill: "CitizenStatus"
    }),
    Plot.ruleY([0])
  ]
});

Plot.plot({
  width,
  y: { tickFormat: "s", domain: [0, 8000] },
  color: { scheme: "spectral", domain: f_cat },
  marks: [
    Plot.barY(f_doc, {
      x: "FieldOfStudy",
      y: "Count",
      fill: "CitizenStatus"
    }),
    Plot.ruleY([0])
  ]
});

I want to create a grouped stacked chart instead of two separate stacked chart, so that they can be visualized together. The code for the two separate charts are in the observable notebook.