update production figures

_book_production/color-pitfalls.html

@@ -298,7 +298,7 @@ <h2><span class="header-section-number">19.2</span> Using non-monotonic color sc
 <p>In Chapter <a href="color-basics.html#color-basics">4</a>, I listed two critical conditions for designing sequential color scales that can represent data values: The colors need to clearly indicate which data values are larger or smaller than which other ones, and the differences between colors need to visualize the corresponding differences between data values. Unfortunately, several existing color scales—including very popular ones—violate one or both of these conditions. The most popular such scale is the rainbow scale (Figure <a href="color-pitfalls.html#fig:rainbow-desaturated">19.4</a>). It runs through all possible colors in the color spectrum. This means the scale is effectively circular; the colors at the beginning and the end are nearly the same (dark red). If these two colors end up next to each other in a plot, we do not instinctively perceive them as representing data values that are maximally apart. In addition, the scale is highly non-monotonic. It has regions where colors change very slowly and others when colors change rapidly. This lack of monotonicity becomes particularly apparent if we look at the color scale in grayscale (Figure <a href="color-pitfalls.html#fig:rainbow-desaturated">19.4</a>). The scale goes from medium dark to light to very dark and back to medium dark, and there are large stretches where lightness changes very little followed by relatively narrow stretches with large changes in lightness.</p>
 
 <div class="figure" style="text-align: center"><span id="fig:rainbow-desaturated"></span>
-<img src="pitfalls_of_color_use_files/figure-html/rainbow-desaturated-1.png" alt="The rainbow colorscale is highly non-monotonic. This becomes clearly visible by converting the colors to gray values. From left to right, the scale goes from moderately dark to light to very dark and back to moderately dark. In addition, the changes in lightness are very non-uniform. The lightest part of the scale (corresponding to the colors yellow, light green, and cyan) takes up almost a third of the entire scale while the darkest part (corresponding to dark blue) is concentrated in a narrow region of the scale." width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/rainbow-desaturated-1.png" alt="The rainbow colorscale is highly non-monotonic. This becomes clearly visible by converting the colors to gray values. From left to right, the scale goes from moderately dark to light to very dark and back to moderately dark. In addition, the changes in lightness are very non-uniform. The lightest part of the scale (corresponding to the colors yellow, light green, and cyan) takes up almost a third of the entire scale while the darkest part (corresponding to dark blue) is concentrated in a narrow region of the scale." width="750" />
 <p class="caption">
 Figure 19.4: The rainbow colorscale is highly non-monotonic. This becomes clearly visible by converting the colors to gray values. From left to right, the scale goes from moderately dark to light to very dark and back to moderately dark. In addition, the changes in lightness are very non-uniform. The lightest part of the scale (corresponding to the colors yellow, light green, and cyan) takes up almost a third of the entire scale while the darkest part (corresponding to dark blue) is concentrated in a narrow region of the scale.
 </p>
@@ -318,30 +318,30 @@ <h2><span class="header-section-number">19.3</span> Not designing for color-visi
 <p>As discussed in Chapter <a href="color-basics.html#color-basics">4</a>, there are three fundamental types of color scales used in data visualization: sequential scales, diverging scales, and qualitative scales. Of these three, sequential scales will generally not cause any problems for people with color-vision deficiency (cvd), since a properly designed sequential scale should present a continuous gradient from dark to light colors. Figure <a href="color-pitfalls.html#fig:heat-cvd-sim">19.6</a> shows the Heat scale from Figure <a href="color-basics.html#fig:sequential-scales">4.3</a> in simulated versions of deuteranomaly, protanomaly, and tritanomaly. While none of these cvd-simulated scales look like the original, they all present a clear gradient from dark to light and they all work well to convey the magnitude of a data value.</p>
 
 <div class="figure" style="text-align: center"><span id="fig:heat-cvd-sim"></span>
