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.

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 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 🙂

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 🙂

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.

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!