Infographics and Data Visualization


Infographics (or information graphics) tell a story about a topic using one or several data visualizations with other visual complements. Infographics can include text, graphs, charts, diagrams, tables, maps, lists, and other forms of data visualization. The goals of infographics are varied, with some intended to provide information, others intended to persuade or call the audience to action. Typically, infographics are designed for viewing on digital devices (phones/tablets) and displayed on social media. As a result, many infographics are oriented vertically to take advantage of the scrolling interface these devices and platforms use, but not all infographics use this layout.

Data Visualization is the visual display of quantitative information. A good data visualization will make it easy for the viewer to interpret complex information, notice patterns in data, and identify key takeaways.

Maps are a form of data visualization that use a diagrammatic representation of an area of land or water. Maps can simply show the geographical markers (such as landmarks, roads, elevation, etc.) or be used in conjunction with a data set to geographically represent information. Maps themselves can be considered a form of infographics, but may also be a component of a larger infographic.

Design Tip:
Choosing the right visualization approach for your data is key. You will need a way to visualize each dimension (or variable) in your data separately, so that viewers can quickly see the relationship between them. The five most common approaches to visualizing variation in data are color, length, area, position, and angle.

DesignLab can help you figure out what visualization is best for your data and talk you through how to make it both visually stunning and easy to understand.

Make an Appointment

Infographics Design Tips & Tricks

There are a lot of different ways to organize data visualizations into an infographic. The layout you choose for your infographic will depend on the information you want to include and how the infographic will be shared.

An infographic can focus on just one visualization — a singular layout. This kind of infographic allows the viewer to focus on one dataset, which can be useful if the data visualization is dense or complex. It may also be a good choice if the infographic will be encountered in passing, such as on social media or on a flier. A singular layout is intended to be easy to read at a glance.

More commonly, infographics combine multiple data visualizations. Broadly, these can be described as either composite or long form. Composite infographics assemble individual visualizations into one large panel, often in a grid. Sometimes, one large visualization is complemented by a number of smaller charts or callout boxes. Composite infographics are most effective when you’re exploring different angles on a single topic, and for print applications.

Long form refers specifically to composite infographics that stack visualizations vertically or, more rarely, horizontally. This format is effective for telling a story that happens over time. It can also work well for online platforms where users are used to scrolling through content, like on social media. However, for this same reason, horizontal long form visualizations aren’t well-suited to digital media.

No matter what format you choose, make sure you’re following the best practices for data visualization, outlined below!

Data Visualization Design Tips & Tricks

Guiding Accuracy in Interpreting Data Visualizations

There are a lot of different ways to visually communicate variation in a data set. For example, weather maps use color to show differences in temperature, pressure, and precipitation across an area. Not every approach to data visualization is made equal. A landmark study by Cleveland and McGill (1980) found that viewers interpret some kinds of visualizations more accurately than others. They found that position (points on a graph or map) and length (such as in bar graphs) are the easiest to accurately interpret, whereas volume (increased size correlating to increased number), and color (both hue and saturation) are most difficult to accurately interpret. Here is a helpful chart we’ve created (based on a chart from an Intro Data Viz course) to demonstrate the ease of understanding:
Chart of Data Viz Accuracy, with position and length as easiest to interpret and color hardest to interpret

This study and evidence does not mean that you should only use bar charts, maps, or scatter plots to represent data. But if your data is complex and needs accurate understanding, consider using a visualization strategy that is easier to interpret, rather than using color or volume.

Avoiding Pie/Donut Charts

Pie and donut charts are everywhere! They visualize data by using angles (not area!) to represent parts of a whole. Generally, interpreting angles fall into the middle of the accuracy chart above. One of the reasons is because there is not a scale or axis to guide in understanding.

Take a look at this pie chart about our favorite pies:

Pie chart of favorite pie, including apple with the most, chocolate with the least.

