Using GitHub Pages to host your visualizations

Back in December I shared a viz created on Tableau Public sumoviz.org but I did that using a custom domain. I was inspired by some of the visualizations I often see from Information is Beautiful as they have their own domain and are shared as a project.

While researching I came across a simple and cheap way to do this. If however you only want to share your visualization without being in the Tableau Public Website here’s the way to do it:

Add the following parameter to the end of the URL: &:showVizHome=no

Like this: https://public.tableau.com/views/TopBottomSales_1/Sheet1?:display_count=y&:origin=viz_share_link&:showVizHome=no

GitHub Method

If you bought a domain name or prefer to create a specific link for people to access your visualization here’s how to do it.

You’ll need:

  1. GitHub account

  2. GitHub desktop

  3. Visual Studio Code

Using GitHub you’ll need an account here’s a handy tutorial to get you started with GitHub Desktop.

After sign-in we will need to create a new repository.

You should then see a new repository for your visualization.

We now need a file that will contain our code. There are multiple ways of doing this, I prefer to do it on the web version of GitHub. Create new file. index.html

At the bottom of the page, hit commit.

Back to GitHub Desktop, click fetch and you should see an indication of a change in the master asking if you want to pull from origin. Click Pull from Origin. This means that your newly created index.html file is now synced to your machine.

You can check by clicking Show Explorer.

Code to embed your visualization

Click Open in Visual Studio Code and paste the following code in the blank doc. Replace the viz under URL with the link to the viz you would like to embed.

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>

    <script type="text/javascript"
	    src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <script type="text/javascript">
        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "https://public.tableau.com/views/LeMans_0/24hrsLeMans",
                options = {
                    hideTabs: true,
                    onFirstInteractive: function () {
                        console.log("Run this code when the viz has finished loading.");
                    }
                };

            var viz = new tableau.Viz(containerDiv, url, options);
            // Create a viz object and embed it in the container div.
        }
    </script>
</head>

<body onload="initViz();">
    <div id="vizContainer" style="width:800px; height:700px;"></div>
</body>

</html> 

Save in Visual Studio Code and go back to GitHub Desktop.

As you can see, GitHub Desktop notices a new change. Click commit to master on the bottom left hand-side.

We’re almost there, but currently GitHub doesn’t know of the changes we’ve made, they only exist on our laptop. After committing above a new screen shows to prompt you to push to origin.

Go back to GitHub on the web, refresh the page and you should see a recent change in your index.html file. You can always click on it and see the code that you added earlier.

GitHub Pages

In GitHub on the browser we now need to enable GitHub Pages for this repository, in essence use GitHub to create a link that we can share and use GitHub as a host for our HTML code. To do that we need to follow the next steps:

Settings > Options > Scroll down to GitHub Pages > Source > Master Branch

Once saved, go back to Settings and you should see a success message.

Your code is now live and hosted by GitHub. Congratulations!!!

Extras

Using a custom domain

You may have seen an option to add a custom domain, like sumoviz.org, depending on the domain provider there will be different settings you need to setup on your domain host. I use namecheap and it was very simple.

CSS

You can use CSS to customize your page, add a background, center the viz, change the name of the page or the favicon. These are some examples I used on a previous viz and I’ll add more resources below.

   <title>SumoViz</title>

        <link rel="icon" href="https://icon-library.net/images/sumo-icon/sumo-icon-18.jpg" />
       
        <style>
            body {
                background-image: url("https://i.imgur.com/yF8txge.png");
                background-repeat: no-repeat;
                background-size: 100% 101.5%;
                background-position: center top;
            }        

            div#twitter_div {
                margin-top: -62px;
                margin-left: 60pt;
                text-align: center;
            }         
      
        </style> 

Twitter button

On sumoviz.org I created a button to allow viewers to tweet from the viz directly if they wanted to share it. Similar to a share button on any website. Here’s what it looks like.

and the code behind it

<div id="twitter_div">
            <a href="https://twitter.com/share" 
            class="twitter-share-button"
            data-text="Sumo top division Honbasho results since 1983 in @tableaupublic including Hakuho's dominance. By @davidmpires"
            data-url="http://sumoviz.org/"
            data-hashtags="sumo,tableau,japan"
            data-related="twitterapi,twitter">
            >Tweet</a> 
        </div> 

That’s it. We covered how to push changes to GitHub, how to embed your viz in HTML and how to use GitHub to host your code.

Resources

  1. GitHub account

  2. GitHub desktop

  3. Visual Studio Code

  4. Tableau Embed

  5. Twitter Developer – Button

  6. GitHub Pages

  7. CSS Tutorial

#github #sumo #tableau