diff --git a/02.perception-and-color/cone-fundamentals.png b/02.perception-and-color/cone-fundamentals.png new file mode 100644 index 0000000..91b7960 Binary files /dev/null and b/02.perception-and-color/cone-fundamentals.png differ diff --git a/02.perception-and-color/linear_visible_spectrum.svg.png b/02.perception-and-color/linear_visible_spectrum.svg.png new file mode 100644 index 0000000..07a1b9b Binary files /dev/null and b/02.perception-and-color/linear_visible_spectrum.svg.png differ diff --git a/02.perception-and-color/slides.html b/02.perception-and-color/slides.html index 347e009..e4d26fd 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 19o8n83fantwwe6rtv7o1ajbz0068it852jy3j156no */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 xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq */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,7 +55,7 @@
  • Limited working memory - We hold a very limited set of information in our minds at once.
-
+

What do you see?

@@ -74,7 +74,7 @@
-
+

What do you see?

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

-
+

@@ -186,17 +186,17 @@
-
+

3D Graphs

-
+

-
+

-
+

Instead of 3D Graphs

  • Find other channels: hue & size are good candidates.
    • @@ -204,17 +204,101 @@

TODO: example of 2D decomposition of a graph

-
-

Color

+
+

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.

-
+
+

Color & the Eye

+

Rods

+
    +
  • "brightness"
    • +
  • spread throughout retina
    • +
  • more sensitive in low light conditions
    • +
+

Cones

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

Metamers ...

+

TODO: slides from Alex maybe? or drop?

+
+
+

Color Naming

+
+
+

Color Models

+
    +
  • CIE
    • +
  • RGB
    • +
  • HS(V|L|B)
    • +
+
+
+

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
    • +
  • sequential
    • +
  • diverging
    • +
+

Hue Separation

+
    +
  • distinct
    • +
  • grouped
    • +
+
+
+

"Get it right in black & white"

+
+
+

Legibility

+
+
+

Cultural Considerations

+
+
+

Human Variation

+
+
+

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.

+

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

+
+

Acknowledgements & References

Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.

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

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

\ No newline at end of file diff --git a/02.perception-and-color/slides.md b/02.perception-and-color/slides.md index bd2d4ed..30d5f6c 100644 --- a/02.perception-and-color/slides.md +++ b/02.perception-and-color/slides.md @@ -199,7 +199,118 @@ TODO: example of 2D decomposition of a graph --- -## Color +## What is Color? + +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. + + + +--- + +## Color & the Eye + +### Rods + +- "brightness" +- spread throughout retina +- more sensitive in low light conditions + +### Cones + +- 3 types with peak sensitivity at different frequencies +- concentrated in center of eye +- less sensitive in low light conditions + +![bg right](cone-fundamentals.png) + + + +--- + +## Metamers ... + +TODO: slides from Alex maybe? or drop? + +--- + +## Color Naming + +--- + +## Color Models + +- CIE +- RGB +- HS(V|L|B) + + + +--- + +## 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 +- sequential +- diverging + +### Hue Separation + +- distinct +- grouped + +--- + +## "Get it right in black & white" + +--- + +## Legibility + +--- + +## Cultural Considerations + +--- + +## Human Variation + +--- + +## What about "alpha"? + +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. + +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 --- @@ -209,3 +320,5 @@ Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materi - 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)