·

# The (better) rectangular pie chart

It took me more than two years to write this article because it started back in April 2021: https://www.minceddata.info/2021/04/03/the-pineapple-pizza-debate-or-why-pie-chart-are-not-that-evil/

I learned a few things, but not all about Vega-Lite and Deneb, between then and now. You can find most of these Deneb related learnings here: https://github.com/tomatminceddata/learningdeneb

There are a lot of fancy data visualizations out there, and magical things can be done using Vega and Vega-lite, but still, my favorite is the stacked bar chart.

The below image shows what I’m talking about:

Using Deneb it’s possible to add two features of the pie chart (or donut chart) to a bar chart:

• Ordered slices (the segments that form a stack). I consider the change in position a valuable information.
• Contribution of segments to a given cumulative percentage. Using a pie chart it’s easy (requiring little mental effort) to spot the contributing segments until a given cumulative percentage is reached or surpassed.

## The ordered segments

Since I started staring at data visualizations, I have thought stacked bar charts are missing a valuable feature: the independent ordering of segments inside each stack. From my perspective, the positional change of a segment is more revealing than the easy comparison of the size of a single segment across all stacks.

Ordering is happening at different places inside the json specification:

• Ordered segments The ordering of the segments happens inside the layer of the bar chart: … order": {"field": "xSegmentSort", "type": "ordinal"}, … The field xSegmentSort is calculated inside the transform
• Ordered y-axis (the Calendar year column) The ordering of the y-axis happens outside the layer definition because all layers share the same y-axis ordering.

## the triangle marks

The visual benefit of a pie or donut chart is the ordering of the segments by size. The largest segment (or slice) starts in the top right corner at “12:00”. Smaller segments are ordered clockwise. This is one of the reasons why a pie chart is still considered when the visual task “part-of-a-whole” has to be tackled (from my perspective the only valid reason).

With Deneb, it’s simple to layer various marks on top of each other. I’m using three point marks (shape: triangle-down) on top of a bar mark.

The value for the proper placement is done by using “calculate” inside the transform section of the specification. I decided on a non-obtrusive visualization of the triangles (from my perspective), allowing the user to focus first on the absolute size of the stack and the positional ordering of the segments inside a stack. But it only requires little effort to “concentrate” on the triangles to spot the contributing segments to the accumulated percentage values of 25%, 50%, and 75%. I discussed the design with some colleagues. Please be aware that these discussions are not a scientific survey 🙂

# Data labeling

The visual benefit of a pie or donut chart is the ordering of the segments by size. The largest segment (or slice) starts in the top right corner at “12:00”. Smaller segments are ordered clockwise. This is one of the reasons why a pie chart is still considered when the visual task “part-of-a-whole” has to be tackled (from my perspective the only valid reason).

With Deneb, it’s simple to layer various marks on top of each other. I’m using three point marks (shape: triangle-down) on top of a bar mark.

The value for the proper placement is done by using “calculate” inside the transform section of the specification. I decided on a non-obtrusive visualization of the triangles (from my perspective), allowing the user to focus first on the absolute size of the stack and the positional ordering of the segments inside a stack. But it only requires little effort to “concentrate” on the triangles to spot the contributing segments to the accumulated percentage values of 25%, 50%, and 75%. I discussed the design with some colleagues. Please be aware that these discussions are not a scientific survey 🙂

# Some limitations

Currently, I have no idea how to adjust the data labeling dynamically, for this reason, I use a simple condition to hide data labels if the value is too small. I’m doing this to avoid overlapping of data labels. If you know how to relate the data label to the size of a segment in pixel, please reach out.

Due to these limitations you have to adapt the json template in two places:

• text color for the absolute segment size
• text color for the contribution of a segment to the total value of the stack

The condition to “hide” the data labels is the same. The below snippet shows one of the conditions to “hide” the data label:

``````"color": {
"condition": {"test": "datum['SalesAmount (ms)'] < 11", "value": "transparent"},
"value": "white"
},
``````

Yes you are right, I’m hiding the data label by setting the color of the label to transparent. Until now I have not found a better way to suppress data labeling.

Next to the “size” of the values you might have to adapt the general size of the data labels when your y-axis represents more than 10 stacks.

# How to use the template

