04 Sep 2009 Opinions , ,

How can we upgrade a 3D Piechart?

Recently mashable.com published this post regarding the market share of internet browsers. The author focused on how well Google Chrome could establish itself in it’s one year existence. To visualize the market share of some of the most popular browsers the author used a diagram from Market Share / Netshare.com. It’s one of the stereotypical 3D Piecharts we all know from tools like Excel or PowerPoint. I mainly struggled to read the pointers to the smaller wedges. I took this struggle as inspiration for a quick redesign of the chart.

The original

On the left hand side we have the color coded 3D Piechart with the percentage of market share as digits. On the right we see a legend listing the browsers by color and again the percentages.

browser-share

The refinement

  • dv_browsers_barchart_01Pure data
    I reduced everything to the bare data—just the percentage and the name of the browser. Already clear and understandable but maybe a visual representation could improve for intuitive reading…
  • dv_browsers_barchart_02Horiziontal barchart
    With a horizontal Barchart next to the browser name we show the varieties in a relative manner. Colors can be dismissed but for the sake of focus on Google Chrome I introduced red as a “signal color“. I am not yet sure about the position of the digits, therefore…
  • dv_browsers_barchart_03Position of digits
    Moving digits closer to the barchart would describe the bars better and would give the reader an immediate indication about the absolute values that are represented. But should they be aligned to each other or rather…
  • dv_browsers_barchart_04Aligned digits to the bars
    The placement of the numbers right next to the bars may harm readability of the numbers in sequence a bit but it lets the viewer focus faster on the promoted value (Chrome’s market share in this example). Reading a vertical barchart isn’t as common as a horizontal one, so let’s try another version.
  • dv_browsers_barchart_05Horizontal alignment
    Once horizontally aligned, the barchart seems easier on the eye. Reading from left to right to the promoted value is intuitive and the position of the percentages feels natural. But the labels are too long for a horizontal alignment and the abbriviations don’t feel common enough to be used (GC, anyone?) — is there a solution for this regarding the web-savvy audience of mashable.com?
  • dv_browsers_barchart_06From name to icon
    As any of the labels represents a brand itself (beside the nasty “other”), and as these come with a memorable logo (used on websites, as favicons, as the application icons, etc.) it is a save option to use the logo itself as the representation. This saves screen real-estate and helps avoiding the usage of uncommon abbriviations. Also we can get rid of the underline to clean up the visualization even more.
  • dv_browsers_barchart_07Removing the metrics
    Update: removing the % sign from the actual digits helps getting faster to the numbers. As suggested in the comments from Taurice and Naomi I moved the metric to the title and thus leaving the visualization even cleaner and better readable.

Any suggestions?

That’s it for this quick analysis and refinement. Did I neglect something that is present in the original graphic? Or could I reduce it it more to make the graphic even easier to read? Any of your comments would be highly appreciated.

Share this article

Subscribe for more

Subscribe with RSS Join our 16545 Readers

