Bubblechart Tutorials

Step by step tutorial

The user story

I’m a HR manager in a company and I want to better understand absenteism per gender groups.

I want to know whether the women, men or non-binairy follow the same pattern in terms of absenteism.

Is the frequency the same ? Is the gravity the same ? How many employees belong to the different gender groups ?

My intuition is that women tend to be more often on leave to take care of the kids, but men are leaving for longer periods of time. Let’s do a bublechart to check it out !

Remember that the bubblechart is perfect for benchmarking across 3 dimensions. It allows you to connect three indicators, to illustrate correlations. It is perfect and adapted to compare complex sets.

Warning

Before you start!

Make sure you added your datasource to your application. Once you’re done create a new story.

Pick some data

To create a nice bubblechart, the chart needs to understand what is the value for the absciss, what is the value for the ordinate and the value for the bubble size also. And, a column containing the names of the bubbles of course :)

So your data should reflect this structure in some way.

You need :

  • a Employees column: contains the r value. This will define the size of the bubble. It is the radius of the circle.

  • a Gravity column: contains the x value. This will define where the bubble should be located horizontally in the chart

  • a Frequency column: contains the y value. This will define where the bubble should be located vertically in the chart

  • a Gender column: contains the label. what are the names of my bubbles ? What I am looking at ?

    In our case my gender groups.

If your data is alredy in this format, move on to the next step.

Also, remember that you can create fake data fitting the bubblechart format with our awesome fake data generator Fakir directly from the story :)

This is how my query should look like in the Dataset Editor.

See on the left side how the data has been formatted!

bubble dataset

Add units to your columns to contextualize the information and give meaning to your story.

Chart Parameters

Once my data has been setup I can now choose to configure a bubblechart.

I just need to follow the steps, and in 3 clicks I’m done!

bubble parameters
bubble chart

bubble chart

Add a line

Sometimes, it could be nice to also have the bubbles repartition around a line (that can be an average, a revenue…). So let’s move to our next tutorial and see how to set it up !

The line has its own dataset. In our example, it is my_dataset_1

In the chart parameters menu, I open the optional parameters and configure the line options.

bubble line

Add a bisector

It could also be nice to have a bisector in order to see the bubbles repartition at a glance. Are my products above or under the objective ?

How to do that ?

In the chart parameters menu, I open the optional parameters and configure the bisector options.

bubble bisector

You can either choose to add a hardcoded bisector or to add a bisector based on a dataset like in our example.

Add quadrant

Sometimes, you may want to add quadrants instead of a line or bisector in order to analyze your products the BCG matrix way. You can either choose to add a hardcoded quadrant, a dynamic quadrant from a dataset, or a quadrant from decile.

  • Hardcoded quadrant : I fill in values to statically position my quadrant
  • Dynamic quadrant from a dataset : I choose values from one of my dataset to dynamically position my quadrant (it can be the one used for the chart but also another one)
  • Quadrant from decile : I choose a number between 1 and 10 and Toucan automatically divides the chart (each decile represents 1/10 of the sample or population)

How to do that ?

In the chart parameters menu, I open the optional parameters and configure the quadrant options. In our example I choose to add a hardcoded quadrant.

bubble quadrant

You also have the ability to add color coding and a quadrant legend.

Other configuration examples

Warning

These examples are from the code mode. ⚠️ the chartOptions & data are deprecated, make sure to use de datasets/charts configuration.

Ex1: Simple Bubblechart with filter

Visualisation

chart ex0

chart ex0

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

country region gross profitability imdb_score
USA North America 55.215 1.544 6.637
UK Europe 16.350 0.533 6.678
France Europe 32.440 1.172 6.818

Configuration

level: 3
parent_id: 50
id: 50001
title: 'Simple Bubblechart with filter'
chartOptions:
  data:
    query:
      domain: 'main_country'
  chartType: 'new-bubblechart'
  label: 'country'
  cx: 'imdb_score'
  cy: 'profitability'
  r: 'gross'
  filters:
    'upper-middle':
      on: 'region'
      type: 'dropdown'
      defaultSelected: 'South America'
Ex2: Bubblechart with units and precision

Visualisation

chart ex1

chart ex1

Dataset Here is a sample of rows of the dataset (i.e. domain) used:

country region gross profitability imdb_score
USA North America 55.215 1.544 6.637
UK Europe 16.350 0.533 6.678
France Europe 32.440 1.172 6.818

Configuration

level: 3
parent_id: 50
id: 50002
title: 'Bubblechart with units and precision'
chartOptions:
  data:
    query:
      domain: 'main_country'
    precision:
      imdb_score: '.1f'
      profitability: '.1f'
  chartType: 'new-bubblechart'
  label: 'country'
  cx: 'imdb_score'
  cy: 'profitability'
  r: 'gross'
  units:
    gross: ' $m'
  filters:
    'upper-middle':
      on: 'region'
      type: 'dropdown'
      defaultSelected: 'South America'
Ex3: Bubblechart with drill

Visualisation

chart ex1

chart ex1

Dataset

Here is a sample of rows of the dataset (i.e. domain) used:

country region bubble_label gross imdb_score duration bubble_type
USA North America USA 55.215 6.637 109.234 main
UK Europe UK 16.350 6.678 111.839 main
France Europe France 32.440 6.818 107.476 main
USA North America Action 60.135 6.829 110.225 sub
USA North America Drama 52.287 6.912 109.879 sub
USA North America Comedy 56.675 6.514 108.112 sub
UK Europe Action 17.343 6.572 111.848 sub
UK Europe Drama 15.900 6.689 111.930 sub
UK Europe Comedy 18.128 6.782 111.301 sub
France Europe Action 1.172 6.717 107.998 sub
France Europe Drama 1.172 6.890 107.467 sub
France Europe Comedy 1.172 6.515 107.209 sub

Configuration

level: 3
parent_id: 50
id: 50005
title: 'Bubblechart with drill'
chartOptions:
  data:
    query:
      domain: 'main_country'
    precision:
      imdb_score: '.1f'
      profitability: '.1f'
  chartType: 'new-bubblechart'
  label: 'bubble_label'
  cx: 'imdb_score'
  cy: 'duration'
  r: 'gross'
  filters:
    'upper-middle':
      on: 'region'
      type: 'dropdown'
      defaultSelected: 'South America'
  drill:
    group: 'country'
    level: 'bubble_type'
    levelsOrder: [
      'main'
      'sub'
    ]
  units:
    gross: ' $m'

Enjoy!