Countdown to TC16

Countdown to TC16

Disclaimer:  Thanks to Chris DeMartini, Allan Walker, and Simon Runc because I stole a lot of stuff to make this work.

I don’t know about you, but I am getting pretty excited for Tableau Conference 2016 (a.k.a. TC16).  I am most excited to meet the other half of The Data Duo, Pooja, in person!  This prompted me to create a countdown in Tableau.

Direct link to viz

I envisioned three components in this viz

  1. I wanted to create a countdown by days, hours, minutes and seconds
  2. I wanted to use great arcs on a map to show the flight paths for Pooja and I to Austin
  3. I wanted a ticking clock – well just because that looks cool

I knew this would be a challenge because the pages shelf does not work on Tableau Public.  So that meant I was going to have to delve into the world of JavaScript API, which is not my area of expertise.  So I did what any good author would do, ‘Steal With Pride’ from some of the best!

The Countdown

This part was relatively easy.  I loaded in a single record with one dimension called ‘blank’.  I created a parameter for November 7th (estimated arrival date in Austin).  Then, I setup some simple calculations based on the difference in seconds between now() and the TC16 Parameter.

The Great Arcs

This was much easier than I expected thanks to a great writeup by Chris DeMartini.  It really only took me a few minutes to structure my data properly according the Chris’ step-by-step instructions.  I just replaced the data source in his workbook with mine and then copied the sheet to my workbook.

Great Arc data
Great Arc data

After loading in the data, I just did some simple formatting.  I added a different mapbox map in there, changed some colors, and added some annotations.

The Ticking Clock

Back in March, Jonathan Drummey posted an educational brainteaser on the community forums.  Can you create a ticking clock?  I ended up stealing Simon Runc’s version because he loaded in 60 records with an ID #.  I needed this ID number to make the animation work.  Yuri Fal actually did it with two records, but I needed 60.

2016-07-23_13-04-47
Conditional Filter

In place of the page shelf animation, I added a parameter and filter.  The parameter represents 60 seconds.  I used the ID number from the data source to create a conditional filter using the Seconds parameter.  I learned this trick from Allan Walker and it will be used to animate the clock.

The Animation

This was the hardest part for me.  I knew Chris DeMartini had a post on a live polar clock that used some Allan Walker animation magic. I looked at the source code on the page to see what JavaScript functions were used to refresh the now() formulas on this clock.  I started with this code.

Allan was also kind enough to provide me some code to animate my hurricane viz a few months ago.  So I already had the functions I needed to animate the ticking clock.  It was just a matter of trial and error on combining the two into one HTML file.  I am not an expert on this, but I got it to work.  You can look at the source here if you want to see the code.

The clock ticking is a little slower than the countdown, but it is really just decoration.

I hope to run into some of these folks at TC16 so I can properly thank them for creating all this stuff for me to steal!  Now I know exactly how long until the conference starts.

Thanks for reading.  As always, please leave any comments below.

One thought on “Countdown to TC16

Leave a Reply