QlikView Extension – D3 Animated Scatter Chart

The Animated Scatter Chart Extension is based on the excellent charting library D3js.org and a recreation of Gapminder’s Wealth & Health of Nations, made famous by Hans Rosling’s memorable 2006 TED talk, by Mike Bostock.

Motivation

The range of use of this chart type is certainly limited but it is perfect to visualize the transition of two KPIs over time (years).

If you are interested in seeing the extension in a live demo, visit one of my previous posts.

Screenshots

Animated Scatter Chart - Example

Download & Installation

Installation of the QlikView extension is straightforward, there is nothing special to take care of:

Extension Configuration

There are some properties which can be set for the “D3 Animated Scatter Chart” extension (examples below are set on the sample chart above).

Data Options

Animated Scatter Chart - Data Properties

Property Description Example
Primary Dimension Primary dimension for the bubbles. [Country Name]
Dimension Grouping Secondary dimension used for color grouping. Region – will color all countries according to the given region.
Year Field, containing the Year value. Year
X-Axis Measurement Measurement on X-axis Sum(BirthRate)
X-Axis Label Label of the X-axis. Birth rate, crude (per 1,000 people)
X-Axis Type Type of X-scale (Linear is default). Linear or Logarithmic
Y-Axis Measure Measurement on Y-axis Sum(DeathRate)
Y-Axis Label Label for the Y-axis. Death rate, crude (per 1,000 people)
Y-Axis Type Type of Y-scale (Linear is default). Linear or Logarithmic
Bubble Size Measurement of definition the bubble size. Sum(Population)

Chart Layout & Behavior

Animated Scatter Chart - Chart Layout & Behavior

Property Description Example
X-Axis Minimum You can set the maximum of the X-axis either explicitely or it will be calculated dynamically (in this case set the value to 0.
Note: For performance reasons it is recommended to pass this value using a QlikView expression.
Max(BirthRate)
Y-Axis Minimum You can set the maximum of the Y-axis either explicitely or it will be calculated dynamically (in this case set the value to 0.
Note: For performance reasons it is recommended to pass this value using a QlikView expression.
Max(DeathRate)
Year Size Size of the Year label in pixel. 100
X-Label Font Size Font size for the X-axis label in pixel. 10
Y-Label Font Size Font size for the Y-axis label in pixel. 10
Transition Transition duration in milliseconds, 10000 is default. 10,000
Show Replay Button Define whether the replay buttons should be shown or not. true/false

Example Application

I have created a more advanced example application where you can select the measurements for the X-axis, Y-axis and the bubble size within the QlikView application using only list boxes in QlikView.

Animated Scatter Chart - Advanced Usage

The sample QlikView application can be downloaded from GitHub.

Bookmark and Share

and tagged , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

22 Comments