diff --git a/02.perception-and-color/colorblind.jpg b/02.perception-and-color/colorblind.jpg new file mode 100644 index 0000000..c66c295 Binary files /dev/null and b/02.perception-and-color/colorblind.jpg differ diff --git a/02.perception-and-color/contrast.png b/02.perception-and-color/contrast.png new file mode 100644 index 0000000..32d69a2 Binary files /dev/null and b/02.perception-and-color/contrast.png differ diff --git a/02.perception-and-color/example1a.png b/02.perception-and-color/example1a.png deleted file mode 100644 index 2d7b811..0000000 Binary files a/02.perception-and-color/example1a.png and /dev/null differ diff --git a/02.perception-and-color/example1b.png b/02.perception-and-color/example1b.png deleted file mode 100644 index ab3a53a..0000000 Binary files a/02.perception-and-color/example1b.png and /dev/null differ diff --git a/02.perception-and-color/hexrgb.png b/02.perception-and-color/hexrgb.png new file mode 100644 index 0000000..9d71a7f Binary files /dev/null and b/02.perception-and-color/hexrgb.png differ diff --git a/02.perception-and-color/hexrgb.svg b/02.perception-and-color/hexrgb.svg new file mode 100644 index 0000000..c81b52b --- /dev/null +++ b/02.perception-and-color/hexrgb.svg @@ -0,0 +1,241 @@ + + + + + + + + + + + + #aa3399 + aa/ff170/25566% + 33/ff51/25520% + 99/ff153/25539% + + hexdecpercent + + diff --git a/02.perception-and-color/nominal.png b/02.perception-and-color/nominal.png new file mode 100644 index 0000000..6eca3af Binary files /dev/null and b/02.perception-and-color/nominal.png differ diff --git a/02.perception-and-color/ordinal.png b/02.perception-and-color/ordinal.png new file mode 100644 index 0000000..82405d3 Binary files /dev/null and b/02.perception-and-color/ordinal.png differ diff --git a/02.perception-and-color/palette-types.jpg b/02.perception-and-color/palette-types.jpg new file mode 100644 index 0000000..31b6b22 Binary files /dev/null and b/02.perception-and-color/palette-types.jpg differ diff --git a/02.perception-and-color/perception-examples.ipynb b/02.perception-and-color/perception-examples.ipynb index 1954899..a8e7248 100644 --- a/02.perception-and-color/perception-examples.ipynb +++ b/02.perception-and-color/perception-examples.ipynb @@ -2,7 +2,7 @@ "cells": [ { "cell_type": "code", - "execution_count": 1, + "execution_count": 2, "id": "adf7aa23-daf2-4cfe-9910-2b00576b2ff7", "metadata": {}, "outputs": [], @@ -21,21 +21,21 @@ }, { "cell_type": "code", - "execution_count": 118, - "id": "05a4d76e-7ade-431a-a773-d438c6ac9c79", + "execution_count": 20, + "id": "bb05f630-eb13-4afe-8090-dd43c2f27a47", "metadata": {}, "outputs": [], "source": [ "random_df = pl.DataFrame({\n", " \"a\": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],\n", " \"b\": [\"a\", \"b\", \"q\", \"c\", \"a\", \"c\", \"n\", \"c\", \"p\", \"b\", \"c\", \"n\", \"q\", \"r\", \"a\", \"b\", \"c\", \"b\", \"b\", \"b\"],\n", - " \"c\": [500, 2, 3, 4, 10, 20, 100, 490, 400, 140, 200, 180, 380, 350, 180, 135, 400, 210, 230, 300]\n", + " \"c\": [320, 310, 300, 270, 110, 100, 130, 240, 250, 370, 330, 310, 100, 70, 210, 230, 220, 150, 160, 100]\n", "})" ] }, { "cell_type": "code", - "execution_count": 122, + "execution_count": 21, "id": "902298fe-3a6c-446e-a060-f95071acedf1", "metadata": {}, "outputs": [ @@ -44,23 +44,23 @@ "text/html": [ "\n", "\n", - "
\n", + "
\n", "" ], "text/plain": [ "alt.Chart(...)" ] }, - "execution_count": 122, + "execution_count": 21, "metadata": {}, "output_type": "execute_result" } @@ -132,94 +132,15 @@ }, { "cell_type": "code", - "execution_count": 120, + "execution_count": null, "id": "87228f27-baad-4acb-80af-1ca44c21e8fe", "metadata": {}, - "outputs": [ - { - "data": { - "text/html": [ - "\n", - "\n", - "
\n", - "" - ], - "text/plain": [ - "alt.Chart(...)" - ] - }, - "execution_count": 120, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [] }, { "cell_type": "code", - "execution_count": 123, + "execution_count": 19, "id": "5515ea60-70c1-4fd7-bef9-b5451c2ea00c", "metadata": {}, "outputs": [ @@ -228,23 +149,23 @@ "text/html": [ "\n", "\n", - "
\n", + "
\n", "" ], "text/plain": [ "alt.Chart(...)" ] }, - "execution_count": 123, + "execution_count": 19, "metadata": {}, "output_type": "execute_result" } diff --git a/02.perception-and-color/qual.png b/02.perception-and-color/qual.png new file mode 100644 index 0000000..559af13 Binary files /dev/null and b/02.perception-and-color/qual.png differ diff --git a/02.perception-and-color/rgb-khan.jpg b/02.perception-and-color/rgb-khan.jpg new file mode 100644 index 0000000..404e834 Binary files /dev/null and b/02.perception-and-color/rgb-khan.jpg differ diff --git a/02.perception-and-color/slides.html b/02.perception-and-color/slides.html index b75f9dc..82c516d 100644 --- a/02.perception-and-color/slides.html +++ b/02.perception-and-color/slides.html @@ -13,11 +13,11 @@ /* custom-theme.css */ /* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1} -/* @theme 32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}
+/* @theme yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}

Perception & Color

CAPP 30239

-
+

Today

  • What matters most when creating a visualization?
    • @@ -25,10 +25,10 @@
  • Understanding color, and computational representations of it.
-
+

What is the most important question when creating a visualization?

-
+

What is the most important question when creating a visualization?

  • Where will the data come from? @@ -36,7 +36,7 @@
  • Who is the audience?
-
+

Audience First

  • Who are you presenting to?
    • @@ -47,7 +47,7 @@

Only now can we start thinking about data and presentation.

-
+

Perception

  • Selective - We can only pay attention to so much.
    • @@ -55,11 +55,11 @@
  • Limited working memory - We hold a very limited set of information in our minds at once.
-
+

What do you see?

-

+

alt.Chart(random_df).mark_point().encode(
     alt.X("a"),
@@ -74,11 +74,11 @@
-
+

What do you see?

-

+

alt.Chart(random_df).mark_line().encode(
     x="a",
     y="c",
@@ -87,11 +87,11 @@
-
+

Effectiveness Revisited

-
+

Altair Channels

@@ -117,7 +117,7 @@
-
+

Derived Properties

  • Length/Area - size of bars (X, Y)
    • @@ -127,14 +127,14 @@

What about volume?

-
+

Stevens' Power Law

Stevens (1975): Human response to sensory stimulus is characterized by a power law with different exponents with different stimuli.

perception = (magnitude of sensation)a

Smaller a exponent: harder to perceive changes.

Stevens measured values of a by exposing people to varied stimulus and asking them to compare magnitudes.

-
+

@@ -147,7 +147,7 @@ -Color Brightness +Color Brightness 0.33-0.5 @@ -175,7 +175,7 @@ 1.3-1.6 -Color Saturation +Color Saturation 1.7 @@ -186,64 +186,65 @@
-
+

3D Graphs

-
+

-
+

-
+

Instead of 3D Graphs

  • Find other channels: hue & size are good candidates. (bubble chart)
  • Or make multiple 2D graphs with XY/YZ/XZ pairs.
-
+

What is Color?

Wavelengths of light are perceived as particular colors:

-

In practice: we almost never see monochromatic color, light sources emit a spectrum & we perceive peaks.

+

What's missing?

-
+

Color & the Eye

Rods

    -
  • "brightness"
  • spread throughout retina
  • more sensitive in low light conditions
    • +
  • brightness ("lightness")

Cones

  • 3 types with peak sensitivity at different frequencies
  • concentrated in center of eye
  • less sensitive in low light conditions
    • +
  • hue & saturation
-
+

Spectrum vs. What We See

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.

In actuality, multiple combinations of light can give same color (metamers).

-
+

Chromatic Adaptation

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.

Be particularly careful with blue/green boundaries, as there are significant cultural differences.

Source: https://blog.xkcd.com/2010/05/03/color-survey-results/

-
+

Cultural Considerations

    @@ -252,42 +253,67 @@
  • 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).
-
+
+

Color Vision Deficiency

+

More accurate name for what is commonly known as colorblindness.

+
    +
  • Red-Green CVD - most common +
      +
    • four types: Dueteranomaly and Protanomaly (mild) to Protanopia and Dueteranopia (complete)
      • +
    +
    • +
  • Tritanomaly/Tritanopia: blue/green and yellow/red confusion.
    • +
  • rarest, complete lack of color vision, usually corresponds to other vision issues as well
    • +
+
+

Color on a Page

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.

-

this is 0% red, 100% green, 0% blue intensity
-this is 20% red, 60% green, 20% blue intensity
-this is 100% red, 0% green, 100% blue intensity

-
+
+

Color Spaces

+

Ways of describing a color mathematically, usually have 3 components to match our perception of color:

+
    +
  • RGB (early photography)
    • +
  • CIE XYZ (1931)
    • +
  • HSB/HSV/HSL (1970s)
    • +
+
+
+

A common way to refer to colors is by their intensity in each of these three channels.

+

this is 0% red, 100% green, 0% blue intensity (#00ff00)
+this is 20% red, 60% green, 20% blue intensity: (#143c14)
+this is 100% red, 0% green, 100% blue intensity: #ff00ff

+

This is sometimes expressed in hexadecimal:

+

+
+

RGB space as a cube

cube

-
+

RGB as pair plots

pair plots

Remember this trick for your own 3-dimensional data!

-
+

A slice through the middle of the cube gives colors of comparable brightness. (You may have seen such a triangle in color pickers.)

-
+

HSL

An alternative color space that's very useful for visualization is HSL color space.

-

Hue, Saturation, Luminosity

+

Hue, Saturation, Lightness | https://hslpicker.com/

-
+

Aside: What about "alpha"?

-

You will often see a fourth channel: RGBA, HSLA.

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.

@@ -296,22 +322,20 @@
  • Variations are very subtle, and background dependent.
    • -
    -

    CIE XYZ

    -

    Derived in 1931(!) based on human perception.

    +
    +

    CIE (RGB / XYZ / CIELAB)

    +

    Based on human perception experiments where people would adjust dials to recreate colors out of red, green, and blue light.

    +

    First from 1920s, revised in 1970s.

    +

    Commission internationale de l'éclairage (Illumination)

    -
    +

    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.

    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:

      @@ -320,7 +344,7 @@
    • differentiability
    -
    +

    Role of Color

    • Identify - Different color per category/actor. @@ -345,34 +369,47 @@
    -
    +

    Color Channels & Data Types

    -

    TODO: https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27
    -TODO: (also 33 and 34)

    +

    Lightness is perceived as ordered

    +

    Good for Ordinal variables

    +

    +

    Quantitative (Continuous) variables harder to discern

    +

    +

    Hue typically unordered

    +

    Nominal variables.

    +

    +
    +

    Types of Palettes

      -
    • qualitative
      • -
    • sequential
      • -
    • diverging
      • +
    • Qualitative - Nominal data
      • +
    • Sequential - Quantitative data
      • +
    • Diverging - Data with a meaningful zero-point (increase/decrease, more/less)
    +

    +
    +

    Hue Separation

    -
      -
    • distinct
      • -
    • grouped
      • -
    +

    Pick distinct hues for unrelated variables.

    +

    Grouped schemes can be used where there are relationships among the categories.

    + +

    https://vega.github.io/vega/docs/schemes/

    -
    -

    Legibility

    -

    An important issue when using colored text and/or backgrounds is legibility.

    -

    TODO: font legibility image

    -
    -
    +

    "Get it right in black & white"

    A common mantra among visual designers.

    +

    Ensure that your hues have different brightness levels.

    Ensure that you aren't using hue alone for your image.

    -

    TODO: image

    -
    +
    +

    Text Legibility

    +

    An important issue when using colored text and/or backgrounds is legibility.

    +

    Web Content Accessibility Guidelines require a 4.5 color contrast (3:1 for large text).

    +

    Minimize saturation in backgrounds, pick a font color with opposing lightness.

    +

    https://webaim.org/resources/contrastchecker/

    +
    +

    Tools

    Color-Blindness

      @@ -387,7 +426,7 @@ TODO: (also 33 and 34)

    • 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.

    @@ -395,8 +434,9 @@ TODO: (also 33 and 34)

  • https://www.math.csi.cuny.edu/~mvj/GC-DataViz-S23/lectures/L6.html
  • https://en.wikipedia.org/wiki/Stevens's_power_law
  • https://colorusage.arc.nasa.gov
    • +
  • https://vega.github.io/vega/docs/schemes/

    • credit: https://en.wikipedia.org/wiki/File:Linear_visible_spectrum.svg

    source https://commons.wikimedia.org/wiki/File:Cone-fundamentals-with-srgb-spectrum.svg

    Source: https://www.color-meanings.com/color-symbolism-different-cultures/

    image from wikipedia: UK House of Commons

    image source: https://upload.wikimedia.org/wikipedia/commons/3/34/RGB_pixels.jpg

    credit: https://en.wikipedia.org/wiki/File:Linear_visible_spectrum.svg

    source https://commons.wikimedia.org/wiki/File:Cone-fundamentals-with-srgb-spectrum.svg

    Source: https://www.color-meanings.com/color-symbolism-different-cultures/

    image from wikipedia: UK House of Commons

    https://commons.wikimedia.org/wiki/File:Rgb-compose-Alim_Khan.jpg

    image source: https://upload.wikimedia.org/wikipedia/commons/3/34/RGB_pixels.jpg

    source: Peter Aldhous, NICAR 2016

    \ No newline at end of file diff --git a/02.perception-and-color/slides.md b/02.perception-and-color/slides.md index fdc023a..5483462 100644 --- a/02.perception-and-color/slides.md +++ b/02.perception-and-color/slides.md @@ -55,7 +55,7 @@ theme: custom-theme
    -![](example1a.png) +![](viz-1.png)
    @@ -80,7 +80,7 @@ alt.Chart(random_df).mark_point().encode(
    -![](example1b.png) +![](viz-2.png) ``` alt.Chart(random_df).mark_line().encode( @@ -162,14 +162,14 @@ Stevens measured values of a by exposing people to varied stimulus and asking th | Continuum | Exponent | |-|-| -| Color Brightness| 0.33-0.5 | +| Color **Brightness**| 0.33-0.5 | | Smell| 0.6 | | Loudness | 0.67 | | **Depth Perception** | 0.67 | | Area | 0.7 | | 2D Planar Position | 1.0 | | Warmth | 1.3-1.6 | -| Color Saturation | 1.7 | +| Color **Saturation** | 1.7 | | Electric Shock | 3.5 |
    @@ -204,7 +204,7 @@ Stevens measured values of a by exposing people to varied stimulus and asking th Wavelengths of light are perceived as particular colors: ![](linear_visible_spectrum.svg.png) -In practice: we almost never see monochromatic color, light sources emit a spectrum & we perceive peaks. +What's missing? @@ -214,15 +214,16 @@ In practice: we almost never see monochromatic color, light sources emit a spect ### Rods -- "brightness" - spread throughout retina - more sensitive in low light conditions +- brightness ("lightness") ### Cones - 3 types with peak sensitivity at different frequencies - concentrated in center of eye - less sensitive in low light conditions +- hue & saturation ![bg right](cone-fundamentals.png) @@ -277,6 +278,19 @@ Source: https://blog.xkcd.com/2010/05/03/color-survey-results/ --- +## Color Vision Deficiency + +More accurate name for what is commonly known as colorblindness. + +- Red-Green CVD - most common + - four types: Dueteranomaly and Protanomaly (mild) to Protanopia and Dueteranopia (complete) +- Tritanomaly/Tritanopia: blue/green and yellow/red confusion. +- rarest, complete lack of color vision, usually corresponds to other vision issues as well + +![bg right width:600px](colorblind.jpg) + +--- + ## Color on a Page ![bg right](cmyk.svg) @@ -291,17 +305,40 @@ We call this CMYK color. 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. - -this is 0% red, 100% green, 0% blue intensity -this is 20% red, 60% green, 20% blue intensity -this is 100% red, 0% green, 100% blue intensity ![bg right](additive.png) --- +## Color Spaces + +Ways of describing a color mathematically, usually have 3 components to match our perception of color: + +- RGB (early photography) +- CIE XYZ (1931) +- HSB/HSV/HSL (1970s) + +![bg right width:700px](rgb-khan.jpg) + + + +--- + +A common way to refer to colors is by their intensity in each of these three channels. + +this is 0% red, 100% green, 0% blue intensity (#00ff00) +this is 20% red, 60% green, 20% blue intensity: (#143c14) +this is 100% red, 0% green, 100% blue intensity: #ff00ff + +This is sometimes expressed in hexadecimal: + +![height:120px](hexrgb.png) + +![bg right](rgb-pixels.jpg) + +--- + ### RGB space as a cube ![cube](LinearRGBCube.png) @@ -328,14 +365,12 @@ A slice through the middle of the cube gives colors of comparable brightness. ( An alternative color space that's very useful for visualization is HSL color space. -Hue, Saturation, Luminosity +Hue, Saturation, Lightness | --- ## 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). @@ -349,9 +384,13 @@ This has to do with how the program in question *blends* the colors. The final p --- -## CIE XYZ +## CIE (RGB / XYZ / CIELAB) -Derived in 1931(!) based on human perception. +Based on human perception experiments where people would adjust dials to recreate colors out of red, green, and blue light. + +First from 1920s, revised in 1970s. + +*Commission internationale de l'éclairage* (Illumination) ![bg right](cie-xyz.png) @@ -369,12 +408,6 @@ 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: @@ -400,27 +433,45 @@ Color choices should be made with respect to: ## Color Channels & Data Types -TODO: https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27 -TODO: (also 33 and 34) +### Lightness is perceived as ordered -### Types of Palettes +Good for **Ordinal** variables -- qualitative -- sequential -- diverging +![height:50px](ordinal.png) -### Hue Separation +**Quantitative** (Continuous) variables harder to discern -- distinct -- grouped +![height:50px](qual.png) + +### Hue typically unordered + +**Nominal** variables. + +![height:50px](nominal.png) --- -## Legibility +### Types of Palettes -An important issue when using colored text and/or backgrounds is **legibility**. +- Qualitative - Nominal data +- Sequential - Quantitative data +- Diverging - Data with a meaningful zero-point (increase/decrease, more/less) -TODO: font legibility image +![](palette-types.jpg) + + + +--- + +### Hue Separation + +Pick distinct hues for unrelated variables. + +Grouped schemes can be used where there are relationships among the categories. + +![bg left width:600px](vega-schemes.png) + + --- @@ -428,9 +479,27 @@ TODO: font legibility image A common mantra among visual designers. +Ensure that your hues have different brightness levels. + Ensure that you aren't using hue alone for your image. -TODO: image +![bg left width:600px](vega-schemes-bw.jpg) + +--- + +## Text Legibility + +An important issue when using colored text and/or backgrounds is **legibility**. + +Web Content Accessibility Guidelines require a 4.5 color contrast (3:1 for large text). + +Minimize *saturation* in backgrounds, pick a font color with opposing *lightness*. + + + +![bg left width:600px](contrast.png) + + --- @@ -441,6 +510,8 @@ TODO: image - Theme exploration for cartography: - Color-theory based theme creator: https://meodai.github.io/poline/ - Theme creator w/ theme sharing: https://coolors.co +- HSL/RGB picker: +- Contast checker: ### Color-Blindness @@ -458,3 +529,5 @@ Color space images are from , which is an in - 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://vega.github.io/vega/docs/schemes/ + diff --git a/02.perception-and-color/vega-schemes-bw.jpg b/02.perception-and-color/vega-schemes-bw.jpg new file mode 100644 index 0000000..e451275 Binary files /dev/null and b/02.perception-and-color/vega-schemes-bw.jpg differ diff --git a/02.perception-and-color/vega-schemes.png b/02.perception-and-color/vega-schemes.png new file mode 100644 index 0000000..36bc861 Binary files /dev/null and b/02.perception-and-color/vega-schemes.png differ diff --git a/02.perception-and-color/viz-1.png b/02.perception-and-color/viz-1.png new file mode 100644 index 0000000..e740a1a Binary files /dev/null and b/02.perception-and-color/viz-1.png differ diff --git a/02.perception-and-color/viz-2.png b/02.perception-and-color/viz-2.png new file mode 100644 index 0000000..f79a38e Binary files /dev/null and b/02.perception-and-color/viz-2.png differ