more color images

02.perception-and-color/cmyk.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="608.00006"
+   height="608"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.46"
+   sodipodi:docname="CMY.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <metadata
+     id="metadata15">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     inkscape:window-height="667"
+     inkscape:window-width="640"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     guidetolerance="10.0"
+     gridtolerance="10.0"
+     objecttolerance="10.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     showgrid="false"
+     inkscape:zoom="0.75986842"
+     inkscape:cx="304.00003"
+     inkscape:cy="304"
+     inkscape:window-x="22"
+     inkscape:window-y="29"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs4">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 304 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="608.00006 : 304 : 1"
+       inkscape:persp3d-origin="304.00003 : 202.66667 : 1"
+       id="perspective17" />
+  </defs>
+  <g
+     transform="translate(-18.291045,-16.542123)"
+     style="opacity:1;display:inline"
+     id="layer1">
+    <path
+       d="M 420 460.93362 A 217.14285 217.14285 0 1 1  -14.285706,460.93362 A 217.14285 217.14285 0 1 1  420 460.93362 z"
+       transform="matrix(0.9189367,0,0,0.9189367,37.127658,-202.74718)"
+       style="opacity:1;fill:#00ffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"
+       id="path2162" />
+    <path
+       d="M 420 460.93362 A 217.14285 217.14285 0 1 1  -14.285706,460.93362 A 217.14285 217.14285 0 1 1  420 460.93362 z"
+       transform="matrix(0.9189367,0,0,0.9189367,237.62766,-202.74718)"
+       style="opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"
+       id="path2164" />
+    <path
+       d="M 420 460.93362 A 217.14285 217.14285 0 1 1  -14.285706,460.93362 A 217.14285 217.14285 0 1 1  420 460.93362 z"
+       transform="matrix(0.9189367,0,0,0.9189367,137.58713,-3.2066487)"
+       style="opacity:1;fill:#ff00ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"
+       id="path9203" />
+    <path
+       d="M 324,48.087181 C 264.49414,82.636501 224.46875,147.05693 224.46875,220.77468 C 224.46875,294.49339 264.49287,358.91318 324,393.46218 C 383.50713,358.91318 423.53126,294.4934 423.53125,220.77468 C 423.53125,147.05692 383.50585,82.636501 324,48.087181 z "
+       style="opacity:1;fill:#00ff00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"
+       id="path18905" />
+    <path
+       d="M 324,220.8125 C 288.46034,220.8125 255.06916,230.12991 226.15625,246.4375 C 238.94927,344.27103 322.69542,419.90626 424,419.90625 C 459.54321,419.90625 492.92884,410.59187 521.84375,394.28125 C 509.04887,296.44977 425.30313,220.81251 324,220.8125 z "
+       style="opacity:1;fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"
+       id="path19879" />
+    <path
+       d="M 324,220.8125 C 222.69688,220.8125 138.95113,296.44976 126.15625,394.28125 C 155.07115,410.59187 188.45679,419.90624 224,419.90625 C 325.30458,419.90625 409.05074,344.27103 421.84375,246.4375 C 392.93084,230.12991 359.53966,220.8125 324,220.8125 z "
+       style="opacity:1;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"
+       id="path20853" />
+    <path
+       d="M 324,220.8125 C 288.45334,220.8125 255.07252,230.12055 226.15625,246.4375 C 234.33959,309.10064 271.62382,362.65363 324,393.0625 C 325.25763,392.33212 326.50996,391.56938 327.75,390.8125 C 329.0098,390.04356 330.25876,389.26463 331.5,388.46875 C 333.98249,386.87699 336.43792,385.22833 338.84375,383.53125 C 342.45249,380.98563 345.94791,378.33593 349.375,375.5625 C 351.60265,373.75974 353.82169,371.92643 355.96875,370.03125 C 356.02346,369.98296 356.07034,369.92335 356.125,369.875 C 357.44508,368.70721 358.74264,367.51434 360.03125,366.3125 C 361.96384,364.51004 363.85893,362.65831 365.71875,360.78125 C 366.75205,359.73837 367.77099,358.69034 368.78125,357.625 C 369.79151,356.55966 370.79443,355.49364 371.78125,354.40625 C 373.75489,352.23147 375.68507,350.01054 377.5625,347.75 C 378.50122,346.61973 379.4297,345.4636 380.34375,344.3125 C 381.2578,343.1614 382.14227,342.01527 383.03125,340.84375 C 383.92023,339.67223 384.79275,338.47278 385.65625,337.28125 C 386.51975,336.08972 387.38114,334.89863 388.21875,333.6875 C 389.85137,331.32684 391.43676,328.93285 392.96875,326.5 C 393.00847,326.43692 393.0541,326.37563 393.09375,326.3125 C 393.87837,325.06338 394.64874,323.79875 395.40625,322.53125 C 396.73254,320.31204 398.00853,318.05509 399.25,315.78125 C 399.32814,315.63814 399.39096,315.48707 399.46875,315.34375 C 399.56668,315.16327 399.68387,314.99331 399.78125,314.8125 C 400.48332,313.50946 401.17001,312.1952 401.84375,310.875 C 403.19123,308.2346 404.48704,305.55033 405.71875,302.84375 C 406.17778,301.83506 406.61986,300.83007 407.0625,299.8125 C 407.21377,299.46452 407.38191,299.13025 407.53125,298.78125 C 407.59766,298.62615 407.65272,298.4678 407.71875,298.3125 C 407.9018,297.88167 408.0699,297.43237 408.25,297 C 408.5763,296.21704 408.90218,295.44421 409.21875,294.65625 C 410.33143,291.88674 411.3846,289.07917 412.375,286.25 C 412.39017,286.20665 412.42235,286.16836 412.4375,286.125 C 413.41085,283.3383 414.30465,280.52886 415.15625,277.6875 C 415.56134,276.33591 415.96673,274.95719 416.34375,273.59375 C 416.73996,272.16091 417.10391,270.72679 417.46875,269.28125 C 417.49767,269.16659 417.53378,269.05224 417.5625,268.9375 C 418.12885,266.6763 418.66786,264.38471 419.15625,262.09375 C 419.30275,261.40577 419.45437,260.72183 419.59375,260.03125 C 419.67542,259.62713 419.73328,259.2175 419.8125,258.8125 C 420.02622,257.71995 420.24171,256.63008 420.4375,255.53125 C 420.70587,254.02509 420.95317,252.51761 421.1875,251 C 421.37038,249.8156 421.52557,248.62865 421.6875,247.4375 C 421.73317,247.10115 421.79976,246.77438 421.84375,246.4375 C 392.93084,230.12991 359.53966,220.8125 324,220.8125 z "
+       style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-opacity:1"
+       id="path21827" />
+  </g>
+</svg>

