I am working on creating a component that includes scatterplots for multiple datasets and KDE (Kernel Density Estimation) plots for the x and y-coordinates of those datasets, in React with TypeScript using D3.js.
So far, I have successfully implemented the KDE plot and the scatter plot. However, I am having trouble aligning the KDE plots to the right and top edges of my scatterplot, similar to how scatterhist produces output in MATLAB.
This is the plot I have been able to make so far, but the KDE Plots are not getting aligned to the top and right edges.

I tried using the .attr(“transform”, translate(${width},${0})) and other such combinations but I have not been able to place it within the svg canvas.

 const g = svg
      .attr("width", width + MARGIN.left + MARGIN.right)
      .attr("height", height + MARGIN.top + MARGIN.bottom)
      .append("g")
      .attr("transform", `translate(${MARGIN.left},${MARGIN.top})`);

const kdeDataX = kdeX(data.map((d) => d.x));
      const lineX = d3
        .line()
        .x((d) => xScale(d[0]))
        .y((d) => yScale(d[1]))
        .curve(d3.curveBasis);
      g.append("path")
        .datum(kdeDataX)
        .attr("class", "kde-x")
        .attr("d", lineX)
        .attr("fill", "none")
        .attr("stroke", color)
        .attr("stroke-width", 1);

      const kdeDataY = kdeY(data.map((d) => d.y));
      const lineY = d3
        .line()
        .x((d) => xScale(d[1]))
        .y((d) => yScale(d[0]))
        .curve(d3.curveBasis);

      g.append("path")
        .datum(kdeDataY)
        .attr("class", "kde-y")
        .attr("d", lineY)
        .attr("fill", "none")
        .attr("stroke", color)
        .attr("stroke-width", 1);

I want it to look like this