-<img src="pitfalls_of_color_use_files/figure-html/heat-cvd-sim-1.png" alt="Color-vision deficiency (cvd) simulation of the sequential color scale Heat, which runs from dark red to light yellow. From left to right and top to bottom, we see the original scale and the scale as seen under deuteranomaly, protanomaly, and tritanomaly simulations. Even though the specific colors look different under the three types of cvd, in each case we can see a clear gradient from dark to light. Therefore, this color scale is safe to use for cvd." width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/heat-cvd-sim-1.png" alt="Color-vision deficiency (cvd) simulation of the sequential color scale Heat, which runs from dark red to light yellow. From left to right and top to bottom, we see the original scale and the scale as seen under deuteranomaly, protanomaly, and tritanomaly simulations. Even though the specific colors look different under the three types of cvd, in each case we can see a clear gradient from dark to light. Therefore, this color scale is safe to use for cvd." width="750" />
 <p class="caption">
 Figure 19.6: Color-vision deficiency (cvd) simulation of the sequential color scale Heat, which runs from dark red to light yellow. From left to right and top to bottom, we see the original scale and the scale as seen under deuteranomaly, protanomaly, and tritanomaly simulations. Even though the specific colors look different under the three types of cvd, in each case we can see a clear gradient from dark to light. Therefore, this color scale is safe to use for cvd.
 </p>
 </div>
 <p>Things become more complicated for diverging scales, because popular color contrasts can become indistinguishable under cvd. In particular, the colors red and green provide about the strongest contrast for people with normal color vision but become nearly indistinguishable for deutans (people with deuteranomaly) or protans (people with protanomaly) (Figure <a href="color-pitfalls.html#fig:red-green-cvd-sim">19.7</a>). Similarly, blue-green contrasts are visible for deutans and protans but become indistinguishable for tritans (people with tritanomaly) (Figure <a href="color-pitfalls.html#fig:blue-green-cvd-sim">19.8</a>).</p>
 
 <div class="figure" style="text-align: center"><span id="fig:red-green-cvd-sim"></span>
-<img src="pitfalls_of_color_use_files/figure-html/red-green-cvd-sim-1.png" alt="A red–green contrast becomes indistinguishable under red–green cvd (deuteranomaly or protanomaly)." width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/red-green-cvd-sim-1.png" alt="A red–green contrast becomes indistinguishable under red–green cvd (deuteranomaly or protanomaly)." width="750" />
 <p class="caption">
 Figure 19.7: A red–green contrast becomes indistinguishable under red–green cvd (deuteranomaly or protanomaly).
 </p>
 </div>
 
 <div class="figure" style="text-align: center"><span id="fig:blue-green-cvd-sim"></span>
-<img src="pitfalls_of_color_use_files/figure-html/blue-green-cvd-sim-1.png" alt="A blue–green contrast becomes indistinguishable under blue–yellow cvd (tritanomaly)." width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/blue-green-cvd-sim-1.png" alt="A blue–green contrast becomes indistinguishable under blue–yellow cvd (tritanomaly)." width="750" />
 <p class="caption">
 Figure 19.8: A blue–green contrast becomes indistinguishable under blue–yellow cvd (tritanomaly).
 </p>
 </div>
 <p>With these examples, it might seem that it is nearly impossible to find two contrasting colors that are safe under all forms of cvd. However, the situation is not that dire. It is often possible to make slight modifications to the colors such that they have the desired character while also being safe for cvd. For example, the ColorBrewer PiYG (pink to yellow-green) scale from Figure <a href="color-basics.html#fig:diverging-scales">4.5</a> looks red–green to people with normal color vision yet remains distinguishable for people with cvd (Figure <a href="color-pitfalls.html#fig:PiYG-cvd-sim">19.9</a>).</p>
 
 <div class="figure" style="text-align: center"><span id="fig:PiYG-cvd-sim"></span>
