block by vijithassar 3cc6ecbc0a8dcfaf4e47f44b97637012

pie chart segment sorting

Full Screen

In The Wall Street Journal Guide to Information Graphics, Dona Wong suggests a clever and unusual algorithm for sorting pie chart segments: the two largest pieces should appear at the top of the chart, on the right and left hand sides of the 12 o’clock position. This aligns the two most consequential data points on either side of a shared vertical axis, allowing for more natural comparison than simply positioning each segment in the original input order.

The pie chart layout generator from d3-shape provides the .sort() method for custom sorting. To implement this segment sort you’ll need to provide the complete data set to the sorting function so each value can be situated in context to determine which are the two largest – for example, by closing over it with a factory which returns the comparator function. You could also accomplish the same thing by manipulating the data set directly, but pairing the sorting logic with the layout generator is clearer and more concise, particularly when rendering a lot of charts.

index.html

pie.js

style.css