Off-center pie charts
Let’s say that you have a typical pie chart. it may look like this:
But what if we allowed ourselves to move the center of the circle while keeping the areas the same? Then we could make it look like this:
Both charts are split into four areas of the same relative proportion — 40% grey, 30% blue, 20% orange, and 10% green. But the second pie is cut using just two straight lines, in such a way that the central angles of the pie slices are as similar as possible.
What do you think? Is that better? Would you ever cut a pie this way?
The second chart has a certain aesthetic quality that sparks my curiosity. Each pie slice is, in some sense, as chunky as possible; no slice is too thin. This becomes especially evident if we draw a chart that has highly disparate slices, like this:
or with just 3 areas:
or with 5:
In each case, the chart on the right is designed in a way that seeks to minimize the disparity in the central angles of the slices — the difference between the largest and the smallest angle is as small as possible. The effect is to keep all of the slices as circular, as “blob-like”, as possible. Sometimes, this requires reordering the slices, as you can see in the last example.
If you want to play with your own off-center pie charts, you can do that here:
How the math works
This was surprisingly tricky to implement. Here are some observations that simplify the problem.
Firstly, if we allow the center to move within the circle, then we may as well restrict that movement to the positive x-axis. Every other direction is rotationally symmetric. This is why all of the examples of off-center pie charts above have the center shifted to the right. Let’s call this parameter x — the amount that the center has been shifted to the right. Assuming that the radius of the circle is 1, x is between 0 and 1.
Secondly, there are only two other parameters that we can play with — the ordering of the slice percentages (p), and the angular offset of the first slice (theta). Everything else is determined by these three parameters.
Beyond these observations, things get tougher. There doesn’t seem to be an obvious way to determine the optimal ordering of the percentages, so we are forced to try all permutations of them. Fortunately, most pie charts have only a handful of slices, so the number of permutations is usually manageable.
And even when we are given a particular permutation, the other two parameters, x and theta are not trivial to compute. The code on this page brute forces all values of theta to a precision of 0.2 radians, and then does a ternary search for x. I haven’t proved that the problem is actually convex in x, but that seems plausible enough, and the search seems to converge to a reasonable value in all of the examples I’ve tried. If you fine one that breaks it, please let me know.
We could, of course, brute force x as well at the cost of some extra computation time. Given that the examples above have to be rendered fairly quickly, in JavaScript, I chose to go with the ternary search compromise.
Feel free to reverse-engineer the source code of this page, if you are interested in how this works. It’s all in this page, and I haven’t obfuscated any of it.