-<img src="pitfalls_of_color_use_files/figure-html/PiYG-cvd-sim-1.png" alt="The ColorBrewer PiYG (pink to yellow-green) scale from Figure 4.5 looks like a red–green contrast to people with regular color vision but works for all forms of color-vision deficiency. It works because the reddish color is actually pink (a mix of red and blue) while the greenish color also contains yellow. The difference in the blue component between the two colors can be picked up even by deutans or protans, and the difference in the red component can be picked up by tritans." width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/PiYG-cvd-sim-1.png" alt="The ColorBrewer PiYG (pink to yellow-green) scale from Figure 4.5 looks like a red–green contrast to people with regular color vision but works for all forms of color-vision deficiency. It works because the reddish color is actually pink (a mix of red and blue) while the greenish color also contains yellow. The difference in the blue component between the two colors can be picked up even by deutans or protans, and the difference in the red component can be picked up by tritans." width="750" />
 <p class="caption">
 Figure 19.9: The ColorBrewer PiYG (pink to yellow-green) scale from Figure <a href="color-basics.html#fig:diverging-scales">4.5</a> looks like a red–green contrast to people with regular color vision but works for all forms of color-vision deficiency. It works because the reddish color is actually pink (a mix of red and blue) while the greenish color also contains yellow. The difference in the blue component between the two colors can be picked up even by deutans or protans, and the difference in the red component can be picked up by tritans.
 </p>
@@ -436,7 +436,7 @@ <h2><span class="header-section-number">19.3</span> Not designing for color-visi
 <p>While there are several good, cvd-safe color scales readily available, we need to recognize that they are no magic bullets. It is very possible to use a cvd-safe scale and yet produce a figure a person with cvd cannot decipher. One critical parameter is the size of the colored graphical elements. Colors are much easier to distinguish when they are applied to large areas than to small ones or thin lines <span class="citation">(Stone, Albers Szafir, and Setlur <a href="#ref-Stone_et_al_2014">2014</a>)</span>. And this effect is exacerbated under cvd (Figure <a href="color-pitfalls.html#fig:colors-thin-lines">19.11</a>). In addition to the various color-design considerations discussed in this chapter and in Chapter <a href="color-basics.html#color-basics">4</a>, I recommend to view color figures under cvd simulations to get a sense of what they may look like for a person with cvd. There are several online services and desktop apps available that allow users to run arbitrary figures through a cvd simulation.</p>
 
 <div class="figure" style="text-align: center"><span id="fig:colors-thin-lines"></span>
-<img src="pitfalls_of_color_use_files/figure-html/colors-thin-lines-1.png" alt="Colored elements become difficult to distinguish at small sizes. The top left panel (labeled “original”) shows four rectangles, four thick lines, four thin lines, and four groups of points, all colored in the same four colors. We can see that the colors become more difficult to distinguish the smaller or thinner the visual elements are. This problem becomes exacerbated in the cvd simulations, where the colors are already more difficult to distinguish even for the large graphical elements." width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/colors-thin-lines-1.png" alt="Colored elements become difficult to distinguish at small sizes. The top left panel (labeled “original”) shows four rectangles, four thick lines, four thin lines, and four groups of points, all colored in the same four colors. We can see that the colors become more difficult to distinguish the smaller or thinner the visual elements are. This problem becomes exacerbated in the cvd simulations, where the colors are already more difficult to distinguish even for the large graphical elements." width="750" />
 <p class="caption">
 Figure 19.11: Colored elements become difficult to distinguish at small sizes. The top left panel (labeled “original”) shows four rectangles, four thick lines, four thin lines, and four groups of points, all colored in the same four colors. We can see that the colors become more difficult to distinguish the smaller or thinner the visual elements are. This problem becomes exacerbated in the cvd simulations, where the colors are already more difficult to distinguish even for the large graphical elements.
 </p>

_book_production/pitfalls_of_color_use.md

@@ -52,7 +52,7 @@ In Chapter \@ref(color-basics), I listed two critical conditions for designing s
 (ref:rainbow-desaturated) The rainbow colorscale is highly non-monotonic. This becomes clearly visible by converting the colors to gray values. From left to right, the scale goes from moderately dark to light to very dark and back to moderately dark. In addition, the changes in lightness are very non-uniform. The lightest part of the scale (corresponding to the colors yellow, light green, and cyan) takes up almost a third of the entire scale while the darkest part (corresponding to dark blue) is concentrated in a narrow region of the scale.
 
 <div class="figure" style="text-align: center">
