Combining Tableau and reveal.js

Yesterday, I posted about combining Tableau with deck.js. Today, I am going to post about combining Tableau with reveal.js. Both offer a nice interface and an easy way to embed Tableau visualizations right into HTML. Both allow for a seamless slide transitions and since the Tableau workbooks load upfront there is less time for each workbook or tab to load. Reveal.js was created by Nakim El Hattab. It's a very powerful platform written in JavaScript that has all sorts of formatting options, controls, themes, etc. I used Nakim's presentation template to demonstrate how Tableau could be embedded into reveal.js.

Tableau Zen Master Mark Jackson was kind enough to allow me to showcase one of his Tableau Public visualization for the demonstration. When thinking about the slide transitions, wait time, story points and design, his visualization on Urbanizing China was the first visualization to come to mind. Compare his original Tableau Public Visualization here to the presentation below. Mark's original presentation uses Storypoints. Each page takes some time to load and the navigation is far from seamless.

I took Mark's visualization and converted it out of Storypoints to a single workbook with tabs. You can see the revised visualization here, but when interacting with this on Tableau Public is behaves in the same manner. It takes an estimated 15 seconds of total load time in this workbook simply moving from tab to tab. However, once I have a tabbed workbook I can reference each page of the visualization using the embed code and there is no Storypoint navigation. By embedding each page's embed code into reveal.js it utilizing the navigation of reveal. It also loads every tab at the beginning of the webpage load. This reduces the amount of wait time when transitioning from slide to slide. There is still wait time when interacting with the data, but regardless, this solution offers a really slick interface with some great advantages.

Click here to see the presentation with Tableau and reveal.js.

There are many options that are very easy to use. There is navigation up and down, easy to control formatting from slide to slide and other great presentation features (like presenter mode). As an example, here are some different slide transitions for the same presentation. This is done simply by adding a parameter to the URL.

Click below view presentation with:

slide fade (adding /index.html?transition=fade to the URL)
convex transition (adding /index.html?transition=convex to the URL)
concave transition (adding /index.html?transition=concave to the URL)
zoom transition (adding /index.html?transition=zoom to the URL)

I coded this presentation using HTML and JavaScript and hosted it on my website. However, I know that many people using Tableau aren't able to do this. In addition to creating reveal.js, Nakim El Hattab has also created a platform to create slide presentations at slide.com
. Slide.com has a very nice interface that allows you to create a presentation slide by slide and export it as a single HTML page. There is no option in the interface to embed the code necessary for a Tableau Public (or Server) visualization, but it's possible to create the presentation using the interface and then drop in the embed code for the Tableau viz. This will limit the coding necessary to build one of these presentations.

I will plan some additional posts to walk through a step-by-step guide, but I wanted to share this technique and show the power of combining Tableau and reveal.js.

I hope you find this information useful. If you have any questions feel free to email me at Jeff@DataPlusScience.com

Jeffrey A. Shaffer

Follow on Twitter @HighVizAbility