public, designers must understand CVD and design with it in mind.
The primary problem among people with CVD is with the colors red and green. This is why it is best to avoid using red and green together and, in general, to avoid the commonly used traffic light colors. We discuss this issue further in Chapter 33 and offer some solutions for using red and green together.
Seeing the Problem for Yourself
Let's look at some examples of how poor choice of color can create confusion for people with CVD.
In Figure 1.24, the chart on the left uses the traditional traffic light colors red, yellow, and green. The example on the right is a protanopia simulation for CVD.
Figure 1.24 Bar chart using the traffic light colors and a protanopia simulation. Notice the red and green bars in the panel on the right are very difficult to differentiate from one another for a person with protanopia.
One common solution among data visualization practitioners is to use blue and orange. Using blue instead of green for good and orange instead of red for bad works well because almost everyone (with very rare exceptions) can distinguish blue and orange from each other. This blue-orange palette is often referred to as being “color-blind friendly.”
Using Figure 1.25, compare the blue/orange color scheme and a protanopia simulation of CVD again.
Figure 1.25 Bar chart using a color-blind-friendly blue and orange palette and a protanopia simulation.
The Problem Is Broader Than Just Red and Green
The use of red and green is discussed frequently in the field of data visualization, probably because the traffic light color palette is prevalent in many software programs and is commonly used in business today. It is common in Western culture to associate red with bad and green with good. However, it is important to understand that the problem in differentiating color for someone with CVD is much more complex than just red and green. Since red, green, and orange all appear to be brown for someone with strong CVD, it would be more accurate to say “Don't use red, green, brown, and orange together.”
Figure 1.26 shows a scatterplot using brown, orange, and green together for three categories. When applying protanopia simulation, the dots in the scatterplot appear to be a very similar color.
Figure 1.26 Scatterplot simulating color vision deficiency for someone with protanopia.
One color combination that is frequently overlooked is blue and purple together. In a RGB (red-green-blue) color model, purple is achieved by using blue and red together. If someone with CVD has issues with red, then he or she may also have issues with purple, which would appear to look like blue. Other color combinations can be problematic as well. For example, people may have difficulty with pink or red used with gray or gray used together with brown.
Figure 1.27 shows another scatterplot, this time using blue, purple, magenta, and gray. When applying deuteranopia simulation, the dots in the scatterplot appear to be a very similar color of gray.
Figure 1.27 Scatterplot simulating color vision deficiency for someone with deuteranopia.
It's important to understand these issues when designing visualizations. If color is used to encode data and it's necessary for readers to distinguish among colors to understand the visualization, then consider using color-blind-friendly palettes. Here are a few resources that you can use to simulate the various types of CVD for your own visualizations.
Adobe Illustrator CC. This program offers a built-in CVD simulation in the View menu under Proof Setup.
Chromatic Vision Simulator (free). Kazunori Asada's superb website allows users to upload images and simulate how they would appear to people with different form of CVD. See http://asada.tukusi.ne.jp/webCVS/
NoCoffee vision simulator (free). This free simulator for the Chrome browser allows users to simulate websites and images directly from the browser.
Common Chart Types
In this book, you will see many different types of charts. We explain in the scenarios why many of the charts were chosen to fulfill a particular task. In this section, we briefly outline the most common chart types. This list is intentionally short. Even if you use only the charts listed here, you would be able to cover the majority of needs when visualizing your data. More advanced chart types seen throughout the book are built from the same building blocks as these. For example, sparklines, which are shown in Chapters 6, 8, and 9, are a kind of line chart. Bullet charts, used in Chapter 17, are bar charts with reference lines and shading built in. Finally, waterfall charts, shown in Chapter 24, are bar charts where the bars don't have a common baseline.
Bar Chart
A bar chart (see Figure 1.28) uses length to represent a measure. Human beings are extremely good at seeing even small differences in length from a common baseline. Bars are widely used in data visualization because they are often the most effective way to compare categories. Bars can be oriented horizontally or vertically. Sorting them can be very helpful because the most common task when bar charts are used is to spot the biggest/smallest items.
Figure 1.28 Bar chart.
Time-Series Line Chart
Line charts (see Figure 1.29) usually show change over time. Time is represented by position on the horizontal x-axis. The measures are shown on the vertical y-axis. The height and slopes of the line let us see trends.
Figure 1.29 Time-series line chart.
Scatterplot
A scatterplot (see Figure 1.30) lets you compare two different measures. Each measure is encoded using position on the horizontal and vertical axes. Scatterplots are useful when looking for relationships between two variables.
Figure 1.30 Scatterplot.
Dot Plot
A dot plot (see Figure 1.31) allows you to compare values across two dimensions. In our example, each row shows sales by ship mode. The dots show sales for each ship