02.perception-and-color/slides.md

@@ -192,10 +192,10 @@ Stevens measured values of a by exposing people to varied stimulus and asking th
 
 ## Instead of 3D Graphs
 
-- Find other channels: hue & size are good candidates.
+- Find other channels: hue & size are good candidates. (bubble chart)
-- Combine different dimensions into side-by-side 2D graphs.
+- Or make multiple 2D graphs with XY/YZ/XZ pairs.
 
-TODO: example of 2D decomposition of a graph
+![bg left](scatter-matrix.png)
 
 ---
 
@@ -230,38 +230,179 @@ In practice: we almost never see monochromatic color, light sources emit a spect
 
 ---
 
-## Metamers ...
+## Spectrum vs. What We See
 
-TODO: slides from Alex maybe? or drop?
+What we actually see is always a blend of multiple peaks.
+
+This is impacted by ambient light conditions, as well as quirks of our visual processing.
+
+![height:400px](the-dress.jpg)
+
+In actuality, multiple combinations of light can give same color (**metamers**).
+
+---
+
+## Chromatic Adaptation
+
+![](demo-bw-illusion-andrew-steele.gif)
+
+Source: Andrew Steele <https://www.youtube.com/channel/UC-XYsDNh4-886rMNLnnwR_w>
 
 ---
 
 ## Color Naming
 
----
+Color naming is highly subjective, and research has shown that the ability to name a color correlates highly with the ability to distinguish it.
 
-## Color Models
+![bg right](xkcd-color-map.png)
 
-- CIE
+Be particularly careful with blue/green boundaries, as there are significant cultural differences.
-- RGB
-- HS(V|L|B)
 
+Source: https://blog.xkcd.com/2010/05/03/color-survey-results/
 
 
 ---
 
