Inovista Animated Bubble and Image Chart for Tableau

This Tableau extenstion is based on the D3 implementation of the Gapminder  'Wealth and Health of Nations' animation. This visualization allows a designer to use either a bubble or an image to represent the core data points in the chart in addition to allowing a user to pause the animation and browse through the various data periods.

This extension was generated by the Inovista Animator. A custom image is loaded into the Animator where additional animations can be added, the resultant image is then exported as a Tableau extension.


Click Image to View


Short YouTube Video Tutorial

Using the Visualization in Tableau

The extension is imported into Tableau like any other custom extension. The designer needs to define data source and define the extension's properties as required.

1) Data Sources

The data source can, of course, be a database, a text file or any option that Tableau supports. The extension accepts the following columns of data, the image data is optional.
 Source Data: Excel Sample


 Source Data: Base64 Image Data Sample


Create a Tableau source by importing the data to create a new data source. If using a separate table to store image information, make sure that the link to that information is created and valid. From the data source, create a new datasheet. In this case, we do not want summary information, we want to make use of each row of data, so convert the measure columns into dimensions. Then drag each of the required data items onto the 'Details' box. This will create a strange looking data sheet, however, this sheet will not be visible.

 Don't Summarize Data

 Drag Fields to Details


2) Load the Extension

Once the data have been prepared, create a dashboard and then drag the datasheet that has just been created onto the canvas. Select the 'Layout' tab at the top left and then select the 'Floating' checkbox and set the width and height to 1 pixel. This will effectively make the datasheet invisible. Re-select the 'Dashboard' tab, locate the 'Extension' option and drag it onto the canvas.

 Size the Datasheet

 Drag Extension to Dashboard


After the extension has been dropped onto the canvas, Tableau will load a popup asking you to 'Choose an Extension'. You should already have downloaded a 'trex' file representing the Animated Bubble extension. Navigate to this file and select it. This will load the extension and present the introduction screen.
 Select Trex File

 Extension Introduction Screen


3) Define the Extension

To edit the extension, locate the arrow at the top of the extension, either on the right or left hand side. Click on it and select 'Configure'. This will open the extension popup editor, which will allow the mapping of data values as well as setting the chart properties.

 Select Extension Configure

 The Extension Popup Editor


In the popup and under 'Worksheets', select the sheet that will be used as a data source. This will populate the data fields in the mapping section below. Drag the relevant fields from the data on the left to the corresponding 'Data Field' column on the right. To keep a column as its default value, drag the '<Default Value>' option on the left to the 'Data Field' or just leave it in its original state.

 Select Extension Data Sheet

 Drag the Source Data to 'Data Field'


4) Define the Chart Properties

In the popup, scrolling down below the data mapping section is the section where property values can be set. In this section, edit the properties by entering text, selecting a dropdown value or choosing a color from a popup. Properties can be used to change labels, fonts, the sort order, animation time, number formats, panel visibility and chart margins. A full list of properties is shown below.
 Set the Chart Properties


5) More Information

A YouTube video is available that presents the above process with examples, see Animated Bubble/Image Chart for Tableau.

You can find out about the Animator at