This Tableau extension is based on the D3 implementation of the 'Bar
Race Chart' animation. This visualization allows a designer to create a
bar chart type animation that progresses through a range of periods,
typically dates, 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 Power BI visual.
Highlights
The chart presents a typical bar chart but offers the capability of
animating the bars through periods such as time. The bars resize and
relocate for each period.
A user can pause the animation at any point and can then restart the
animation or browse to the next or previous period.
Values are shown at the end of each bar.
A variety of properties are available to the designer which include
adjustment of point and period change duration, show/hide pause panel,
font/color editing and the number of bar items to be shown.
Click Image to View Demo
Short YouTube Video Tutorial
Using the Extension in Tableau
The visual is imported into Tableau like any other 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.
Chart Values: The values that will be plotted on each bar -
value in the example below.
Chart Items: The name of the item that will be plotted on each
bar - name in the example below.
Colors: The color to be used for each chart item - if
left blank, a random color will be used.
Source Data: Excel Sample
Create a Tableau source by importing the data to create a new data source.
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 Bar Race 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
Tick 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.
Delay Duration: The amount of time in milliseconds the chart
will delay when changing the period. For example, 500 will be half a
second and 2000 will be 2 seconds.
TopN: Shows the 'N' biggest items sorted by value size.
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.
Value Format: The numerical format of the values shown after
the bar. ',.0f' will show ###,###, '',.1f' - ###,###.# and so on. '.0f'
- #####, '.1f' - '#####.#' and so on.
X Axis Font Size: The size of the font for the X axis and
labels in pixels.
X Axis Font Family: The font family used for the X axis and
labels.
X Axis Color: The color of the X axis tick and label text.
Sort Period: Select 'a' for ascending sort, 'd' for descending
or 'none' to use the data as it arrives.
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.
X Label: Enter the text label for the X Axis.
Label Font Size: The size of the font for the labels and values
in the bars in pixels.
Label Font Family: The font family used f for the labels and
values in the bars.
Label Color: The color of the labels in the bars.
Value Label Color: The color of the value labels at the end of
the bars.
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.
5) More Information
A YouTube video is available that presents the above process with examples,
see Bar Race Chart
for Tableau.
You can find out about the Animator at Inovista.com.