+## Cultural Considerations
+
+![bg right width:600px](hok-uk.svg)
+
+- American audiences associated <span color="red">red</span> & <span color="blue">blue</span> with political parties on any map in a political context.
+- Also international meaning of <span color="red">red</span> & <span color="blue">blue</span> is flipped: red is left, blue is right.
+- Most other colors have contradictory meanings depending on culture. For example, yellow might be chosen to denote success (parts of Africa) or be associated with death (Middle East).
+
+<!--Source: https://www.color-meanings.com/color-symbolism-different-cultures/-->
+
+<!-- image from wikipedia: UK House of Commons -->
+
+---
+
+## Color on a Page
+
+![bg right](cmyk.svg)
+
+Ink absorbs light, so we work with subtractive blending.  Our base colors are cyan, magenta, and yellow.  To save on ink costs, we throw in black/contrast as well.
+
+We call this CMYK color.
+
+---
+
+## Color on a Screen
+
+Screens emit light, which means we use **additive blending** of red, green, and blue light. Every pixel of a screen can emit these three colors in different intensities.
+
+A common way to refer to colors is by their intensity in each of these three channels.
+
+<span style="color: rgb(0% 100% 0%)">this is 0% red, 100% green, 0% blue intensity</span>
+<span style="color: rgb(20% 60% 20%)">this is 20% red, 60% green, 20% blue intensity</span>
+<span style="color: #ff00ff">this is 100% red, 0% green, 100% blue intensity</span>
+
+
+![bg right](additive.png)
+
+---
+
+### RGB space as a cube
+
+![cube](LinearRGBCube.png)
+
+---
+
+### RGB as pair plots
+
+![pair plots](RGBPairPlots.png)
+
+Remember this trick for your own 3-dimensional data!
+
+---
+
+![height:500px](TriangleSliceRGB.png)
+
+A slice through the middle of the cube gives colors of comparable brightness.  (You may have seen such a triangle in color pickers.)
+
+---
+
+## HSL
+
+![height:500px](HSL.png)
+
+An alternative color space that's very useful for visualization is HSL color space.
+
+Hue, Saturation, Luminosity
+
+---
+
+## Aside: What about "alpha"?
+
+![bg left](rgb-pixels.jpg)
+
+You will often see a fourth channel: RGB**A**, HSL**A**.
+
+This is known as alpha transparency (translucency).
+
+This has to do with how the program in question *blends* the colors. The final pixel values on the screen will still be converted to RGB components.
+
+- Use sparingly.
+- Variations are very subtle, and background dependent.
+
+<!-- image source: https://upload.wikimedia.org/wikipedia/commons/3/34/RGB_pixels.jpg -->
+
+---
+
+## CIE XYZ
+
+Derived in 1931(!) based on human perception.
+
+![bg right](cie-xyz.png)
+
+---
+
+## Screen Gamut
+
+Screens can't show the entire range of visible colors accurately, they define a "gamut".  Since ~1996 most devices aim at a standard gamut to ensure similar representations of color, but even high end devices are not perfectly aligned.
+
+![bg right](gamut2.png)
+
+Projectors (like the one you're likely viewing this on) usually have skewed gamut. 
+
+Moral of the story: **Consider your medium!**
+
+---
+
+## Other Variations
+
+TODO: colorblindness, etc.
+
+---
+
+## What does all this mean for visualization?
+
+Color choices should be made with respect to:
+
+  - medium (screen vs. print, type of screen)
+  - audience (culture, vision differences, expectations)
+  - differentiability
+
+---
+
+## Role of Color
+
+- **Identify** - Different color per category/actor.
+  - opt for distinct hues
+- **Group** - Group like entities using same/like colors.
+  - often with similar hues
+- **Layer** - Overlay different information while keeping contrast.
+  - saturation differences very important to not overwhelm eye
+- **Highlight** - Call out important/relevant information.
+  - brightness and hue differences important
+
+--- 
+
 ## Color Channels & Data Types
 
 TODO: https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27
 TODO: (also 33 and 34)
 
----
-
-## Back to Visualization
-
-### Uses of Color 
-Identify, Group, Layer, Highlight
-
 ### Types of Palettes
 
 - qualitative
@@ -275,50 +416,45 @@ Identify, Group, Layer, Highlight
 
 ---
 
-## "Get it right in black & white"
-
----
-
 ## Legibility
 
----
+An important issue when using colored text and/or backgrounds is **legibility**.
 
-## Cultural Considerations
+TODO: font legibility image
 
 ---
 
-## Human Variation
+## "Get it right in black & white"
 
----
+A common mantra among visual designers.
 
-## What about "alpha"?
+Ensure that you aren't using hue alone for your image.
 
-You will often see a fourth channel: RGB**A**, HSL**A**.
+TODO: image
-
-This is known as alpha transparency (translucency).
-
-This has to do with how the program in question *blends* the colors.
-
-By default, the second color drawn overdraws the first.
-
-With translucency we can get a sense of depth without resorting to 3D.
-
-- Use sparingly.
-- Variations are very subtle, and background dependent.
-
-TODO: example
 
 ---
 
 ## Tools
 
+- Vega Schemes: https://vega.github.io/vega/docs/schemes/
+- Contrast/theme exploration: https://schubert-da.github.io/dataviz-palette-tool/
+- Theme exploration for cartography: <https://colorbrewer2.org/>
+- Color-theory based theme creator: https://meodai.github.io/poline/
+- Theme creator w/ theme sharing: https://coolors.co
+
+### Color-Blindness
+
+- MacOS/iOS app: https://michelf.ca/projects/sim-daltonism/
+- Browser extensions (search "colorblindness" in your browser of choice)
+
 ---
 
 ## Acknowledgements & References
 
 Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.
 
+Color space images are from <https://jamie-wong.com/post/color/>, which is an incredible resource if you'd like to go deeper into both the biology and math of color.
+
 - https://www.math.csi.cuny.edu/~mvj/GC-DataViz-S23/lectures/L6.html
 - https://en.wikipedia.org/wiki/Stevens%27s_power_law
 - https://colorusage.arc.nasa.gov
-- https://jamie-wong.com/post/color/ (great if you'd like to go deeper)