Animated Bubble Chart for Power BI

Inovista Animated Bubble and Image Chart for Power BI

This Power BI custom visualization 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 custom visualization 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 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 Power BI

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

1) Data Sources

The data source can, of course, be a database, a text file or any option that Power BI supports. The visual 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

Load the data into Power BI and when the data have been loaded, use those values to create a new report. If using a separate table to store image information, make sure that the link to that information is created and valid.

Create Report with Dataset in Power BI Online

2) Import the Custom Visualization

Once the data have been prepared and a new report is available in edit mode, click the '...' icon in the Visualizations tab and either navigate to the downloaded Animated Bubble Chart visual file after clicking 'Import a visual from a file' or locate it in 'Get more visuals'.

Load the Animated Bubble Visual

Once loaded the screen should look like this. Note that the visual will show the default image until at least one data item has been linked.

Loaded Animated Bubble Visual

3) Define the Custom Visualization Data

To setup the data links, drag the relevant data field in the 'Fields' tab to the corresponding value for the visual.

Drag Fields to Visual Link

TIP: To stop the animation from running again each time a data item or a property is updated,go to the format selection and open the 'Run Animation' option. Turn this off to prevent the animation and then turn it back on when ready to view.

The chart is presenting non summary information, so each data field where applicable should have the 'Don't summarize' option selected.

Select Down Arrow for Field

Then select 'Don't Summarize'

To replace the bubbles with resizable images, either drag the list of image URLs field to the 'Image URLs' data option or the list of Base64 image data to the 'Image Values' option. Only use one of these options, not both at the same time.

Link Image Details

4) Define the Chart Properties

There are a large range of properties that can be defined in the 'Format' section of the 'Visualizations' tab:

Run Animation: Prevents the animation from running each time an edit is made. Turn this back on when editing has finished.
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.

5) More Information

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

You can find out about the Animator at Inovista.com.