New in 8: Javascript API

Mike Klaczynski
二月 22, 2013

Until now we have focused our “New in 8.0” series on new chart types and advanced dashboard formatting, but today we’ll be broadening our scope to cover a powerful new under the hood feature - Javascript API.

The upcoming 8.0 version of Tableau Public includes an expansive set of Javascript functions that allow for advanced interaction. Authors will be able to seamlessly integrate vizzes into their story – updating the viz as the reader progress through the story. In one scenario, a viz that floats alongside text updates at key points to reflect the story. Possible interactions include adjusting filters, manipulating axes, switching workbooks and individual sheets, and an assortment of other modifications.

Today’s example just brushes the surface of what is possible with the API. Simply adding a year to the filter every few seconds allows for a play-through of the story. At the end you can adjust the filters to make your own discoveries.

This visualization is based on data from The World Bank and shows the number of cellphone subscriptions per 100 people by country. The original data set includes records starting from 1965, however in this simplified view the data begins in 1990, with the default view set to 1993.

By pressing play the viewer sees a time-lapse of the spread of cellphone usage, beginning with Europe and culminating with near worldwide saturation and a few countries achieving a rate of nearly 2.5 cellphone subscriptions per person.

At the end of the time-lapse the user is able to use the filters to drill down and explore data for a particular year, region and country.

Use the comments below to share your ideas for using the API.
Or, download the Javascript behind this visualization as a text file

Press the button below to animate the visualization, slower connections may experience a delay.

Part 1: Freeform Dashboard Design
Part 2: Floating Dashboard Content on Maps
Part 3: Treemap Bar Charts
Part 4: Bubble Charts
Part 5: Word Clouds
Part 7: Groups, Filters and the Marks Card
Part 8: Javascript API Pt. 2


Hey Brad, I've added the Javascript powering the visualization at this link: Bank - Code.txt

We chose to use 2 copies of the viz to switch back and forth to remove the transition that occurs when a single viz loads. What effectively happens is a viz is displayed, the viz underneath loads the next filter step, when its done it switched to the foreground and the hidden viz loads the next filter step, when its done it switches to the foreground...

If you don't mind the grey transition step you can accomplish a similar play function with very little code.