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.
Highlights
The chart presents a typical bubble chart but offers the capability of
animating the bubbles through periods such as time. The bubbles resize
and relocate for each period.
Bubbles can be represented as images. For example, if the data
represent countries, a flag image can be used in place of a bubble. The
image resizes and relocates just as the bubble does. Image can be either
a URL link or embedded as Base64 text.
A user can pause the animation at any point and can then restart the
animation or browse to the next or previous period.
Tooltips present a dotted line to each axis and the value of the
bubble/image.
A variety of properties are available to the designer which include
linear/log axes, show/hide pause panel, font/color editing and grouping
options.
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.
Chart Periods: This is typically although not necessarily a
time period. In the example below, years are used.
X Axis Values: The values that will be plotted on the X axis -
gdp in the example below.
Y Axis Values: The values that will be plotted on the Y axis -
life in the example below.
Bubble Values: The values used to drive the size of the
bubble/image - pop in the example below.
Item Names: The names of the bubbles/images to be plotted -
country in the example below.
Item Groups: If the data can be grouped, this data column
places the item name into a group. Items will be colored by their
grouping. If there is no group, just copy the value in 'Item Names'.
Image URLs; This is optional and used when an image is to be displayed
instead of a bubble. The data values will be URLs of images. In the
example below, the flag column contains a list of URLs of flags for each
country or data item. Note that there is also the option of using images
in Base64 format. Use that option if external URL calls are to be
avoided and leave this option blank.
Image Data; This is optional and used when an image is to be displayed
instead of a bubble. The data values will be Base64 data representing
SVG image. In the Base64 example below, there are 2 columns: a list of
data item names that can be linked to the main data source and the
corresponding list of Base64 data. Note that there are many websites
available that will convert SVG data to Base64. When using 2 data
tables, they will need to be joined in order to access data from both
tables. If this option is used, leave this 'Image URLs' option blank.
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
Period Duration: The amount of time in milliseconds period of
the data will be shown. For example, 500 will be half a second and 2000
will be 2 seconds.
Chart Type: Select 'circle' for a bubble chart and 'image' to
use images instead.
X Label: Enter the text label for the X Axis.
Y Label: Enter the text label for the Y Axis.
Sort Period: Select 'a' for ascending sort, 'd' for descending
or 'none' to use the data as it arrives.
X Axis Type: Options are 'linear' and 'log'.
Y Axis Type: Options are 'linear' and 'log'.
X Axis Min: The minimum value for the X Axis. Select 'auto' for
automatic calculation.
X Axis Max: The maximum value for the X Axis. Select 'auto' for
automatic calculation.
Y Axis Min: The minimum value for the Y Axis. Select 'auto' for
automatic calculation.
Y Axis Max: The maximum value for the Y Axis. Select 'auto' for
automatic calculation.
Axis Font Size: The size of the font for the axes and axis
labels in pixels.
Axis Font Family: The font family used for the axes and axis
labels.
Axis Color: The color of the axis tick and label text.
X Axis Format: The numerical format of the values on the X
Axis. ',.0f' will show ###,###, '',.1f' - ###,###.# and so on. '.0f' -
#####, '.1f' - '#####.#' and so on.
Y Axis Format: The numerical format of the values on the Y
Axis. ',.0f' will show ###,###, '',.1f' - ###,###.# and so on. '.0f' -
#####, '.1f' - '#####.#' and so on.
Tooltip Format: The numerical format of the values of the
tooltip. ',.0f' will show ###,###, '',.1f' - ###,###.# and so on. '.0f'
- #####, '.1f' - '#####.#' and so on.
Num X Ticks: The number of ticks on the X Axis, note that the
software will try to keep to this number but it may not always be exact
due to size constraints.
Num Y Ticks: The number of ticks on the Y Axis, note that the
software will try to keep to this number but it may not always be exact
due to size constraints.
Show Panel: Select 'true' to show the pause, browse and play
panel at the bottom of the chart, 'false' to hide it.
Panel Scale: The scaled size of the pause/browse panel. For
example, 0.5 will scale to half size and 2 will double the size.
Panel Color: The color of the buttons in the pause/browse
panel.
Color Scheme: A range of color schemes. Each scheme will
dedicate a specific color to each item defined in the 'Item Groups' data
section.
Bubble Size: The relative scaling factor used to resize the
bubbles or images depending on which of those hase been selected.
Options are 'V Small', 'Small', 'Medium', 'Medium Plus', 'Large' and 'V
Large'.
Period Text Font Size: The size of the text depicting the
period at the top right of the chart. All values are in pixels.
Period Text Color: The color of the text depicting the period
at the top right of the chart.
Margin Top: The margin in pixels at top of the chart.
Margin Right: The margin in pixels at right of the chart.
Margin Bottom: The margin in pixels at bottom of the chart.
Margin Left: The margin in pixels at left of the chart.
