Tableau API and Scrollama on Javascript. How do I make the Tableau graph appear on the fixed side?

I want to be as clear as possible as this is a specific question, please bear with me: Javascript's Scrollama allows you to scroll while graphs appear/disappear on a fixed space on the screen according to the text "step" you're in. I want to introduce Tableau graphs on that fixed space, but when I enter them (as below) they appear on the text side. I think this is because the API does it through getElementbyID("tableauViz"). The only way I know is that the id=tableauViz is placed within the HTML, and that is why it appears on the text part. But Scrollama needs it to be inside the function drawimages() in Javascript for it to appear on the images side. Do you know of a way of writing this on Javascript so that Tableau appears on the images side? Thank you so much for the help you can provide!

The Javascript function drawimages() {{

    let tableauPlaceholder = document.getElementById("tableauViz");
    let url = "https://public.tableau.com/views/Covid19NYCExpenditures/Dashboard1"

    let options = {
            hideTabs: true,
            hideToolbar: true,
            onFirstInteraction: function () {
                    console.log("My embbed");
                    workbook = viz.getWorkbook();
                    activeSheet = workbook.getActiveSheet();
            }
    };

    viz = new tableau.Viz(tableauPlaceholder, url, options);

}

}

The HTML

<script type="module">

// async load local data file d3.csv('./data/fatal-police-shootings-data.csv') .then(data => {

  // finding the height and width of the container
  const container = document.getElementById('graphs')
  const width = container.offsetWidth
  const height = container.offsetHeight
  console.log = container
  // scrollama initialization
  // API: https://github.com/russellgoldenberg/scrollama#api
  const scroller = scrollama();
  scroller
    .setup({
      step: ".step",
      offset: 0.5
    })
    // the action that happens when you step into a step
    .onStepEnter(({element, index, direction}) => {

      // cleaning svg with animation, graphs slowly disappear
      d3.select("#graphs").select("svg")
        .transition()         // call transition method
        .duration(500)        // transition duration
        .style("opacity", 0)  // transition object
      
      // timeout until the end of the animation
      setTimeout(() => {
        // removal of svg element and tooltip if any
        d3.select("#graphs").select("svg").remove()
        d3.select(".d3-tip").remove()

        // creation of svg in #graphs container
        const svg = d3.select('#graphs')
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .style("overflow", "visible")
          .style("display", "block")

        // drawing one or another graph depending on the step number
        switch (element.dataset.step) {
          case '1':
            drawimages({svg, width, height, data})
          break;
          case '2':
            drawimages2({svg, width, height, data})
          break;
          case '3':
            drawimages3({svg, width, height, data})
          break;
          case '4':
            drawLineChart({svg, width, height, data})
          break;
          case '5':
            drawDonutChart({svg, width, height, data})
          break;
          case '6':
            drawimages4({svg, width, height, data})
          break;
          case '7':
            drawBarChartMia2({svg, width, height, data})
          break;
        }
      }, 500)
    })
})