An effective chart includes not only the plot area ( the actual visualization) but also chart elements like font types, element alignment, density of elements and so on. These peripheral elements of the chart give context and clarity to the visualization and are just as important to effective visual communication.
This section covers some important aspects of using elements to create effective visualizations:
Typography refers to all aspects of letter styles including typeface, size, color, and spacing. Picking a good font for your visualization and
Choose fonts that are clear and legible. Serif fonts like Times New Roman are often used for formal or traditional visualizations, while sans-serif fonts like Arial or Helvetica are more modern and linearly simple. Serifs are ornamental strokes added to the ends or vertices of letters to increase legibility, while san-serif mean without serif and refs to letters that are more linearly simple :
Serif font Sans-serif font
Sans-serifs have been preferred in digital environments because the limited resolution of early computer graphics made it difficult to render the fine details of serif fonts. However, advanced in computer graphics have made it possible to display serif fonts with a high degree of detail. Never-the-less serif fonts can still appear cluttered, while san-serif letters can be difficult to distinguish. For example in most sans-serif fonts capital "I" and lower case "l" will appear very similar:
Avoid stylistic fonts simulating historical typefaces or handwriting, except for novelty visualizations as needed:
Use font styles (bold, italic, underline, caps and lower) sparingly for emphasis.
In the image above left, the labels and title are unnecessarily ornamented with bold and italics, whereas the image above right, with the title alone in bold is adequate for most purposes.
Use font sizes that are easily readable. Titles and headings should be larger and more prominent than labels or annotations. Avoid making text too small, especially if the visualization will be viewed on smaller screens or in print.
| a | a | a | a | a | a | a | a | a | a | a | a | a | a | a |
| 6 | 8 | 10 | 11 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 36 | 48 |
| A | A | A | A | A | A | A | A | A | A | A | A | A | A | A |
| 6 | 8 | 10 | 11 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 26 | 28 | 36 | 48 |
Consider text color in relation to the background and other elements in the visualization. Ensure there is enough contrast for readability. For example, use dark text on a light background or vice versa.
Align text appropriately within the visualization. Titles and headings are typically centered, while labels and annotations may be left-aligned or right-aligned depending on the context.
In the chart above we can see that the y-axis label is at the bottom, when it would be better placed at the middle of the axis.
Establish a typographical hierarchy to guide the reader's eye through the visualization. Titles should stand out the most, followed by headings, labels, and annotations. Use font size and style to create this hierarchy.
Pay attention to line spacing (leading) and letter spacing (kerning). Adequate spacing between lines of text and characters can improve readability.
In the graph above left, the lines in the title are not well spaced and overlap, whereas in the graph on the right, they are well spaced and more legible.
Maintain consistency in typography across all elements of the visualization. Use the same font, size, and style for similar elements throughout the visualization.
In the graph above left three different typefaces are used and in different colors. This is corrected in the graph, above right, where the same font style is used for the labels and a different style is used for the title.
Avoid overcrowding the visualization with text. Use concise and clear labels, and consider using tooltips or interactive elements for additional information to avoid clutter.
In the example above, excessive annotation both in the title and labels and in the graph itself, reduces comprehensibility with redundant and unnecessary information.
Provide explanatory annotations or captions as needed to help the audience understand the context and significance of the data. Annotations can include explanations of trends, outliers, or important observations.
Use language and terminology that are clear and meaningful to your target audience. Avoid jargon or technical terms that may not be understood by all readers.
In the example above left, the chart uses overwrought, highly technical language to communicate the topic of the data and the relationship between the variables. In the example, above right, the language has been simplified to make the graph more comprehensible.
Choose appropriate marker types
Marker Size
Adjust the size of markers to represent data values or significance. Larger markers can indicate higher values or greater importance. Be cautious with extreme size variations, as very small or very large markers can lead to visual clutter or misinterpretation. In the below example, the markers (circles) should have been made proportional to the min and max values instead of representing raw values.
Marker Color
Use marker colors effectively to encode additional information, such as categories or groups within your data.
Be mindful of color choices for markers. Ensure that colors are distinguishable and follow a logical color scheme (e.g., a color legend) when representing different data groups. In the example below, the markers have different colors for markers that are part o the same series, making it difficult to see which series of data ware related to each other.
Transparency (Alpha)
Consider using transparency (alpha) to show overlapping data points when markers overlap. This can prevent over-plotting issues and help reveal data density. Adjust transparency levels carefully to maintain readability and avoid making data points too faint. In the example below, an alpha value has been specified to better distinguish overlapping points.
Legend or Key
A legend or key is used to explain the meaning of different marker styles and colors. This helps users understand the significance of each marker or color representation type and its related data. Large datasets may impact intelligibility or legends, and require aggregation, simplification, down-sampling or sub-sampling.
The population pyramid below has a very simple legend in the upper right, illustrating the values of the color representations.
A gridline can make interpretation of the graph easier especially for scatter pots and line charts, and bar charts and related visualizations like histograms. Gridlines come in several varieties: horizontal, vertical and crossed, and each works well with different visualizations.
Horizontal Gridlines
Use horizontal gridlines when you want to aid comparison of values along the y-axis. They are particularly useful when you have a large number of data points and want to easily track the values across different categories or time periods. Horizontal gridlines can help viewers align data points horizontally and assess trends or patterns more accurately.
Vertical Gridlines
Use vertical gridlines when you want to aid comparison of values along the x-axis. They are helpful for aligning data points vertically and assessing trends or patterns across different categories or time periods. Vertical gridlines can also be useful for tracking specific values at different points in time or categories.
Cross Gridlines
Cross gridlines are formed by the intersection of horizontal and vertical gridlines. They provide a reference grid for assessing both x-axis and y-axis values simultaneously. Cross gridlines are useful when you want to analyze relationships between variables or assess the position of data points in a multi-dimensional space.
Most Chart types have two axes with tick marks. The number of tick marks depends on the range of the values. In general a range of 100 should have every tenth tick labelled.
Axis with units specified Axis without Units
Similarly X-axes should be labelled every nth place. e.g. 5h, 10th, 25th, etc. The interval will be determined by the scale of the range so larger scales will have larger intervals.
In the below example every tick is labelled and this can compromise legibility:
A better approach would be to label every 5th tick, for example, as seen below:
