The Inovista Animator is a web based application that allows users to
import SVG images and create intelligent animations that change their
behavior based on external data.
This Tableau extension allows a user to take a data-driven animation
created in the Inovista Animator and load it into Tableau. Variables in
the animation can be linked directly to Tableau data values or defined as
user editable properties.
In the Animator, a full range of animations are available including
Movement, Rotation, Scaling, Path Animation, Text Animation,
Clipping, Masking, Text Offsets, Morphing and Wave
Motions. Animation can also be driven by events such as mouse clicks.
This extension will take any animation created in the Inovista
Animator and convert it into a Tableau component. Animations may be
charts or infographics driven by Tableau data or simply decorative items
such as moving logos.
The animations can be exported from the Animator as JSON files or they
can be copied to the clipboard. In Tableau, the JSON file can be loaded
or can be pasted directly from the clipboard.
In the Animator, all aspects of the animation can be modified by
creating variables, for example how much of an image to display to
simulate a bar chart. Each variable can be defined as either a data item
or property. In Tableau, data items are linked to Tableau data and
properties can be set by the user. Examples of properties may be fonts
Once defined, data values can be updated by a filter and/or parameter
A number of examples are available for download. The samples include
Excel data files, Inovista project SVG files, Tableau Packaged Workbooks,
JSON files containing animated images and in some cases the original SVG
The visual is imported into Tableau like any other extension. The designer
needs to define data source and define the extension's properties as
1) Data Sources
The data source can, of course, be a database, a text file or any option
that Tableau supports. Create a Tableau source by importing the data to
create a new data source. From the data source, create a new datasheet. 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
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 Bar Race extension. Navigate to
this file and select it. This will load the extension and present the
Select Trex File
Extension Introduction Screen
2a) Export the Animation
In the Inovista Animator, there are two options to export the animation.
Open the Tableau Extension dialog and when the data and property fields
have been completed, either export the image as a JSON file or copy it to
Export from Animator
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, where the animation can be imported.
To import from a JSON file that has been created in the Inovista Animator,
select the 'Import Animation' button and navigate to where the JSON file is
Select Extension Configure
The Extension Popup Editor
To paste the animation, select the 'Paste Animation' button and a text box
will open. Paste the copied animation into the box and click 'OK'. If the
JSON file or the pasted data is of a correct type, the image will be loaded
and the popup will reopen with image data loaded. with the
Paste Image Data
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
4) Define the Chart Properties & Background
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, choosing a color
from a popup or setting a font.
Below the properties are options to set a background and border for the
Set the Chart Properties
When ready, click the 'Save' button at the bottom. This should present a
working copy of the animation.
Set the Chart Properties
5) More Information
To create animations in the Inovista Animator, search for 'Inovista
Animator' in YouTube and you will find a range of video tutorials
detailing different aspects of the Animator.