MTH 208 Exploratory Data Analysis

class: center, middle, inverse, title-slide

.title[
# MTH 208 Exploratory Data Analysis
]
.subtitle[
## Lesson 05: Color Theory & Accessibility in Visualization
]
.author[
### <br>Ying-Ju Tessa Chen, PhD <br><br> Associate Professor <br> Department of Mathematics<br> University of Dayton <br><br> <a href="https://twitter.com/ju_tessa"><svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg> <span class="citation">@ying-ju</span></a> <br> <a href="https://github.com/ying-ju/"><svg viewBox="0 0 496 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg> ying-ju</a> <br> <a href="mailto:ychen4@udayton.edu"><svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;fill:white;" xmlns="http://www.w3.org/2000/svg"> <path d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z"></path></svg> ychen4@udayton.edu</a><br>
]

---

## Learning Objectives

In this lesson, we will talk about the fundamental principles of color theory and how to design visualizations that are accessible to a broader audience, including individuals with color vision deficiencies.

- Basics of color theory
- Designing for color-blindness and accessibility

---
## Basics of color theory

We will learn the fundamental concepts of color theory and its application in data visualization.

### Color Wheel and Color Relationships

.pull-left[
**Definition and History:** The color wheel is a fundamental tool in the study of color theory, serving as a visual representation of colors arranged according to their chromatic relationship. Its origins can be traced back to the work of Sir Isaac Newton in the late 17th century. Newton conducted experiments with a prism and discovered that when light passes through it, a spectrum of colors emerges, forming what he called the "color circle." This was a groundbreaking realization that colors could be organized in a circle based on their wavelength, laying the groundwork for what would become the modern color wheel.

]

.pull-right[

]

---
### Color Wheel and Color Relationships (Continued)

**Structure of the Color Wheel:** The color wheel is structured into three main types of colors: primary, secondary, and tertiary.

.pull-left-2[
- `Primary Colors:` Red, blue, and yellow are considered primary colors because they cannot be created by mixing other colors together. They are the foundation from which all other colors are derived.

- `Secondary Colors:` When two primary colors are mixed together in equal parts, they produce secondary colors. The secondary colors are green (blue + yellow), orange (red + yellow), and purple (red + blue). These colors are positioned between the primary colors on the color wheel.

- `Tertiary Colors:` Tertiary colors are created by mixing a primary color with a secondary color, resulting in a blend that is named by combining the names of the primary and secondary colors (e.g., red-orange, yellow-green). This results in six tertiary colors, each of which is located between a primary and a secondary color on the wheel.]

