Javascript v3 Responsive.

Javascript v3 Responsive.html

    <script>
      // When the onresize event triggers, call vizResize.
      document.body.onresize = vizResize;

      // Resize the workbook appropriately without the need for refreshing.
      function vizResize() {
        vizWidth = window.innerWidth-27;
        vizHeight = window.innerHeight-27;

        // Deal with minimum allowable height.
        if ( vizHeight < minHeight )
          {
          vizHeight = minHeight;  
          }

        viz.width = vizWidth;
        viz.height = vizHeight;        

        // Set the div dimensions to that of the viz in case scrolling is needed.
        document.getElementById('tableauViz').style.width=viz.width;
        document.getElementById('tableauViz').style.height=viz.height;
      }
    </script>

    <script type="module">
      import { TableauViz } from "https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.js";

      // Variables for controling the functionality. 
      // Using "window." on some of these essentially makes them global so that they can be used in scripts outside of this module.
      const vizURL = "https://public.tableau.com/views/Regional_16766597857820/GlobalTemperatures"
      const toolbarPosition  = "bottom"              // Position of the toolbar. Options are bottom, top, hidden. Hidden not available on Tableau Public
      const hideTabs         = true;                 // Hide the tabs?
      window.minHeight = 0;                          // Minimum height of the viz. Defaulting to 0 since v3 handles this better.

      // Create the Tableau viz, making it global so the refresh script can use it.
      window.viz = new TableauViz();

      viz.src = vizURL;
      viz.toolbar = toolbarPosition;
      viz.hideTabs = hideTabs;

      var vizWidth = window.innerWidth-27;
      var vizHeight = window.innerHeight-27;

      // Deal with minimum allowable height.
      if ( vizHeight < minHeight )
        {
        vizHeight = minHeight;  
        }

      viz.width = vizWidth;
      viz.height = vizHeight;

      // Set the div dimensions to that of the viz in case scrolling is needed.
      document.getElementById('tableauViz').style.width=viz.width;
      document.getElementById('tableauViz').style.height=viz.height;
            
      document.getElementById("tableauViz").appendChild(viz);   
    </script>

    <!-- Don't set div width and height as we've done that above -->
    <div>
      <div id="tableauViz" style="margin: 0 auto;">
    </div>