Data-to-Ink Ratio

The concept of data-to-ink ratio, or data-to-pixel ratio, is a fundamental principle in data visualization. In general, it emphasizes the importance of maximizing the amount of ink (or pixels) used to represent meaningful data rather than non-data ink. This helps in creating clear and effective visualizations, reducing unnecessary elements that don't contribute to the understanding of the data.

‍

Let’s break up this principle into four key components:

Maximizing data-ink… within reason

Every bit of ink (or pixel) needs a reason. Almost always, this reason should be related to representing data. Remember that above all else, the story you are telling is the story of your data. Maximizing data-ink takes into consideration factors such as space and scale. For example, consider if your y-axis scale extends too far beyond your highest data point, or if the weight of your columns fills your graph area appropriately. The examples below illustrate how maximizing data-ink improves the emphasis on data without loss of important information.

‍

Minimizing non-data ink… within reason

The flip-side of maximizing data-ink is minimizing non-data ink. This includes unnecessary decorations, gridlines, and embellishments that do not contribute to conveying information. Perhaps the most salient example of this is the use of gridlines. While gridlines can serve a function in helping interpret the data more precisely, the main point of graphs is to provide visual information and relative comparisons. If precise differences are important, consider using a detailed table instead, or highlight key data with labels and annotations. Try defaulting to no gridlines and ask yourself, “is my main data story clear”? In cases where gridlines are necessary, make sure they are light and do not distract from the data.

‍

Remove redundant data-ink… within reason

Redundant data-ink depicts the same information in multiple ways. Consider a simple column chart comparing multiple experimental groups on a particular variable. Do you need to add the exact data values on top of each column? In most cases the answer is “no”. The y-axis provides viewers with the scale of values, and the relative difference between columns depicts variation between groups. In most cases, exact values are best left for in-text or verbal discussions as needed.

‍

Note: Balance can be a tricky thing to strike. In addition to emphasizing data, your graphs should also visually guide the viewer. Some non-ink data can be important in helping viewers more easily comprehend your data, so don’t over do it!

‍

Revise and edit

Scientists often spend a great deal of time revising and editing a manuscript to ensure the messaging is clear, words are used precisely, and the writing is non-redundant. These same practices should be applied when designing a visual graphic. When you think you have a final version of your graphic, go back and prune out ink that doesn’t help tell your data story, or worse- distracts from it.

‍

BioRender Graph Tip

In BioRender Graph, data and non-data elements are easy to customize with just a few clicks. Want to superimpose individual data points on your bar graph? Simply check “Show data points” in the left panel under “Display data”. Axis labels can also be toggled on and off under “Additional settings”.

‍

By default, there are no distracting gridlines, though they can be added if needed. Click on an axes you’d like to further customize. In the formatting panel that appears, you can add gridlines if desired (note: the default gridline color is a light grey). Here, you can also adjust the axis interval to minimize the number of ticks when appropriate. Don’t need to show the axis at all? Click on “Line color” and drag the opacity slider down to 0.

‍

Chartjunk

It’s best to think like a design minimalist when it comes to non-data ink. Every element that is added to a graphic takes up cognitive load, or brain power to process. In effective visual storytelling, it’s important to reduce that cognitive load for your viewer. One of the main culprits of unnecessary cognitive load is clutter, or “chartjunk”. These are design elements that take up ink without being sufficiently informative.

Widespread types of chartjunk:

• Over-busy gridlines
  • In most cases, gridlines are entirely unnecessary. When used, there should be minimal lines, and the lines should be light/faint as to not distract the viewer.
• Excessive ticks on axes
  • Similar to gridlines, ticks along the axes are often overused. In some cases they are not necessary altogether, and in other cases it is sufficient to include them only for major increments.
• Redundant representation of simple data
  • Consider a chart with columns to represent the data, ticks along the y-axis, gridlines, and numeric values annotated on top of each column. All of these elements serve the same purpose, where one alone would suffice.
• Patterns used to fill data elements, such as columns
  • This can create unintentional optical art that distracts and confuses the viewer

‍

To avoid chartjunk, consider a few of the key Gestalt Principles of Visual Perception:

Enclosure

Elements enclosed within a boundary are perceived as a group. The key here is that enclosures don’t need to be very strong. Light background shading can be an effective way of drawing distinction within data, and can replace chartjunk such as gridlines or excessive ticks.

‍

Closure

People naturally look for familiar patterns, and thus perceive individual elements as a single, recognizable shape when they can. That is, when parts of a graphic are missing, our minds fill in the gaps. We can leverage this principle of visual perception to remove parts of a graphic that our mind will fill in for us. This maximizes data-to-ink ratio, allowing the data to stand out more.

‍

Continuity

Smooth, continuous lines are perceived as a single flowing pattern. Similar to the principle of closure, our minds seek these patterns and fill in the gaps. We can leverage this principle of visual perception to remove graphic elements, even ones we have been accustomed to thinking are important. When columns are aligned alone an axis, we still perceive them as lined up at the same point in the absence of an explicit axis line.

‍

Connection

Elements that are connected by lines or curves are perceived as a unified group. This physical connection overrides our perceived grouping related to proximity, color similarity, or shape similarity. A simple example of this is the use of lines to connect data points in a line graph.

‍

Why Optimizing Data Density Is a Good Idea

Our eyes are highly adapted to pick up on distinctions in a small space. The principle of maximizing data density takes advantage of this natural ability. In essence, a successful data visualization is one that maximizes the amount of information presented within a limited space, providing a dense and rich representation of the underlying data without sacrificing clarity or precision. Similar to data-ink ratio, we can think of data density in the following mathematical terms:

‍

Although it’s possible to quantitatively measure data density for a given graphic, it’s generally sufficient to understand this principle conceptually. Being cognizant of the size of your graph and the number of data points you need to represent will help you make good formatting decisions to optimize data density.

‍

The Shrink Principle

In many cases, graphs can be shrunk down much more than people would think without loss of legibility or clarity. When shrinking graphs with high data density, it becomes particularly important to maximize data-ink and minimize non-data ink and chartjunk.

‍

Beautiful Does Not Equal Informative (refs: 1, 2)

Later sections will cover graph layout, text, color, and line considerations in greater detail. These considerations are all relevant ensuring that your graphic is maximally informative, while remaining engaging and aesthetically pleasing.

Informative graphs can, and in fact should be aesthetically pleasing- these are not mutually exclusive principles. The key to graphical elegance is to prioritize the data and storytelling, with all other elements of a graph being incorporated purely in service of the clarity and interpretation of the data. Remember:

• There there is beauty in simplicity of design
• Embellishments and decorations are usually garish and distracting
• It’s also possible to over-simplify and create a very elegant graph that is more difficult to interpret- balance is important!

‍

With BioRender Graph, your data can be both beautiful AND informative. Learn more today.

‍

‍

Is BioRender Graph missing something important?

We love to hear our user’s feedback. If you think we’ve missed an feature for graph customization, please reach out to us at support@biorender.com or click on the “Give product feedback” button in the app. Happy graphing!

‍

Read the next chapter  |  Return to the table of contents

‍

References

1. The Visual Display of Quantitative Information (second edition) by Edward R. Tuft
2. The Wall Street Journal Guide to Information Graphics: The Do's And Don'ts Of Presenting Data Facts And Figures by
3. Storytelling with data: a data visualization guide for business professionals by Cole Nussbaumer Knaflic
4. Research Data Visualization and Scientific Graphics: for Papers, Presentations and Proposals by Martins Zaumanis