Candy pie: a configurable, interactive 3d pie chart in your browser

I have seen very impressive Babylon demos recently. This one, a 3d pie chart, is way more basic. Slices are build via Constructive Solid Geometry, and the camera’s field of view is set dynamically, just to name two features used.

All comments welcome, especially remarks how such pie chart could have been coded even in a more straightforward way.

Configuration of the pie chart is on top, in the pie3d object.

I plan to publish the code later on Github.



For a full cake slice you could use a cylinder

You would still need csg to take out the middle bit.

Another way would be extrudePolygon

In included the axes and the ground to show that using an extrudedPolygon its zero position is at the base of the polygon.

Change inner radius to 0 for a sector (line 16)

Hope this helps.


Thanks for the suggestions.

I opted for CSG, whereby I subtract a full cylinder from a wider cylinder, using the arc parameter on the latest. CSG played nicely with faceUV and drawText on a texture, using the background color of drawText to color the 6 sides of the slices, and eventually have a label on the front side.

I moved the code over to the playground :

1 Like

Putting my old maths teacher’s hat on a pedantic statistical display point.

When displaying one set of data in a pie chart with segments of different heights then it is the volume of the segment that needs to be proportional to the data point not the arc. It then becomes a balance between the angle and the height so all in all for one set of data stick to same height.

For two sets of data you could use height for one of them, e.g.

Angle - proportion of average income for a group of countries

Height- percentage of home ownership for each country in the group.

1 Like

Wow. Even just the text is well beyond my capacities :dizzy_face: :smile:
So much efforts for a pie chart when we all perfectly know that this chart is likely to be used by ‘faen’ marketing teams only to display twisted numbers with FX, turning an identified failure and poor metrics into a success, for the sole purpose of keeping their job after presenting the result of their clumsy and costly campaign to VPs and administrators :laughing: Question is: Is it really worth it? :thinking: :stuck_out_tongue:

Is it really worth it?

@mawa : I learned a few things, had some fun, and by “releasing” it, I was pushed even a little further, so for me, yes, worth it.

By the way, faen ?

it is the volume of the segment that needs to be proportional to the data point

@JohnK : indeed, that’s how all 2d pie charts I saw determine the angle, and all 3d versions I have seen only add a fixed height to it, so I opted for a different approach, translating the values to the height of the slices. And with the arcPct parameter one can still steer the angle.

But I really like how you distinguish them, by referring more explicitly to two data sets. I should probably rename value to height, and add an option to include both of them on the label.

ps: copied from Data Driven Storytelling Tip #8: Don't Use Pie Charts - Evolytics

Study after study has shown that pie charts are not the most effective means of communicating data. The pie chart’s primary limitation is that people are much better at comparing lengths and heights, as you would see in a bar or line chart, than they are at comparing areas within a pie. Further, the long tail results, or the thinner pieces of a pie, tend to become unreadable.

So with a 3d pie chart, one is not comparing areas, but volumes, and when rotating the chart, the perspective changes. So the visual perception will be way worse than with the already despised 2d pie chart.

But back to sqare one, I had some fun with it.

1 Like

In terms of 3D pie charts you can see the problem if you change the values to be the same for each segment but change the heights, aplles look much more popular than they are.

@thierry makes some very good points.

It was essentially supposed to be a joke. Point is when people come to me asking about a chart it’s usually for this purpose. Glad to hear that there are other applications for it :smiley:

@thierry faen: From norvegian, meaning ‘weird’ or ‘the hell (with it)’ :grinning:

1 Like