Hi there! I wanted to share with you part of what I learned last week from Jonathan MacDonald . I’ve never done anything like this, so I was really excited when we were taught how to embed a live interactive tableau dashboard onto a html web page.
We were recommended to use Sublime Text which is a text editor application, similar to the Notepad app that comes pre-installed in most computers. From the little use I’ve had with it, some advantages I have experienced with Sublime Text is that it allows some shortcuts and has colour coding to make work clearer.
After installing the application, open up a new window. Click View –> Syntax –> HTML.
Next begin typing <html> until a drop down shows and hit tab on your keyboard. Sublime should have filled in the basis for what we need. Here’s what that should look like:
You can type in whatever you want for the title of the webpage (this will show as the tab title on your browser). I’m going to title mine “Embedded viz example”. Simply type this in between <title> and </title>.
You can also add a header for your webpage by typing <h5></h5> after <body> in line 7. I’m going to type “How cool is this!?” between the
<h5> and </h5> for my page header. This is completely optional and can be skipped, especially since most dashboards already have a title (at least they should!). It should now look something like this:
Now you need to open your viz on tableau public and click the share button on the bottom right. Copy the Embed Code and paste this into a new line after your line 7. Now it might look like a mess, but this won’t really make a difference to the end result. If you want to neaten this up you can hit enter before every “<“. Here’s how mine looks after this final step:
All you have to do now is save this somewhere on your computer. When you open the file it should open in your browser as a html web page that you can use in web posts or your own website!
Thanks for reading!