Give Feedback

  • http://www.colorful-data.net/ Paul

    I noticed something regarding how the data is handled…
    For example, Netscape has 0.49% market share. In the piechart by mashable.com, it’s rounded to 0% but still has a small wedge (look at chart and cover the legend).
    In the vertical bar chart solution, the values are rounded to one decimal place for space saving — Netscape has 0.5%.
    My suggestion: Netscape is one of the ‘other’ browsers. This would be a much more efficient way to save screen space.

  • http://www.colorful-data.net Paul

    I noticed something regarding how the data is handled…
    For example, Netscape has 0.49% market share. In the piechart by mashable.com, it’s rounded to 0% but still has a small wedge (look at chart and cover the legend).
    In the vertical bar chart solution, the values are rounded to one decimal place for space saving — Netscape has 0.5%.
    My suggestion: Netscape is one of the ‘other’ browsers. This would be a much more efficient way to save screen space.

  • http://iamrece.com/ Taurice Couser

    Very nice explanation and refinements. The percentage symbols get a bit redundant being shown for each value. Keeping the percentage symbol only for the highlighted Google Chrome, and removing the others might be enough to imply all values are dealing with percentages (and that Chrome has it shown because it is highlighted). Also “other” could possibly be replaced by “n/a.” Not Applicable might be misleading as it may lead viewers to think there was no logo image for this single brand, but it could be worth using “n/a” and getting some fresh eyes on it for opinions.

  • http://iamrece.com Taurice Couser

    Very nice explanation and refinements. The percentage symbols get a bit redundant being shown for each value. Keeping the percentage symbol only for the highlighted Google Chrome, and removing the others might be enough to imply all values are dealing with percentages (and that Chrome has it shown because it is highlighted). Also “other” could possibly be replaced by “n/a.” Not Applicable might be misleading as it may lead viewers to think there was no logo image for this single brand, but it could be worth using “n/a” and getting some fresh eyes on it for opinions.

  • http://www.nbr-graphs.com/ Naomi B. Robbins

    Certainly your figures are a huge improvement over the originals. However, the repeated percent signs clutter the numbers and make them harder to read. If you choose to label your bars, I would prefer percent in the title or as an axis label so that the digits stand out better.

  • http://www.nbr-graphs.com Naomi B. Robbins

    Certainly your figures are a huge improvement over the originals. However, the repeated percent signs clutter the numbers and make them harder to read. If you choose to label your bars, I would prefer percent in the title or as an axis label so that the digits stand out better.

  • http://www.artillery.ch/ Wiederkehr

    Thanks for the suggestions Naomi and Taurice. I’ve added another version with the removed % sign — it looks cleaner and introduces the metric already in the title which is a nice side effect.

    @Paul: I was also confused by the different digits and the wrong indication for 0% in the original chart.

  • http://artillery.ch Benjamin Wiederkehr

    Thanks for the suggestions Naomi and Taurice. I’ve added another version with the removed % sign — it looks cleaner and introduces the metric already in the title which is a nice side effect.

    @Paul: I was also confused by the different digits and the wrong indication for 0% in the original chart.

  • Pingback: How to fix a broken pie chart at This is the Green Room

  • http://ow.ly/i/7R daniel

    Look at this…

  • http://ow.ly/i/7R daniel

    Look at this…

  • http://twitter.com/datavis/statuses/3887987520 datavis (Datavisualization.ch)

    @dcattaneo: What were you referring to in the comment on http://www.datavisualization.ch/?p=3030 ?

  • bob

    I know it’s not usually done, but it would useful to have some kind of indication of where 100% is visually. This is the one thing that a pie chart does better than a column chart. Perhaps a subtle box around the whole chart area at 100% or a line. The price for this would be smaller columns and more white space.

    • http://www.artillery.ch/ Wiederkehr

      You’ve mentioned something that I’ve been running into repeatedly: Piecharts do a good job of showing vaguely “how much is something in regard to the whole”. While barcharts are excellent for comparing values directly and precicely, they lack an easy way to communicate values per cent.

      Giving the visualization some context over the maximum with a subtle line or box would be one way—are there any other suggestions for this taks?

  • bob

    I know it’s not usually done, but it would useful to have some kind of indication of where 100% is visually. This is the one thing that a pie chart does better than a column chart. Perhaps a subtle box around the whole chart area at 100% or a line. The price for this would be smaller columns and more white space.

    • http://artillery.ch Benjamin Wiederkehr

      You’ve mentioned something that I’ve been running into repeatedly: Piecharts do a good job of showing vaguely “how much is something in regard to the whole”. While barcharts are excellent for comparing values directly and precicely, they lack an easy way to communicate values per cent.

      Giving the visualization some context over the maximum with a subtle line or box would be one way—are there any other suggestions for this taks?

  • http://periscopic.com/ Kim Rees

    The 100% issue is the only reason I like pie charts. I also like mosaic plots for that reason. It gives you the relation to the whole.

    I prefer your bar chart in this scenario (with small percentages). You could perhaps make them all the same height and change the width, in essence creating a rectangular pie chart… or a cake chart perhaps. But that leaves you with the same problem the pie chart has (small sections that require a callout for a label). I like bob’s idea of a dotted line across the top to denote the 100% mark, although that potentially leaves you with a lot of whitespace.

    • http://www.artillery.ch/ Wiederkehr

      Mosaic charts seem a solid solutions vor multiple variables. I’ll do a makeover of the visualization to see whether a line representing 100% would do a good job clearing things up.

      If some of our readers would like an introduction to mosaic plots, I recommend reading this definition from Steve Simon.

  • http://periscopic.com Kim Rees

    The 100% issue is the only reason I like pie charts. I also like mosaic plots for that reason. It gives you the relation to the whole.

    I prefer your bar chart in this scenario (with small percentages). You could perhaps make them all the same height and change the width, in essence creating a rectangular pie chart… or a cake chart perhaps. But that leaves you with the same problem the pie chart has (small sections that require a callout for a label). I like bob’s idea of a dotted line across the top to denote the 100% mark, although that potentially leaves you with a lot of whitespace.

    • http://artillery.ch Benjamin Wiederkehr

      Mosaic charts seem a solid solutions vor multiple variables. I’ll do a makeover of the visualization to see whether a line representing 100% would do a good job clearing things up.

      If some of our readers would like an introduction to mosaic plots, I recommend reading this definition from Steve Simon.

  • http://michaelvandaniker.com/ Michael VanDaniker

    You could use concentric rings to merge the best features of pie charts and bar charts. In such a visualization a full 360 degrees would represent 100%. It would be obvious that a wedge that wraps halfway around the circle represents 50%, and you’d still able to compare one datum to another because the rings would be side by side. The problem you might run into is that the rings in the center might appear less important because they take up less space than comparable rings on the outer edge.

    • http://www.artillery.ch/ Wiederkehr

      Thanks for the suggestion, Michael. I agree with both, the pro and the contra for the concentric rings. The ring close to the center of these rings appears to be much smaller than the one on the periphery. Thus we need the user to ignore this information and instead focuse on the radius of the rings.

  • http://michaelvandaniker.com Michael VanDaniker

    You could use concentric rings to merge the best features of pie charts and bar charts. In such a visualization a full 360 degrees would represent 100%. It would be obvious that a wedge that wraps halfway around the circle represents 50%, and you’d still able to compare one datum to another because the rings would be side by side. The problem you might run into is that the rings in the center might appear less important because they take up less space than comparable rings on the outer edge.

    • http://artillery.ch Benjamin Wiederkehr

      Thanks for the suggestion, Michael. I agree with both, the pro and the contra for the concentric rings. The ring close to the center of these rings appears to be much smaller than the one on the periphery. Thus we need the user to ignore this information and instead focuse on the radius of the rings.

  • http://www.artillery.ch/ Wiederkehr

    Pedro Monteiro from whatype.com has suggested the following visualization of the same data. 100 per cent are represented by 10 on 10 blocks and the different parts are distinguished by color.

    The image on the left is the actual refinement and the right image compares screen real-estate between the pie- and block-chart. One thing I would criticize are the difficulties with parts smaller than one per cent.

  • http://artillery.ch Benjamin Wiederkehr

    Pedro Monteiro from whatype.com has suggested the following visualization of the same data. 100 per cent are represented by 10 on 10 blocks and the different parts are distinguished by color.

    The image on the left is the actual refinement and the right image compares screen real-estate between the pie- and block-chart. One thing I would criticize are the difficulties with parts smaller than one per cent.

  • pizzza

    Fascinating challenge, simplification. I think you nailed it.

    However, the original issue in the article was annual growth. I took the information in the table at http://marketshare.hitslink.com/browser-market-… and plotted a line graph of browser relative market share and came up with: http://parseerror.com/vis/how-can-we-upgrade-a-…

    There's nothing like relative growth figures to blow things out of proportion, that's why the stock market people love it.

    (the data and numbers are current for Apr 22, 2010 and do not match the original figures)

  • http://www.artillery.ch/ Wiederkehr

    Thanks for including my example in your collection.
    Unfortunately I can't see the linked image as it is redirecting me to a diagonal.png — could you provide a working link?

  • pizzza

    Whoops, sorry. Try again.

    Also, I added an entry for this on http://www.parseerror.com/vis/ under “Good”.