Circularchart Tutorials

Step by step tutorial

The user story

I’m a local manager in a national retail company. I want to better understand my financial repartition for my lines of business.

What are my top/flop categories? Between all of my segmentations, which shop is performing the best?

As I’m looking for the part-of-whole, let’s do a circularchart.

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 circularchart, it’s very easy! All we need are two columns: label and value.

  • a label column: this will define the name of each of the segments you want to display
  • a value column: this will define the segment value

Many other options are available if you want to add some extra informations to your viz. Here are some examples of how you can make it shine:

  • Legend option : this will add a block where you will find all the values of your segment.
  • Additional info column: You can add as many additional info as you want. They will be displayed in the legend when focussing on a segment.
  • Segment selected by default option: this will select by default one of your segment.
  • DRILL option: It’s the perfect option if you want to explore the repartition of your segmentation
  • MAX NUMBER OF ARCS PER LEVEL option: this will display as many number of arcs as you want (by default set at 4).

You can find out more about these different options here 👈.

If you don’t have any data to use, feel free to use our amazing fake data generator Design First!, which is also available in beta mode in the studio.

Chart Parameters

You can pick the following dataset:

CA Target Branch level 2
3660878 3282008 Sports
7543800 6842574 Hairdressers
6189712 6401056 General Alimentation
9889564 8293278 Technologie
4756526 5098616 Fashion
6709196 5752026 Services
1050796 654632 Family Fashion

Once I have gathered the data I need, I can choose to configure a leaderboard.

I just need to fill the dataset,label and value fields, and that’s it! ✨

circularchart parameters

Add a selected segment by default

You can use the Segment selected by default option to focus the analysis on a dedicated segment.

To make the ↗️ appear, go the chart parameters menu and add the optional parameter Legend to your configuration:

circularchart selected segment

With Legends and Additional Info

You can use the Legend and the Additional info optionals parameters to provide some deeper information to your users:

with legends

With Filters

A nice way to make your charts more interactive is to add a filter/requester on it. With a circularchart, it could be nice to switch between the value of my revenue and the percentage of each segment.

In order to do it, let’s play with YouPrep™:

1/ You can add a Percentage of total step to generate a new column containing the % of each category:

youprep compute row percentage of

youprep compute row percentage of

Your dataset now looks like: youprep percentage of total

2/ Unpivoting your data will allow you to have your revenue and % of revenue in the same column. youprep unpivot

3/ Then add your Filter/Requester to your story: youprep filter

And here you go!!! circularchart with filter

With Hardcoded number of Arcs

If you want to display all your Arcs you can plau with the MAX NUMBER OF ARCS PER LEVEL option in the Display pannel:

hadcoded number of arcs

hadcoded number of arcs

With Drill

You can add the following datasources to your app:

Branch level 2 Retailer name CA Target
Services Agence 4 312741 209407
Services Agence 4 312741 209407
Services Agence 5 263380 191184
Services Agence 5 263380 191184
Services Boutique 33 232729 232729
Hairdressers Boutique 6 254826 209407
Hairdressers Boutique 6 254826 209407
Hairdressers Boutique 2 242134 186962
Hairdressers Boutique 2 242134 186962
Hairdressers Magasin 18 228373 175715
Technologie Boutique 11 394119 394119
Technologie Boutique 11 394119 394119
Technologie Boutique 18 394119 394119
Technologie Boutique 18 394119 394119
Technologie Boutique 18 318285 202920
General Alimentation Magasin 9 249213 260350
General Alimentation Magasin 9 249213 260350
General Alimentation Magasin 8 249143 191184
General Alimentation Magasin 8 249143 191184
General Alimentation Magasin 11 238075 249213
Family Fashion Boutique 8 322186 209407
Family Fashion Boutique 8 322186 209407
Family Fashion Boutique 9 203212 117909
Family Fashion Boutique 9 203212 117909
Sports Agence 1 216604 194159
Sports Agence 2 216604 148282
Sports Agence 3 216604 194159
Sports Agence 4 216604 148282
Sports Agence 1 216604 194159
Fashion Magasin 3 335471 216604
Fashion Magasin 3 335471 216604
Fashion Magasin 7 210622 245916
Fashion Magasin 7 210622 245916

1/ You can start by adding a hierarchical rollup step with Youprep™:

youprep hierchical

youprep hierchical

2/ Then Switch to the Charts configuration and select the label generated thanks to the Hierarchical rollup step:

circular drill label

circular drill label

3/ Go to the Drill section and add the columns defining your hierarchy:

Note

You need to add as many columns as hierarchy level you want. Take the same order as the hierarchical columns from the first step of this tutorial.

circular drill hierarchy

circular drill hierarchy

4/ So easy isn’t? 🔥

circular drill final

circular drill final

With Crossfilter

Crossfilter is a really powerful option to showcase dynamically another chart based on the selection of a main chart. Ex: We want to display in a circularchart the segmentation of my CA and the repartition of the CA between my shops in a secondary chart:

1/ In order to create this configuration, you need to create a primary chart: here let’s create a circularchart:

circular crossfilter first

circular crossfilter first

2/ Define the chart configuration:

circular crossfilter second

circular crossfilter second

3/ You can now create your secondary chart based on the following data:

circular crossfilter slave first

circular crossfilter slave first

4/ It should look like this with a leaderboard:

circular crossfilter slave second

circular crossfilter slave second

5/ Our primary and secondary chart have been created. We can set up the crossfilter configuration

circular crossfilter configuration first

circular crossfilter configuration first

6/ You need to select the column on which your column will be filtered

Important

On Column parameters should match exactly the output label column selected in your primary chart. SELECT THE FILTERED DATASETS parameters should match the dataset on which you want to apply the filter.

circular crossfilter configuration final

circular crossfilter configuration final

7/ Not that complex isn’t??

circular crossfilter tadal

circular crossfilter tadal