Animated Bubble Chart Mod for Spotfire®

The animated bubble chart can be used to show how 2-4 measures changes over time. This method of visualizing changes over time was popularized by Hans Rosling in a famous TED talk from 2006 where he used it to show changes in global health and economics. Here's what that dataset looks like in Spotfire using the animated bubble chart mod.

Clicking on the play button in the lower left hand corner below the visualization will show how Life Expectancy and Income per capita in different countries have changed over time.

Data Requirements

Every mod handles missing, corrupted and/or inconsistent data in different ways. It is advised to always review how the data is visualized.

The animated bubble chart can be used to visualize and animate any multi-variate dataset that contains snapshots of values taken at different timepoints. In order to make it work properly a data table with at least four columns is required:

• One column should identify the bubbles, for example, names of countries, people or objects.
• One column should contain a time point, for example years, or weeks.
• Two columns should contain measures for the country, person or object taken at different times.

Setting Up the Mod

Let's say we have a grocery sales dataset that contains data about prices, costs and sales volume for different items:

A basic animated bubble chart can be configured to show how prices and costs for different items have varied over time by creating an animated bubble chart with the following settings:

• Y = Avg(Price)
• X = Avg(Cost)
• Animate By = Year
• Marker By = Item

Optionally you could also use color and size to show additional dimensions. E.g:

• Color By = Type
• Size By = Sales

The end results will look something like this:

The chart shows one bubble for each item in your inventory list. Each bubble is positioned according to the price and cost in the year 2000. The size of the bubble represent the sales volume that year and the bubble is colored by item type. The current year is shown behind the visualization.

When you click the the play button in the lower left hand corner the chart will cycle through the dataset and display data for each year. You can click pause to stop the animation at any time.

Using the Mod

Scrubbing

Click anywhere in the animation slider to skip to a particular time point. Drag the handle to manually move back and forth in time.

Animation Speed

Click the speedometer to the right of the animation slider change the speed of the animation.

Marking

Clicking on a bubble will mark it in all timepoints. This makes it easy to follow one or more bubbles throughout the animation. Clicking in the empty space in between bubbles will clear the marking. You can mark several bubbles by Ctrl-clicking on them. Clicking and dragging allow you to select multiple bubbles. You can select all bubbles within a range of values by dragging along the y- or x-axis.

Labels

By default marked bubbles will be labeled. You can turn this behavior on or off by right-clicking in the y-axis area and checking or unchecking show labels for marked rows.

Log Scales

Natural dataset often contains a lot of small values and a few larger values. If this is the case with data that you want to animate you may end up with a visualization that shows a lot of overlapping bubbles in the lower left hand corner of the visualization. One way to handle that is to use a log-scale on the x- or y-axis. You can turn on and off log-scales by right clicking in the x- or y-axis area and checking or unchecking the log-scale checkbox.

In a terminal window:

• npm install
• npm start

In a new terminal window:

• npm run server

• Spotfire Community Exchange: A safe and trusted place to discover ready-to-use Mods
• Developer Documentation: Introduction and tutorials for Mods developers
• Mods code examples on GitHub: A public repository for example projects