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

Canva: This online program has a free option as well as paid subscriptions. On the free tier, users can create visual designs using text, photos, icons, and illustrations. Uploading your own images and illustrations to a Canva project is always free. It is important to note that there are limited built-in ways to generate visualizations (like charts, maps or graphs) from data. It is likely better to create your visualization in another platform and import it as an image.

Piktochart: This is another online tool for creating charts, maps, and graphs. Data uploaded to a Piktochart project can be plugged into various kinds of visualization formats, such as traditional charts or iconographic visuals. There is a free account tier available, as well as paid subscriptions with more features. The free account tier limits collaboration and only allows for 5 active projects at a time.

BioRender: This is an online tool to help scientists create and share beautiful, professional scientific figures. There is a free tier for educational use, as well as paid individual and lab pricing. The free account tier only allows for 5 active projects at a time and does not provide permission to publish in journals.

Adobe Illustrator: This software is available to UW-Madison students, faculty, and staff via all computer lab machines. With layers and alignment tools, plus the ability to create and manipulate vector graphics, this is a good alternative for creating infographics from scratch if you know or have time to learn the software.

Data Visualization*

*Please note that these recommendations are for beginners to data visualization only. There are many more advanced options not listed here because they have a steep learning curve.

Microsoft Excel: This database and data visualization software is available to UW-Madison students, faculty, and staff via Office 365. It is also installed on all the all computer lab machines. Excel can be used to create basic charts out of quantitative data, as well as flowcharts. Its basic outputs are not visually appealing, but you can manipulate the visualizations to make an aesthetically pleasing visual.

Tableau: This is a data visualization tool that allows users to interact with data through dynamic and interactive dashboards, maps, and other presentation formats. The public version of Tableau is free to use. The full version of Tableau is not free, but students can get a 1-year trial for free. The UW-System has a Tableau Server with lots of data sets and visualizations.

Maps

My Maps by Google: This is a free, online map making application made by Google using the base Google Maps/Google Earth. Users can add points, lines, and shapes on top of Google Maps, using a WYSIWYG editor. Maps can be saved and shared online. With limited tools, this map maker is simple and easy to use.

Google Earth: This free application is available with limited online functions or with a more robust desktop application. Where My Maps are 2D maps, Google Earth renders a 3D representation of Earth based on satellite imagery.

NatGeo MapMaker Interactive: This free, online program allows you to pick from a series of base maps, and add built in layers, draw custom shapes, add points, and much more. This program also allows you to easily save and share your maps.

ArcGIS: This software is available to UW-Madison students, faculty, and staff via computer lab machines, both in the labs and for checkout. It is one of the industry standards for map making. The system provides an infrastructure for making maps and geographic information available throughout an organization, across a community, and openly on the Web. This program has a steep learning curve is only recommended for those who are serious about map making.

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:

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:

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.

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.

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:

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.

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.

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.