Bar charts with icons and most experimenting users

Showing icons instead of the boring colors in charts is an oft-used Infographics technique. I too used it to draw the lower part of a graph.

Now with the PictureBar class, making them in Processing is easy.  The output of the code is akin to this (the icons are only samples, can be substituted by your own icons):

Sample output of the PictureBar program

Sample output after some post processing

The program
The source code of the class is well documented but here are a few pointers as to how the code (in particular the draw() function) works:

1. Given the number of icons to be present in a bar and the distance desired between bars, it determines the width of bars:
• This also fixes the icon size because we know the number of icons to put at each level
2. Select the bar which has the maximum value and determine how many rows of icons will fit in the provided height (the entire height is used)
3. Decide how many icons to put in the last row of the bar with maximum value:
• The total number of icons in this bar will determine the value (in percentage) of each icon
• Decision is based on what number minimizes the desired and represented percentages across bars.
4. The bars are drawn using the given number of icons either from top to bottom or from bottom to top (default)
• However, the rows are always filled from left to right.

Example usage of this class is given in the picturebars.pde file. As I am learning Processing as well as playing with the Mozilla Test Pilot data, this is the result of combining both together (and then post processing the output with Gimp).

A word about the data
The data used here is the user survey conducted as part of the Test Pilot suite. The survey was optional and a total of 4,081 users answered it. Out of these, 3361 users used Firefox as their primary browser or used only Firefox and 279 people either did not answer this question or marked other. The chart here shows the distribution of these pagan beta testers. The exact numbers are given to the right of the graph.

Digging a little deeper
Though the graphics shown here is only for demonstrative purposes, after some analysis there is one interesting observation which can be made.

We know already that the user share of different browsers (as on 27th December 2010) is approximately:

1. Internet Explorer: 46 % of users
2. Firefox: 30 % of users
3. Chrome: 12 % of users
4. Safari: 6 % of users
5. Opera: 2 % of users
6. Mobile browsers (others): 4 %

This safely can be taken to be the prior distribution of web users. This means that an average user (about whose browser preference we know nothing) will be an IE user with 46% probability, a Firefox user with 30 % probability, etc. Further, if we know that they are not Firefox users (that is, have honestly marked on the survey they voluntarily submitted that Firefox is not their primary browser), then using Bayes' rule the probability of being in each class is jacked up by 1/(1 - 0.3) or by about 1.43:

1. 65 % users should be of IE
2. 17 % users should be of Chrome
3. 9 % users should be Safari users
4. 3 % users should be Opera users

By these estimates, those 441 users who are Beta testing Firefox should have been thusly divided:

1. 286 IE users instead of 114
2. 75 Chrome users instead of 243 (!)
3. 37 Safari users (Bang on!)
4. 13 Opera users instead of 47

Now before we conclude anything from here, 441 is not a large number and the 279 people who did not answer this question (or gave other as an answer) could have completely changed our outlook.

With this pinch of salt, there are some interesting hypothesis which can be formed, keeping in mind that these users were beta testing Firefox:

1. IE users either love their browser very much, or they do not experiment a lot
2. Chrome and Opera users love to experiment with other browsers (Firefox)

Of course, one can make lofty claims about the attrition rates of other browsers, but I do not think that the data is sufficient to conclude that.

Any way to test these?

Appendix

1. All logos are taken from the respective Wikipedia entries of the browsers. 
2. Large Firefox logo taken from here.
3. All graphics shared under Creative Commons Attribution-ShareAlike 3.0 license

Also interesting:

1. How long will your browser sessions last