Tag Archives: Pie chart

Flat design

Flat design, a simple design approach that focuses on usability and readability, has seen increasing popularity recently with Microsoft, Facebook, and Apple amongst others choosing to adopt it. The hallmarks of flat design include two-dimensional illustrations (no shadows) with simple geometry and solid colors.

While Microsoft is often credited to be among the first to apply flat design to its interface, their charts have not been updated yet. In the example below, we compare a simple pie chart with default settings in Aploris (1) and with PowerPoint’s native graphing tool (2):

Pie chart in flat design vs. 3D view

You will notice that the PowerPoint version has a shadow and all the colors seem to have a gradient. Under the flat design doctrine we would argue that these embellishments do not add any information and therefore serve to distract the reader. In addition, Microsoft’s native charts support 3-D graphs which typically have no place in business presentations and also serve to confuse the reader.

At Aploris, we hope to continue improving our aesthetics but not at the cost of usability and readability.

 

Pie vs. bar charts

The primary strength of the pie chart is the obvious message of the “part-to-whole” relationship in visually appealing way that can be appreciated by all (see Choosing the right chart type). Bar charts with stacking and/or proper labeling can also achieve this message but in a slightly less intuitive manner. Beyond this small advantage, however, it’s often argued that pie charts are the least effective form of graphs (e.g. on Wikipedia or in Edward Tufte’s “The Visual Display of Quantitative Information”).

The size of elements in pie chart can be fairly easily estimated when the element begins at 0, 90, 180, or 270 degrees. If, however, it starts at a different angle the size of the element becomes much more difficult to estimate. In the first example below, the blue element is easily approximated at 25%. In the second example, when the chart has been rotated, the size of the blue element is more difficult to estimate.

Pie chart orientation

The eye can quickly compare differences location and line length (as used in bar charts) but has difficulty discerning differences in angles and areas (as used in pie charts). In the first three examples below, you can quickly arrange the elements from largest to smallest. In the third example, however, it takes a little longer to ascertain that that D is larger than B.

Size order column and pie chart

Furthermore, it’s easier to extend bar charts into Mekkos where you can quickly compare the width of each bar. To extend the pie chart you have to create multiple pie charts where the total area or diameter is used to compare data sets; a comparison that is not always easy to make. In the first example below, you can quickly discern that the bar W is about 5 times wider that than bar Q. The second example, however, it is much more difficult to determine that pie W is 5 times the area of pie Q.

Marimekko and pie chart area

Pie charts can be used to effectively display very simple data in a visually appealing style. However, if the data has any complexity at all, forgo the stylistic points and opt for the more effective bar graph.