1/11/2016
Using Tableau with Reveal.js - Instructions
What is reveal.js and why should I use it?
reveal.js is a presentation framework for creating presentations in a browser. It's free and offers some really nice features that I will cover in this tutorial. Some of the key features include:
• various slide transitions including slide, fade, concave, convex and zoom
• horizontal and vertical slide transitions and multiple hierarchies in presentation
• page navigation
• progress bar
• autoscroll and autoscroll stop by user
• pre-loads visualizations ahead of time to avoid spinner
• lazy Load with ability to set number of slides
• loop the presentation
• background images and parallax
Requirements for Tableau with Reveal.js
• A Tableau Public Visualization or multiple visualizations that you wish to embed in the presentation
• reveal.js
• Hosting capability
• Some basic HTML and Javascript knowledge to put it together (listed step by step below)
• Some sort of text editor, for example Notepad++ (download here for free)
Step 1 - Build your Viz
Create your visualization or multiple visualizations and load up to Tableau Public. In this tutorial I will be using various visualizations taken from Tableau Public.
Step 2 - Download reveal.js
Download reveal.js from github located here. You will need to download all of the folders and files and place in the directory with the webpage (or whatever directory you wish to call them from in the HTML code). This includes directories for css, js, lib, plugin and test and all of the files associated. Follow the Basic Setup on Github.
Step 3 - Modify the index.html page
When you download and install reveal.js, there is a sample webpage that is included, index.html. This is great because it gives you a really good starting template for creating presentations. The sample file demonstrates functionality for reveal.js, but it also gives you some sample code as well. Each slide in reveal.js is separated by a "section" tag. This is where you place your Tableau viz. You can embed a number of different ways and it's very straight forward.
First, you can simply use the Tableau embed code from any Tableau Public visualization. Here is an example of two slides, a title page followed by a Tableau Public viz.
In the code above there are two slides in the presentation. The first slide has a title and reference to Tableau Zen Master Mark Jackson for his visualization on Urbanizing China. The second slide is simply the Tableau embed code that is copied and pasted between the "section" tags.
At this point we are actually done. We've added the slides we need for the presentation, including our Tableau visualization embedded right in the presentation. Upload this to your hosting server and you should be off to the races.
Click here to see a sample presentation with Tableau and reveal.js.
Alternatively, you can also place the viz in a Reveal.js slide using an iframe. By doing this, you can control the loading options in reveal.js using "data-src". By default, things are all loaded up front in reveal.js. This means anything with an embed code will load immediately. However, this could be problematic if trying to load 50 visualizations up front. In this case, use the iframe method and set the lazy load in the options. This will allow the viz to load at whatever setting you choose, for example, you can have the viz load 3 slides ahead, right before you need it. More information about Lazy Loading is available here.
Here's what the iframe looks like for the same visualization. This is the same viz URL used in the Tablitha Tutorial here. TIP - Use the Twitter share button on any Tableau Public Viz to get the link.
Setting Various Options in reveal.js
There are a number of themes built in to reveal.js that can be easily set with CSS. In the "head" tag, change the name of the CSS file to any of the themes in the "theme" folder which is located in the "CSS" folder.
Option include: beige, black, blood, default, league, moon, night, serif, simple, sky, solarized and white. Simply change the one line as desired.
There are loads of options as well that you will find very useful. Here is a list of the stadard options. Certain options can be set at the slide level, but these options below are put in the code at the end of the index.html page and set the options for the entire presentation.
Note the auto slide feature and the ability for the user to stop the auto slide. This could be very useful to auto rotate a presentation with Tableau visualizations built in to it.
Note the ability to transition with navigation and mouse wheel, which should allow most presentation controls to allow switching from slide to slide. This could be used with Tableau Storypoints and allow clicker control from Storypoint to Storypoint, right within the presentation.
Note the ability to have speaker notes viewable, separately from your presentation and Tableau viz.
Slide transitions
Slide transitions are super easy. They are built in and can be controlled in the options as indicated above, but you can also control these on the file with a URL parameter. This make testing out the slide transitions really easy, without changing any code at all and works with any presentation in reveal.js.
For example, 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)
Putting it all together
Here's what the final HTML looks like for the sample reveal presentation. Notice all of the Tableau Embed code in each of the "section" tags which is creating a new slide for each Tableau viz. Feel free to copy and paste from the box below.
One last advanced feature built in to reveal.js is Multiplexing, which is the ability to have a Master presentation that controls the slides remotely on the Client's presentation. This takes a little more setup, but it's not too complicated. Copy the presentation and set the parameters for the Master on one and the Client on the other and specify the server that will pass the information between the two. This is a really cool feature, giving you the ability to control a presentation from the master in a room full of tablets or on a computer across the globe. This is a really fun feature. Just keep in mind it only controls the slide transitions, not your interactions with the Tableau visualizations. More information about this setup is available here.
I hope you find this information useful. If you have any questions feel free to email me at Jeff@DataPlusScience.com
