An icon array chart is a rectangle or square grid of equal-sized icons. The whole set of icons represents the total value. Each icon shows a proportion from a total value. Groups of icons representing the same category are filled with the same color or have the same shape.
Icon array charts are used to visualize part-to-whole data. They are often used for visualizing surveys, voting results, market shares, demographic data, and many more.
Icon array charts might be considered as a successor of the Isotype pictorial language whose purpose was to make data visualization more accessible. That’s why icon array charts, being extremely easy to interpret, are often used to simplify the presentation of data.
A grid size should be chosen based on the data used. A balance between readability and accuracy should be achieved. A grid with a few icons is good for readability but lacks accuracy as rounding to an icon value will be too rough. On the other hand, the smaller icons will be more accurate but due to the smaller size of icons, a chart will be harder to read. As a rule of thumb, a 10 by 10 grid is an optimal solution as it also allows us to show the percentages of each category visually.
Icon array is a tough chart to label the categories directly, as the positions of the groups of icons can vary from chart to chart and it’s hard to find a proper placement for direct labels. The optimal solution for an icon array is using a legend. It can be placed independently of the chart and allows users to update a chart without changing the location of the labels.
For a progress array chart the coloring rule is easy: use dark color for completed icons and light or no color for non-completed. For an icon array chart with multiple categories, one should consider accessibility and use a colorblind-friendly palette or bind a unique icon for each category.
Icon charts are perfect for showing progress or visualizing a boolean variable (a variable with only two possible values: “Yes” or “No”, “True” or False” etc.). It can be done by using a filled icon for the first value and outlined for the second value.