Animation on Public?  Viz Inception!

Animation on Public? Viz Inception!

Nerd Alert!  We are talking about two of my favorite things here: Biking and Data.  I make no promises that I will not be geeking out at some point…

I know what your thinking….haven’t you already visualized your mountain bike data and didn’t you make Pooja do it too? Yes and Yes, but this is different, I promise!  This time I want to animate it AND I want it to work on Tableau Public.  Say what?!?!

The Data

I recorded my night ride on October 10, 2016 using the Runtastic Mountain Bike Pro App on my iPhone.  I downloaded the gpx file from Runtastic and converted it to a csv using a free converter online.  I manually added a sequential Path field to the csv so Tableau could draw the polygons.

The Video

I shot the video with a Contour Roam camera (hey…it was cheaper than a GoPro) strapped the the fork of my mountain bike.  I used iMovie to create four videos of the trails I wanted to visualize and published them to YouTube.  I may have had to publish one of them a few times until I found a song that could be embedded!  sssshhhhhh – damn WMG!

The Concept

I wanted to animate four trails that I rode on last night, but here is the rub…they are all different lengths.  I wanted users to be able to click on something and start the animation/video of each trail from the beginning.  I wanted this to all be on a single dashboard on Tableau Public.

The Dashboard

Here is the trick: there are actually five dashboards in this workbook.  There is the main view that you see when open the viz and four hidden dashboards.  I unchecked show sheets as tab option when publishing.  Under Metadata you can see the other 4 tab names.

Tableau Public Settings
Tableau Public Settings

The main dashboard was set to 1000 x 725 pixels, while the four hidden dashboard were set to 650 x 625 pixels for width and height, respectively.

Each of the four hidden dashboards has an embedded web page object pointing to the trail’s YouTube video.  I added some URL parameters to hide the info, hide the controls, and to autoplay the video.  Here is an example using the Ribbon Candy video URL: https://www.youtube.com/embed/vfqlD04Ji3U?showinfo=0&autohide=1&autoplay=1

Making It Happen

I needed to use the JavaScript API to make the animation work.  This involves setting up a dashboard and publishing it to Tableau Public.  Then, you create an html page (hosted somewhere) that calls the dashboard and animates it through the use of a parameter and filter in the dashboard.  Allan Walker wrote this code, I just keep using it!

I created four html pages, one for each trail.  View the source if you want to see the code on the pages: Black WidowCMP, Eagle, and Ribbon Candy.

The trick here is that each one of these html pages calls one of the hidden dashboards from Tableau Public.

Viz Inception

So how do you get the animation on Public?  On the visible dashboard, I created shapes of each trail map on the left and right of the dashboard.  The center of the viz is just a floating web page object.  The trail map shapes have a dashboard URL action that will call one the html pages created above when clicked.  So basically…I have embedded this workbook within itself creating VIZ INCEPTION.

woah

The webpage objects from the hidden dashboards are not affected by the URL action on the visible dashboard.  Clicking on any of the shapes will restart the animation and video from the beginning.  Also, remember you need to use https protocol when embedding a web page object.

I hope this was helpful.  I had a lot of fun doing it!

Click here to see the animated version on Tableau Public

Leave a Reply