.pull-right-2[

<img src="data:image/png;base64,#https://d3ui957tjb5bqd.cloudfront.net/uploads/2021/07/25090656/basic-colour-wheel.png" width="100%" style="display: block; margin: auto;" />
.footnote[Credit: This figure is from [creativemarket.com](https://creativemarket.com/blog/analogous-colors).]
]

---
### Color Wheel and Color Relationships (Continued)

**Color relationships:** The arrangement of colors on the wheel allows us to understand their relationships more deeply:

.pull-left[.small[
- `Complementary Colors` are directly opposite each other on the color wheel. This relationship is useful for creating contrast and highlighting elements within visualizations. However, when used in close proximity (e.g., text on a background), it can cause visual strain.

- `Analogous Colors` are next to each other on the wheel. This scheme provides a harmonious and cohesive look, often found in nature, making it suitable for creating calm and unified visualizations.

- `Triadic Colors` consist of three colors that are evenly spaced around the color wheel. This scheme is vibrant, even if the colors are unsaturated, and offers a balanced level of contrast suitable for drawing attention to key elements without overwhelming the viewer.

Understanding the color wheel and these color relationships is crucial for anyone involved in data visualization.

]
]

.pull-right[

<img src="data:image/png;base64,#https://shop.decoart.com/content/blog-images/triadic-colors.jpg" width="90%" style="display: block; margin: auto;" />
]

.footnote[Credit: Figures are from [DecoArt](https://shop.decoart.com/blog/color-theory-basics-the-color-wheel/).]
]

---
## Color Properties

**Common Color Properties:** Hue, Saturation, and Brightness

Understanding the fundamental properties of color is essential for effective visualization design. These properties — hue, saturation, and brightness — determine how we perceive and interpret color in visualizations.

- `Hue:` Hue refers to the color itself, the aspect of color that is determined by the specific wavelength of light. It is what we most commonly think of as "color" — red, blue, green, and so on. In data visualization, different hues are used to distinguish categories, highlight specific data points, or encode information.

- `Saturation:` Saturation describes the intensity or purity of a color. A highly saturated hue appears vivid and bright, while a less saturated hue appears more muted or gray. Adjusting saturation can enhance clarity or reduce visual fatigue, depending on the amount of data and the complexity of the visualization. High saturation can draw attention to areas of importance, but overuse can make a visualization overwhelming.

- `Brightness:` Brightness (or value) refers to how light or dark a color appears. It can influence the readability and emphasis within a visualization. Brighter colors tend to advance in visual perception, while darker colors recede. This property can be manipulated to create depth or focus in a visualization.

---
### Color Properties (Example)

.footnote[Credit: This example is from [SteveSpence.net](https://www.stevespence.net/courses/writing-for-digital-media/modules/color-harmony/color-harmony-slides.php).]

---
### Color Properties (Continued)

**Warm vs. Cool Colors:** The color spectrum is also divided into warm and cool colors, each evoking different psychological responses and interpretations.

.pull-left[
- `Warm Colors:` Warm colors include reds, oranges, and yellows. These hues are associated with energy, passion, and action. They can be used in visualizations to draw attention, signify caution, or stimulate viewer engagement. Warm colors are often used to represent positive values or trends, such as growth or increase.

- `Cool Colors:` Cool colors encompass blues, greens, and purples. They are perceived as calming and soothing and are often associated with trust, stability, and peace. In visualizations, cool colors are useful for background elements or to represent negative values or trends, such as decline or loss.]

.pull-right[
<img src="data:image/png;base64,#https://cdn.shopify.com/s/files/1/0029/5573/9225/files/ac1c54f4060535a8f4836840abdd6085_480x480.jpg?v=1628129768" width="90%" style="display: block; margin: auto;" />
]

.footnote[Credit: This figure is from [knitpal.com](https://knitpal.com/blogs/knitpal/your-guide-to-color-theory-for-knitters-and-crocheters)]

---
### Color Properties (Continued)

- `Psychological Effects and Interpretation:` The choice between warm and cool colors can significantly affect a viewer's interpretation of the data. Warm colors might be used to highlight areas of concern or interest, while cool colors can provide a calming counterpoint or denote areas of less concern. Understanding the psychological impact of color can help designers create more intuitive and impactful visualizations.

Incorporating knowledge of hue, saturation, brightness, and the psychological effects of warm vs. cool colors allows data visualization practitioners to craft visualizations that are not only visually appealing but also enhance the viewer's ability to understand and interpret the data presented.

---
## Color Schemes in Visualization

In data visualization, the choice of color scheme plays a critical role in effectively communicating information. The type of data you're visualizing — whether nominal, ordinal, interval, or ratio — should guide your selection of color schemes. Here, we'll explore three primary types of color schemes: sequential, diverging, and qualitative, and discuss best practices for applying these schemes to different data types.

**Sequential Color Schemes**
- `Description:` Sequential color schemes are characterized by a gradual transition from light to dark hues of the same color or from one color to another closely related color. They are ideal for displaying data that has ordering.

- `Best for:` .red[Ordinal], .red[interval], and .red[ratio] data where the magnitude of the data values matters, such as temperature ranges, age groups, or income levels.

- `Best Practices:` 
    - Use lighter shades for lower values and darker shades for higher values to naturally indicate an increase in magnitude. 
    - Ensure there is enough contrast across the range to distinguish between different data points clearly.

---
### Color Schemes in Visualization (Continued)

**Diverging Color Schemes**
- `Description:` Diverging color schemes start with two contrasting colors at the extremes and meet in a neutral middle with lighter shades. They are best used when data values deviate around a median, zero, or any other significant midpoint.

- `Best for:` Interval and ratio data where emphasizing the deviation from a critical midpoint is essential, such as changes in temperature from a baseline, stock market gains and losses, or survey responses ranging from positive to negative.

- `Best Practices:`
    - Choose colors that contrast well to highlight differences effectively.
    - Use the midpoint color to represent the median or zero value, ensuring it's neutral and distinct from the extremes.
    - Make sure the transition between colors is smooth and maintains the readability of the data.

---
### Color Schemes in Visualization (Continued)

**Qualitative Color Schemes**
.small[
- `Description:` Qualitative (or categorical) color schemes consist of distinct colors that are used to represent different categories without implying order or magnitude. The colors are chosen to be visually distinct from each other to differentiate between categories clearly.

- `Best for:` Nominal data where the focus is on distinguishing between categories, such as types of fruits, departments in a company, or different species.

- `Best Practices:`
    - Select colors that are easily distinguishable from one another to avoid confusion.
    - Avoid using too many categories in a single visualization to prevent cognitive overload. If many categories are necessary, consider using other methods in conjunction with color to differentiate between them (e.g., patterns or labels).
    - Be mindful of color vision deficiencies and choose colors that are distinguishable to all viewers, employing tools like Color Oracle or Coblis for testing.]

By thoughtfully applying these color schemes based on the data type and the message we want to convey, we can enhance the interpretability and aesthetic appeal of our visualizations. .red[Remember, the goal of color usage in data visualization is not just to make the visual attractive but to support the viewer in understanding the data more effectively.]

---
### Case Study - 1

.pull-left[
- `Analysis:` For each example, analyze the color scheme based on its appropriateness for the data type, effectiveness in conveying the intended message, and accessibility considerations.

- `Critique:` Identify what works well and what does not in each color scheme application. Discuss how the ineffective elements could be improved while maintaining or enhancing the visualization's overall impact.

- `Recommendations:` Propose alternative color schemes for the examples identified as having bad practices, explaining why your choices would be more effective.
]

.pull-right[
<img src="data:image/png;base64,#https://www.census.gov/library/visualizations/2019/comm/irish-american/_jcr_content/root/responsivegrid/embeddableimage689.coreimg.jpeg/1551812378382/irish-american.jpeg" style="display: block; margin: auto;" />

]

.footnote[Credit: [US Census Bureau, Census.gov](https://www.census.gov/library/visualizations/2019/comm/irish-american.html)]

---
### Case Study - 2

.footnote[Credit: Figures are from [Dr. Claus O. Wilke](https://clauswilke.com/dataviz/color-pitfalls.html)]

---
## Designing for Color-blindness and Accessibility

We will discuss the importance of designing visualizations that are accessible to individuals with color vision deficiencies and provide strategies to achieve this.

### Understanding Color-blindness

Color vision deficiencies (CVD) affect a significant portion of the population, influencing how individuals perceive colors. Understanding these conditions is crucial for designing accessible visualizations.

Here are the most common types of Color Vision Deficiencies:  the most common types: Deuteranomaly (green-weak: reduced sensitivity to green light), Protanomaly (red-weak: involves a diminished sensitivity to red light), Tritanomaly (blue-weak: a decreased sensitivity to blue light), and their more severe forms, Deuteranopia (Green-Blind), Protanopia (Red-Blind), and Tritanopia (Blue-Blind).

Understanding these color vision deficiencies is essential for creating visualizations that are accessible and interpretable by everyone, including those with CVD. By considering the impacts of these conditions on color perception, designers can select color schemes and visualization techniques that communicate effectively to a broader audience.

[Coblis —
Color Blindness Simulator](https://www.color-blindness.com/coblis-color-blindness-simulator/)

---
### Accessible Color Palettes

Creating data visualizations that are accessible to a broad audience, including those with color vision deficiencies (CVD), requires careful selection and testing of color palettes. Here's how to approach this task to ensure your visualizations are clear and understandable to everyone.

**How to Select and Test Color Palettes for Accessibility**
- Understand Common CVD Types

- Use CVD-Simulating Tools

- Limit the Number of Colors

- Prefer High Contrast: Ensure high contrast not just in color hues but also in lightness and saturation levels. High contrast helps individuals with and without CVD distinguish between different elements in a visualization.

- Avoid Problematic Colors: Some color combinations, such as red-green, are particularly problematic for people with CVD. Avoid these combinations or use them in conjunction with other differentiation methods, like patterns or shapes.

---
### Accessible Color Palettes (Continued)

We can Utilize tools to Choose color-blind friendly palettes. We list some useful tools below.

- [ColorBrewer](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3): An online tool designed for scientists and statisticians that offers a selection of color palettes optimized for data visualization, including options specifically tailored for color-blind viewers. ColorBrewer palettes are categorized into sequential, diverging, and qualitative types, with indications of CVD-friendly options.

- [Adobe Color](https://color.adobe.com/): This tool provides a color wheel that can simulate various forms of color blindness, helping designers see how their palettes appear to those with different CVD types. It's useful for creating custom palettes with accessibility in mind.

- [WebAIM (Web Accessibility In Mind)](https://webaim.org/resources/contrastchecker/): Provides a contrast checker that evaluates text color against background color, ensuring that your visualizations are legible to viewers with vision impairments, including CVD.

### Design Strategies for Accessibility:

Beyond color: Using patterns, textures, and shapes to differentiate data points.

Ensuring sufficient contrast and readability in visualizations.
Annotation and labeling techniques to complement color coding.

---
## References

The lectures of this course are based on the ideas from the following references.

- Exploratory Data Analysis by John W. Tukey
- A Course in Exploratory Data Analysis by Jim Albert
- The Visual Display of Quantitative Information by Edward R. Tufte
- Data Science for Business: what you need to know about data mining and data-analytic thinking by Foster Provost and Tom Fawcett
- Storytelling with Data: A Data Visualization Guide for Business Professionals by Cole Nussbaumer Knaflic