Download the theRectangularPieChart.json file from my git repo (https://github.com/tomatminceddata/learningdeneb/tree/main/The%20Templates/theRectangularPieChart).

Import the json as a template when you are creating a new Deneb visual. Here you will find more detailed information on how to do this: https://deneb-viz.github.io/templates

The visual can be easily tranformed to a "stacked" bullet chart by adding a tick mark that then represents a target value. This is what I love the most about Deneb (bringing the power of Vega and Vega-lite), with some imagination a basic chart type (this is good for readabilitiy) can be easily enhanced by layering different marks on top of each other.

Thank you for reading!

Kommentar schreiben

Kommentare: 14
• #1

Lance (Dienstag, 14 November 2023 15:53)

Thank you so much for sharing. This is very impressive. I am able to download the json code but unable to find / get to the sample file. Please share. Once again, thank you!

• #2

Tom Martens (Dienstag, 14 November 2023 18:12)

Hey Lance,
thank you very much for the feedback.
There is no sample file.
Add the Deneb Custom Visual to your Power BI Desktop file.
Add the Deneb visual to a report page.
Add two columns to the visual, one that will be used for the y-axis(the Stacks) and one that represents the segments inside a stack.
Add a 3rd numeric column or measure.
Then, import the JSON as a template.
That's it.

Tom

• #3

Lance (Dienstag, 14 November 2023 19:09)

Tom, what am I doing wrong? See the attached shared pbix.

• #4

Tom Martens (Dienstag, 14 November 2023 20:03)

Hey Lance,
somehow, you managed to get the wrong JSON �

Here you will find your pbix with a new page and the Deneb visual: https://tommartens-my.sharepoint.com/:u:/g/personal/tom_minceddata_com/EfmDFJ9d0GhGtgm5eVF_mQsB3bPfFdWQlZ2FLPKP5EFsMg?e=4rjP9Z

To avoid overlapping, I changed the conditons for the data labeling (the absolute and percentage value).

Tom

• #5

Lance (Dienstag, 14 November 2023 20:37)

Beautiful. Working like a charm. You know what would also be a great add down the road - the ability to group small buckets together in Other, which is also a huge downside in PBI. I know it can be done in Deneb. Thanks again for sharing!!!!

• #6

Tom Martens (Dienstag, 14 November 2023 20:57)

Hey Lance,

happy to hear that it works.

Regarding the "Other": Assuming you have 7 values forming a single stack
5, 1, 1, 1, 1, 1, 1
and have a business rule that is
"An item less than 10% is considered others."
Now, the Others segment is larger than the max value; what to do now?

Thank,
Tom

• #7

Lance (Dienstag, 14 November 2023 21:19)

That would be problematic. I work with large samples, so it (most likely) would not be an issue. The calculation would be based ideally on %, such as anything less than 10 or 15% of the total.

• #8

Lance (Dienstag, 14 November 2023 22:26)

Tom, I updated the above linked file. Also running into strange problems when comparing years. In the bottom left example the year dates were incorrect. However, when a passed in an additional field it corrected itself (bottom right). In another example, not included, it summed up all years. Any ideas?

• #9

Tom Martens (Dienstag, 14 November 2023 22:53)

Hey Lance,

the file from your comment with the link does not show any changes.

Tom

• #10

Lance (Mittwoch, 15 November 2023 00:35)

My apologies. I edited your file. See linked.
https://lancemillercpa-my.sharepoint.com/:u:/g/personal/lance_lancemillercpa_onmicrosoft_com/EZQyqJAyspxPplxE9VWB5zsB5GKazIcXISRRRYJwjifW0Q?e=gUgn6v

• #11

Tom Martens (Mittwoch, 15 November 2023 06:46)

Hey Lance,

you have to ensure that Power BI does not summarize numerical fields like the Year column. You can achieve this in two ways. Either change the default aggregation function (Summarization) in the semantic model to Don't summarize, or change the summarization when you pass the column to the Deneb visual to Don't summarize.
Make sure that you only pass three columns to the visual; for this reason, I removed the make column from the visual in the bottom right corner.

Next, I also adapted the template so that the percentage markers are not shown if only one segment forms the stack.

Thank you very much for helping to refine the template.

Tom

• #12

Lance (Mittwoch, 15 November 2023 14:11)

Excellent. Can you share the updated pbix? The Power BI learning process is never-ending. Thank you again.

• #13

Tom Martens (Mittwoch, 15 November 2023 15:30)

Hey Lance,

here you will find the updated pbix: https://tommartens-my.sharepoint.com/:u:/g/personal/tom_minceddata_com/EZRYMzL59tBGiy5-4EMjXhcB6Hemqlqigh9IkH66iC5vYQ?e=NNOhV1

The top right visual is based on the latest JSON template (download link in the article), no percentage markers at the one-segment stacks.

The bottom visuals are refined because I changed the Year summarization to "Don't summarize" and removed the 4th column from the bottom right visual. But there are still the percentageMarkers for one-segment stacks.

Thanks,
Tom

• #14

Tom (Mittwoch, 15 November 2023 17:26)

Thank you Tom. I published it to Enterprise DNA for help in a further iteration.
https://forum.enterprisedna.co/t/tweaking-tom-martins-awesome-new-pie-chart/53342