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?!?!
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.
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!
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.
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.
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
The trick here is that each one of these html pages calls one of the hidden dashboards from Tableau Public.
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.
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!