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:
- Download the extension + Sample QlikView application
- Install the extension on your local computer (doubleclick the .qar file)
- Drag’n’Drop the extension within QlikView Desktop (using WebView)
- Finally deploy the extension to your server (-> detailed instruction)
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.
22 Comments