How to Center that Viz? (CSS)

Tableau Public is a great option for you to showcase your creativity in data visualizations. And it allows you to place them anywhere in the internet by the use of the sharable embed code.

Here is an example of an embed of a soccer related Viz that I created last year while waiting my flight back from Tableau Conference (@ Las Vegas airport):

embed

There is a lot stuff going on in this embed in order to make the Viz look nice in your page. However if you  simply copy and paste this code “as is” you may run into some issues. And today I think I solved a big one.

Tableau Public does not center your Viz so it will be normally left justified. And that does bother me when I want to showcase a Viz and make it displays at the middle of my user screen, regardless the size of his/her screen. That’s how Tableau Desktop displays a visualization in Presentation mode. Why can’t Tableau Public do the same with the embeds?

Well the tip I want to share is that with a little addition to your CSS code you can control also this aspect of your Viz. Here is what you need to do:

1. Put your embed within a DIV. For example <div class=”myTableauViz”>

2. Format the CSS for the DIV as following:

div.myTableauViz {
width: 950px;
margin-left: auto ;
margin-right: auto ;
}

3. Make sure that the width (in red) matches the size of your website main container.

4. Also ensure that your Viz fits this width. In the embed code you can find the width under VizElement.style.width

And that’s it. Now your Viz will show like you wanted it to be. Nice and centered.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s