Why Layout and Scale Matters for Graphs
This is some text inside of a div block.
Graph Aspect Ratio
Our vision is naturally adapted to detect variations across the horizon. In fact, the human field of vision is about 1.25 to 1.33 times as wide as it is tall. Most computer and television screens take advantage of this fact. “Aspect ratio” describes the ratio of width to height of a rectangle, with most modern monitors having an aspect ratio of 16:9 (that is, width is about 1.8 times the height). Similar to monitors, graphs should take advantage of our tendency towards horizontal viewing when possible.
Over many centuries, horizontal rectangles with various aspect ratios have been proposed as holding profound mathematical properties. Dubious claims about the perfect aspect ratio aside, it remains true that in psychological experiments people prefer horizontal rectangles over squares or vertical rectangles. As a general rule, we suggest creating graphs that are 1.4 to 1.8 times wider than they are tall.
Some exceptions apply to this general rule. If the nature of the data or type of graph chosen to represent it inherently suggests a non-horizontal rectangle, you should follow that suggestion. Consider, for example, a simple bar graph with only 2 groups being compared across the x-axis. In this case, the important data comparison happens along the y-axis and stretching the graph along the x-axis to be wider than it is tall would not make sense.
BioRender Graph Tip
In BioRender Graph, the default aspect ratio of graphs is approximately 1.7. Need to adjust the shape of your graph? It’s simple! Select the axis you’d like to adjust and drag it. The data and labels automatically adjust according to axis adjustment.
You can also easily adjust the data spacing for further fine-tune. To do this, click on the dataset and adjust the “Between groups” slider under the “Spacing” option in the left panel.
When you’re happy with the final shape of your graph, adjust the canvas size to fit the graph (with some margin around the sides, top, and bottom). To do this, click “Canvas size” in the top panel, and adjust by dragging the corners/edges of the canvas or inputting new height and width values in the top formatting bar.
Don’t Forget to Add Context
The purpose of presenting data in graphical form is to allow your viewer to quickly and accurately understand complex relationships and patterns. Without adequate context, graphs can indeed create more confusion and misunderstand than clarity.
Adding context to a graph can take several forms:
- Clear titles and subtitles
- Informative captions, annotations, labels, scales, and/or legends
- Supplementary non-data visuals
As a cautionary note, remember not to over-do it with context. Spend some time thinking about your intended audience and their level of expertise, and only add context where appropriate or necessary. Refer back to the chapter discussing data-to-ink ratio for some helpful tips about maximizing data ink, and minimizing non-data ink.
BioRender Graph Tip
BioRender Graph retains the line, shape, and text tools found in our BioRender illustration editor. This makes it easy to incorporate labels, annotations, and scales right into your graph. In the example below, we’ve added context at the maximal x-axis value using our line and text tools.
Depending on the type of graph and analysis you’re running, additional analytical context can be displayed by toggling on or off. In this example, let’s toggle on the 95% confidence intervals for the two groups.
Labeling Best Practices
Labels can apply to many parts of your graph, but one of the first considerations to make is how to apply labels to your axes.
Consider these tips for ensuring your axes labels are simple yet informative:
For Y-axis labels
- Remove trailing zeros for numbers along the y-axis. These are a sequence of zeros in the decimal representation of a number, after which no other digits follow, and therefore provide no useful information. For example, 12.00 contains 2 trailing zeros, and 12.20 contains 1 trailing zero.
- Although it’s generally accepted to label the y-axis vertically, in most cases the y-axis label can be removed altogether and replaced with a graph title or caption that describes what the y-axis represents.
For X-axis labels
- Avoid rotating labels. Rotating your labels to a 45° angle results in over 50% slower reading. Worse yet, completely vertical labels result in over 200% slower reading.
- If you’re x-axis labels are long by necessity, consider transposing your graph to accommodate the long labels.
- When possible, abbreviate x-axis labels. For example, months can be abbreviated to Jan, Feb, Mar, Apr, etc. This can also reduce the urge to rotate labels, or the need to transpose your graph.
Data labels
In some cases, it’s appropriate to add labels directly to data. For example, you may want to highlight a comparison with precise numbers. Let’s consider a couple of tips for applying labels to data:
- When applying data labels to column charts, it’s best to place the labels inside the columns, rather than outside of them. This draws a stronger association between the data and the label, and avoids skewing perception (e.g., numbers above columns could make them appear taller than the data suggests).
- Labeling data points should be done sparingly. When a graph contains many data points, labeling all of them can create clutter and make it more difficult to interpret, defeating the purpose of the labels. Instead, consider labeling only the most important data points that you want to draw attention towards.
BioRender Graph Tip
We’ve made it easy to transpose your graph. In the default left panel under “Additional settings”, select “Flip X & Y axis” to transpose. You can then adjust label angles to ensure they are horizontal.
Legend Best Practices
When a graph includes relatively few data groups, it’s best to label the groups directly on the graph. This takes advantage of the Gestalt principle of proximity and eliminates the need to consult a legend. You can enhance this association by using the Gestalt principle of similarity with color-coded labels.
When a graph includes many groups, direct labeling is not ideal and can create clutter. In these cases, using a legend is necessary.
Consider these tips for creating effective legends:
- The order that the groups are presented in the legend should match the order in which the groups appear in the graph.
- When possible, place the legend at the top of the graph. Our eye tends to scan a figure in a Z-shape. Placing the legend at the top ensures that viewers will see it first and be able to interpret the data more easily.
Axis Scaling Tips
The first step in designing graph axes is choosing an appropriate type of scale to represent your data and highlight important trends. This step is data-specific, but some common options include linear scaling, logarithmic scaling, and categorical scaling.
With the appropriate type of scale selected, follow these tips to ensure clear and accurate representation of your data:
- Use natural increments (1, 2, 5, 10, 20, 50, 100, etc.) that are easy for your viewers to follow.
- Use a natural starting position for your axis to avoid misinterpretation. For example, the y-axis for line and column charts should always start at 0, and the most prominent slice of a pie or donut chart should start at 12 o’clock.
- Use a natural ending position for your axis. We recommend one increment higher than the maximum value in your dataset.
BioRender Graph Tip
Axis scales can be easily adjusted in BioRender Graph. First, select the numerical scale you’d like to adjust. In the left panel, you can now override the auto settings under “Axis scale” by inputting values for “Minimum”, “Maximum”, or “Interval”.
Read the next chapter | Return to the table of contents
References
- The Visual Display of Quantitative Information (second edition) by Edward R. Tuft
- The Wall Street Journal Guide to Information Graphics: The Do's And Don'ts Of Presenting Data Facts And Figures by
- Storytelling with data: a data visualization guide for business professionals by Cole Nussbaumer Knaflic
- Research Data Visualization and Scientific Graphics: for Papers, Presentations and Proposals by Martins Zaumanis
