I recently submitted my #VizForSocialGood for the Hidden Genius Project using Tableau and reveal.js for a unique storytelling experience. This post will walk through some of my lessons learned and hopefully save you some trouble along the way.
Here is the link if you want to skip the lessons learned or check it out first.
First off, #VizForSocialGood is a project started by Chloe Tseng that connects data visualization enthusiasts with non-profit organizations. In other words, it is about using your skills for a good cause to try and make a difference. Check out Chloe’s site for more information: www.vizforsocialgood.com.
Secondly, I am not a coder at all. I dabble with it, but that is about it. I am persistent though and good at Google. I have to thank Jeffrey Shaffer for suggesting I try this method of story-telling and also for helping me out when I bothered him for help several times (even on a Friday night – sorry Mrs. Shaffer)!
Before I jump into the lessons learned, the resources I used are:
Jeffrey Shaffer’s excellent blog posts:
- Incorporating Tableau with reveal.js – includes a working example and several links using the different transition types.
- His follow-up blog post with more in-depth instructions and code examples.
- Changing the Style in the new Tableau 10 Embed Code.
Nakim El Hattab created the reveal.js code and documentation:
Jeffrey’s posts cover the how-to part of the process. He includes some great examples and sample code. I suggest you start there if you are working to make this work. I am going to focus on what went well and what didn’t as I tried to make this work.
The high-level process to create this can be simplified into the following steps.
- Create several dashboards in Tableau – these will be your slides
- Download reveal.js and all directories
- Ability to create and host html, css and js files on a website
Tableau Design Lessons Learned
This should be the easy part, but as I found out, it might be the cause of all your problems!
Use a consistent size for each slide to maintain a clean look. Design dashboard content to the size slide you ultimately want to display on your webpage. For the Hidden Genius Project, I am displaying a 600px x 495px slide. I designed all the content on this size originally.
Tile your dashboard and use Automatic. Trust me. Once, you are happy with the content you designed above, set the dashboard size to automatic. It will look funky. It’s ok.
Use simple names for your dashboards. I named mine 1,2,3, etc. I will discuss backgrounds later. I named those BG1, BG2, BG3, etc.
Publish the workbook to Tableau Public. Uncheck show sheets as tabs in the options.
DO NOT FLOAT! I tried to float, I really did. I tried for hours to make it work. The problem is that when floating, you are designing to a set dashboard size. Ultimately, this webpage will be responsive and will scale on mobile devices, etc. What happens is that each browser will render the dashboard differently.
This means you now need to think about the resolution of every device out there and every possible browser. I designed this content on a mac. I tested it in Chrome, Safari and Firefox. Those three browsers all had a slightly differently rendering of the containers in the web page. Even when adding padding and trying to account for just those three browsers, it looked like crap on Windows or on an iOS device or Android. Sometimes there were vertical scroll bars, sometimes the content was cutoff, and sometimes the content had huge gaps on either side. And, this is without even trying to get fancy with the options.
Here is my tale of caution: Jeffrey first mentioned trying this presentation with my UNICEF #VizForSocialGood. This visualization as a 600px X 4000px dashboard that was 100% floated. There was some content partially floated off the screen, multiple web page objects, lots of text boxes, etc. I had to breakup the dashboard into eleven individual slides. After tinkering with the code for hours, I eventually gave up on it for that project. Why?
Here is what the first slide looked like on my mac in Firefox – PERFECT
Here is what the first slide looked like on my mac in Chrome – UH WHAT?
Here is what the first slide looked like on Jeffrey’s Windows machine in Chrome – ???
All of the slides were off like this. Safari and IE had different results and so did my iPhone vs. Android. If you want to check it out, here is the link (the slides do not auto-rotate).
I gave up on the Unicef version. I thought it was because I had things floating off the screen.
Then, came the Hidden Genius project. I decided to design slides first (an improvement), but I still used a floating design. You just can’t achieve the same look and feel with a tiled dashboard.
This time, all my content was on screen and I even built-in padding of 50px borders all the way around. Well, when I published it, I had the same browser issue. The containers on the web page were rendering differently. Some had scroll bars, some had huge gaps, and some were fine. I even tried set the dashboard to automatic, but Tableau moved the floating content all over the place and it looked terrible in different browsers.
I tried for hours and completely resigned myself to the fact that I need to tile and use the automatic dashboard size so it would render properly. Jeffrey reminded me of this, but I still tried for hours to make it work. It doesn’t. Tile and Automatic.
Jeffrey turned me onto another reveal presentation that uses a full image/dashboard as a background. Here is a cool Rolling Stone example he shared with me.
This was something I wanted to try. The first two slides of my original workbook looked like this.
I was floating text and images on top of a maps/images. Well, I had to change up the design because now I had to tile it. However, using the background helped me achieve the look I was going for. These are separate dashboards in the same workbook. One is a map. You can interact with it behind the slide on top (if you can reach the data point).
Remember, this is responsive design where the slide location can move depending on your device resolution. Test this out. Open the link and change the size of your browser window or rotate your phone – cool huh?
I moved the location of their headquarters in a corner and locked the map. These background dashboards are also set to automatic.
This background is also a separate dashboard that just contains an image and is set to automatic.
In the end, my Tableau Public workbook had twelve dashboards: Slides 1-6 and BGs 1-6.
Download reveal.js Lessons Learned
Because all of these dashboards are on the same web page, I was able to embed a YouTube video on slide 6 and set it to autoplay through a URL parameter. I thought it was cool to hear the beginning of the video as the story unfolded through the slides, and then catch up with it on the last slide.
Some general tips for hosting content. TheDataDuo.com is a WordPress.org blog. We use BlueHost as the hosting company. We use FileZilla to connect to the FTP portion of the site using the FTP credentials BlueHost gave us when we setup the site. This is where we can create directories for the css and js files and ultimately drop html files into the pubic_html folder outside of the WordPress Content Managing System.
Code Lessons Learned
When you are ready to start writing your webpage, refer back to Jeffrey’s posts. You can view the source code of any webpage in your browser. I started there and then began tweaking the HTML and CSS slightly (the little I know how to do).
Tableau does not appreciate any fooling with the Tableau Public banner. I only did so because I purposely made sure that every background in this presentation was also a dashboard. The Public banner is always visible on the bottom of the webpage.
Making use of standard sizes and naming convention.
Each slide gets separated into a div in the html code. Below is some sample HTML code showing the reveal div and one slide div. You would have additional sections under the slides div for each slide.
This is where using standard sizes and naming convention comes in handy. You can copy the slide section and paste it. The only thing I had to update were the tab names for the new background/slide dashboards. This was as simple as changing ‘BG1’ to ‘BG2’ and ‘1’ to ‘2’.
<div class="reveal"> <div class="slides"> <section data-background-iframe="https://public.tableau.com/views/HiddenGeniusProjectSlides/BG?:embed=y&:showVizHome=no" data-autoslide="20000"> <center> <iframe src="https://public.tableau.com/views/HiddenGeniusProjectSlides/1?:embed=y&:showVizHome=no" width="600" height="495"></iframe> </center> </section> </div> </div>
Setting the background and auto-rotate options.
The data-background-iframe is how the background dashboard is embedded using a div attribute. Similarly, adding the data-autoslide div attribute is where you can control the slide auto rotation. This value is set in ms, so a value of 20000 is 20 seconds. I gave the first slide an extra 5 seconds as things might be loading. The others I set to 15 seconds.
Slide transitions. As Jeffrey covered in his posts, you can change the slide transition right in the URL. Convex and Zoom are my favorites.
Patience – Is this a Lesson Learned? You always need this.
Unless you are really good at HTML, CSS and js, don’t expect to nail this on your first try. Plan on some growing pains as you work through it. I referred back to the documentation on GitHub a few times to figure out how to do the auto rotate and other options. I tested a lot. I think the dashboard had over 600 views before I published it for real.
Good luck. I hope this will save you some time and headaches along the way.