-<img src="pitfalls_of_color_use_files/figure-html/rainbow-desaturated-1.png" alt="(ref:rainbow-desaturated)" width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/rainbow-desaturated-1.png" alt="(ref:rainbow-desaturated)" width="750" />
 <p class="caption">(\#fig:rainbow-desaturated)(ref:rainbow-desaturated)</p>
 </div>
 
@@ -76,7 +76,7 @@ As discussed in Chapter \@ref(color-basics), there are three fundamental types o
 (ref:heat-cvd-sim) Color-vision deficiency (cvd) simulation of the sequential color scale Heat, which runs from dark red to light yellow. From left to right and top to bottom, we see the original scale and the scale as seen under deuteranomaly, protanomaly, and tritanomaly simulations. Even though the specific colors look different under the three types of cvd, in each case we can see a clear gradient from dark to light. Therefore, this color scale is safe to use for cvd.
 
 <div class="figure" style="text-align: center">
-<img src="pitfalls_of_color_use_files/figure-html/heat-cvd-sim-1.png" alt="(ref:heat-cvd-sim)" width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/heat-cvd-sim-1.png" alt="(ref:heat-cvd-sim)" width="750" />
 <p class="caption">(\#fig:heat-cvd-sim)(ref:heat-cvd-sim)</p>
 </div>
 
@@ -85,14 +85,14 @@ Things become more complicated for diverging scales, because popular color contr
 (ref:red-green-cvd-sim) A red--green contrast becomes indistinguishable under red--green cvd (deuteranomaly or protanomaly).
 
 <div class="figure" style="text-align: center">
-<img src="pitfalls_of_color_use_files/figure-html/red-green-cvd-sim-1.png" alt="(ref:red-green-cvd-sim)" width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/red-green-cvd-sim-1.png" alt="(ref:red-green-cvd-sim)" width="750" />
 <p class="caption">(\#fig:red-green-cvd-sim)(ref:red-green-cvd-sim)</p>
 </div>
 
 (ref:blue-green-cvd-sim) A blue--green contrast becomes indistinguishable under blue--yellow cvd (tritanomaly).
 
 <div class="figure" style="text-align: center">
-<img src="pitfalls_of_color_use_files/figure-html/blue-green-cvd-sim-1.png" alt="(ref:blue-green-cvd-sim)" width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/blue-green-cvd-sim-1.png" alt="(ref:blue-green-cvd-sim)" width="750" />
 <p class="caption">(\#fig:blue-green-cvd-sim)(ref:blue-green-cvd-sim)</p>
 </div>
 
@@ -101,7 +101,7 @@ With these examples, it might seem that it is nearly impossible to find two cont
 (ref:PiYG-cvd-sim) The ColorBrewer PiYG (pink to yellow-green) scale from Figure \@ref(fig:diverging-scales) looks like a red--green contrast to people with regular color vision but works for all forms of color-vision deficiency. It works because the reddish color is actually pink (a mix of red and blue) while the greenish color also contains yellow. The difference in the blue component between the two colors can be picked up even by deutans or protans, and the difference in the red component can be picked up by tritans.
 
 <div class="figure" style="text-align: center">
-<img src="pitfalls_of_color_use_files/figure-html/PiYG-cvd-sim-1.png" alt="(ref:PiYG-cvd-sim)" width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/PiYG-cvd-sim-1.png" alt="(ref:PiYG-cvd-sim)" width="750" />
 <p class="caption">(\#fig:PiYG-cvd-sim)(ref:PiYG-cvd-sim)</p>
 </div>
 
@@ -133,7 +133,7 @@ While there are several good, cvd-safe color scales readily available, we need t
 (ref:colors-thin-lines) Colored elements become difficult to distinguish at small sizes. The top left panel (labeled "original") shows four rectangles, four thick lines, four thin lines, and four groups of points, all colored in the same four colors. We can see that the colors become more difficult to distinguish the smaller or thinner the visual elements are. This problem becomes exacerbated in the cvd simulations, where the colors are already more difficult to distinguish even for the large graphical elements.
 
 <div class="figure" style="text-align: center">
-<img src="pitfalls_of_color_use_files/figure-html/colors-thin-lines-1.png" alt="(ref:colors-thin-lines)" width="720" />
+<img src="pitfalls_of_color_use_files/figure-html/colors-thin-lines-1.png" alt="(ref:colors-thin-lines)" width="750" />
 <p class="caption">(\#fig:colors-thin-lines)(ref:colors-thin-lines)</p>
 </div>