# Step 1: Import needed libraries, we're going to use display to show an HTML
from IPython import display
#Import library for explanation
from IPython.display import Image
# Step 2: Identify the structure
# Define a iFrame variable to store the whole embedding script between (''')
# i.e.
# iFrame = '''
# {HTML Script to embedding}
# '''
# Use display.HTML() function to show the iFramed defined:
# display.HTML(iFrame)
# Step 3: Getting the Tableau Public HTML
# (Optional) 3.1 - If you have no a Tableau Public Profile, creation is for free,
# Tableau Public is Free and don't require license, this software allows you to upload public data at Tableau Public (server site).
# 3.1 - Go to your tableau profile or the profile you want to embed a viz, you can use mine as example: "https://public.tableau.com/app/profile/ivanchavez"
Image(filename='TP Profile.png')
# 3.2 - Click the Viz, Dashboard or Stories collection you want to show in a notebook.
# 3.3 - Once at viz, click at share icon top right screen
# 3.4 - At pop up "Share" menu, copy the Embed Code.
Image(filename='TP Shared.png')
# Step 4: Replace embed code from step 2
# Copy and uncomment the code provided in step 2, and replace the copy code from step 3.4 at {HTML Script to embedding}
#---
iFrame='''
<div class='tableauPlaceholder' id='viz1652495951422' style='position: relative'><noscript><a href='#'><img alt='[DH1] Summary ' src='https://public.tableau.com/static/images/Un/UnDosTresPurchasesUserAnalytics/DH1Summary/1_rss.png' style='border: none' /></a></noscript><object class='tableauViz' style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='UnDosTresPurchasesUserAnalytics/DH1Summary' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https://public.tableau.com/static/images/Un/UnDosTresPurchasesUserAnalytics/DH1Summary/1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en-US' /></object></div> <script type='text/javascript'> var divElement = document.getElementById('viz1652495951422'); var vizElement = divElement.getElementsByTagName('object')[0]; if ( divElement.offsetWidth > 800 ) { vizElement.style.width='800px';vizElement.style.height='827px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='800px';vizElement.style.height='827px';} else { vizElement.style.width='100%';vizElement.style.height='2877px';} var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>
'''
display.HTML(iFrame)
#---
# Et voila! You're welcome! 🍻
# 💡 Please notice all filters, tooltip and dashboard interactivity are fully unlocked, as if you were checking this viz at public.
# If you're looking to share your Tableau Viz in a Notebook as first approach, be aware to set up the right resolution.
# IVAN CHAVEZ - https://www.linkedin.com/in/ivanchavezduarte/ 👈