SHARC
Scale
Hierarchy
Axis
Readability
Color
What is SHARC?
SHARC is a beginner’s framework and guide for designing data graphs and charts. It stands for Scale, Hierarchy, Axis, Readability, and Color. Below are examples to illustrate each letter in SHARC.
Scale
Consistent scale divisions ensure the range in values are accurately represented.
Bar Chart
Here, scales across y-axis is not consistent. From the difference of 10 unit, it changed to difference of 20. Visualizing trends could be misleading in such cases. However, scale breaks could be used to represent extremely high/low data points.
Pie Chart
The sum of slices is not adding up to 100%. This is one of the common mistakes when it comes to representing data on a pie chart. Pie chart is better for representing part to whole data.
Small Multiples
Keeping the scales consistent is even more important when it comes to small multiples. Standardizing the scales helps in comparison otherwise it could give wrong inference.
Histogram
Histogram shows the distribution of data. In this case, 60-70 and 70-80 should have been shown empty to show 0 value in those two bins. This could have given a clear picture about the frequency distribution.
Bar Chart
Keep the Y axis scale consistent. Inconsistent scale divisions can lead to a misleading visualization.
Histogram
If there is a number on the Histogram scale that has an empty bin, leave the number to keep the scale consistent. Removing the number to not show the empty bin would distort the pattern of the distribution.
Hierarchy
Hierarchy gives a visual path to the overall visualization. First orient the reader with an accurate and concise title. The title tells readers whether something specific in the data is being presented or if the data is being presented equally for them to navigate. The visual elements and overall visual balance of the visualization should support the title.
Bar Chart
In this visualization, all the elements inside the visualization carry similar weight. There is no clear path for the viewer.
Pie Chart
Depending on the purpose of chart, we can use color to bring contrast to the slices of pie chart. However, in this case one slice is taking all the attention.
Boxplot
Lengthy title could sometime take unwanted attention and distract the viewer from the main story. In this case, the title is grabbing a lot of attention.
Histogram
Sometimes, inappropriate use of color could lead to unwarranted attention. However, the decision to use contrasting color could depend on the purpose of creating that chart.
Pie Chart
Font color and size, one color popping out on the pie chart, and overall balanced placement of the elements, all support something specific being highlighted in the data for the reader to navigate.
Histogram
Font colors and size, the use of one color for the chart's bars, and an overall balanced placement of elements, all support data being presented equally for the reader to navigate.
Axis
Axis plays an important part in making sense of a visualization. Oftentimes, it's important to follow the "zero rule" (the axis starts at 0). There are times, though, where it is required to modify the axis to suit our purpose. It can also vary depending on the choice of visualization.
Bar Chart
In bar chart, if we truncate the y-axis, it could mislead the viewers. In such cases, even the small difference across categories could look like a big difference. However, 'zero rule' may not necessarily apply to other chart types including line chart.
Pie Chart
Although the axis is not clearly pronounced in pie chart, it is generally recommended to start the slices from either 0 or 90 degrees, in order to make a pie chart easy to read.
Small Multiple
It is extremely important to keep the axes same in small multiple. Not keeping it same would hinder the inference capabilities of viewers and would most likely result in wrong insights. In this case, both should have started from 30 or 40.
Back to back
Here, it is difficult to compare across categories in back to back chart. It could have become easier to gather insights if the categories on the y-axis were arranged in either ascending or descending order.
Bar Chart
Make sure that the Y axis starts with zero; otherwise, the relative distance between the categories could be skewed.
Boxplot
In case of boxplots, one can break away from "zero rule"; otherwise, the boxplots could look skewed and it could be difficult to compare summary statistics.
Readability
Readability can be defined differently by different designers, but for this guide, it means clearing visual clutter, using simple, sans-serif fonts, and simple visual elements (no 3D or drop-shadows, for example).
Bar Chart
Making the grid more pronounced could impact the readability of overall chart. This is something Edward Tufte, called as 'chart junk'.
Pie Chart
Often it is fascinating to see the charts in 3D but most of the time, it's difficult to read 3D charts. It creates confusion because of depth of field.
Back to back
Adding icons and graphics could create additional clutter in the visualization. However, graphics have their own benefits. Studies have shown its impact on improved chart memorability.
Histogram
One should always be careful while using "attractive" typefaces. Some typefaces could seriously hamper the readability. Also, make sure define a minimum font size for accessibility reasons.
Pie Chart
By using a single, sans-serif font, flat visual elements, and limiting the visual elements to only what is needed to read the chart, the focus is on reading the data.
Bar Chart
This example is given only to make the point that the lines work in this chart, but sometimes they are unnecessary and cause clutter. So try taking them out and see which works better for readibility.
Color
Color should be used sparingly and intentionally as you learn how color impacts understanding. That said, experimentation is encouraged for you to do your own comparisons. All charts should be checked for color accessibility standards.
Line Chart
Using more that 3-4 different color is generally not recommended. This could become cognitive load for the users.
Pie Chart
While using color in pie chart, one needs to be extra careful. Here, the contrast between the slices are not enough to distinguish them clearly.
Small Multiple
Here, it is extremely difficult to read the chart. It is recommended to have enough foreground to background contrast to ensure the legibility. Further reading: W3 accessibility guidelines.
Histogram
One should not use color just for the sake of adding it. It should serve some purpose. For example, in the about visualization, we're not getting any additional information by using color.
Line Chart
It is easier to navigate charts with minimal use of color. Use multiple colors only if is central to what you are trying to highlight.
Small Multiples
Make sure to have sufficient background to foreground contrast for text and graphical objects. Further reading: W3 accessibility guidelines in our References & Resources > Accessibility & Color.