At a glance, we can tell that the Chocolate pie is the smallest and the Apple pie is the largest. However, without any more information, we cannot accurately guess the percentages of these sections. For example, the Apple appears to be about one-third (⅓) of the chart and the Cherry is about one-quarter (¼). To accurately interpret the pie chart, we need labels of the percentages, which almost defeats the purpose of using a pie chart, so there are better ways to represent this data visually.

Pie chart of favorite pie, including apple with the most at 41%, chocolate with the least 12%.

In general, it is best to use a pie chart or donut chart only if you are representing two categories where one is larger than the other. That way, a viewer can quickly see which category takes up the majority of the whole, and the accuracy of interpreting the numbers is less important. If you have more than two categories, consider using another visualization approach, such as a horizontal stacked bar chart.

When representing our favorite pies in this chart below, we don’t need the number labels to accurately interpret the data because we have axis labels (%) to guide our understanding.

A stacked bar chart of people's favorite pies, with apple at 41%, cherry at 29%, blueberry at 18%, and chocolate at 12%.

Use of Color

The stacked bar chart above is easier to read accurately than a pie chart, but there’s a lot of visual noise that isn’t helping communicate the data. Let’s see how we might improve it further.

Even though it’s not useful for accurately representing numerical differences, color is a really powerful tool for storytelling in data visualization. In the charts above, color is being used to distinguish categories. This is necessary because the category labels are in a key below the chart, rather than directly labeled in the charts. Although practical in that form, the colors don’t carry any real meaning in connection to the categories (in this case types of pies) they are representing and could potentially distract the audience from the actual information represented.

Let’s imagine that we want to tell a story about the most popular pie flavor. We can separate out the different categories into individual bars and label the data directly. Then we can strategically use color, to emphasize our argument, that Apple pie is clearly the best pie. We can make a really strong visual argument by highlighting only Apple pie with color:

A comparative bar chart of people's favorite pies, with apple at 41%, cherry at 29%, blueberry at 18%, and chocolate at 12%. apple is the only bar that has color

Exaggeration vs. Absolute Numbers

In the above chart about use of color, you’ll notice that the x-axis only goes up to 50% because none of our data points extend beyond 41%. As a result, the difference between our four pie categories is exaggerated. This can be a powerful tool for providing emphasis, but can also be considered misleading. If the absolute value of these favorite pies is important, we might want to set the x-axis to go from the minimum to the maximum possible value — in this case, 0% to 100%, as is shown below.

A comparative bar chart at a scale of 100% of people's favorite pies, with apple at 41%, cherry at 29%, blueberry at 18%, and chocolate at 12%. apple is the only bar that has color

The downside to this type of representation is that there is now an excess of negative space now. The question of scaling vs. absolute values is often dependent on the information being presented and the norms of your field. From a design perspective, the scaled access is preferable because it fills the chart, but from an ethical data representation, it may skew the understanding of the data.

Reducing Visual “Noise”

A good data visualization uses ink or pixels sparingly. It is important to visually represent only what is necessary for the viewer to understand the information. Visual variation without meaning (eg. using different colors or line widths) can distract from the important information that you intentionally visualized. Or, even worse, it might lead viewers to draw the wrong conclusions. A busy visualization with too much variation means the message of the data gets muddied.

One of the other things to consider is what is necessary to include in a data visualization. Do you need axes, labels, etc. From a design perspective, reducing visual “noise” or things that can distract from the main information is key to quickly guiding the audience to understand your data visualization. For example, in our chart about favorite pies, do we even need an x-axis? With our data labels, it isn’t necessary, so we can remove it to reduce the visual noise.

A comparative bar chart of people's favorite pies, with apple at 41%, cherry at 29%, blueberry at 18%, and chocolate at 12%. apple is the only bar that has color, there are no x-axis lines.

The choice to remove noise or excess information will need to be guided by the medium in which the data is being visualized as well as the norms of your field. For example, if you were to put this chart on a PowerPoint slide, the stripped down version above is better because you as the presenter will be able to guide your audience to understanding without need of axis lines/scales. However, if this visualization were to be included in an academic paper, it might be better to include the axis lines since they will need to interpret the visual on their own.

Infographic Instructional Video