<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>
</div>