From 9d000c548c8e970101b5b3b3e1f2af135c3d6b97 Mon Sep 17 00:00:00 2001 From: James Turk Date: Fri, 27 Sep 2024 23:10:24 -0500 Subject: [PATCH] 03 WIP --- 02.perception-and-color/slides.html | 62 +++++----- 03.charts/Untitled.ipynb | 77 ++++++++++++ 03.charts/age-junk.png | Bin 0 -> 870715 bytes 03.charts/chartjunk-bullet.webp | Bin 0 -> 32508 bytes 03.charts/eec.gif | Bin 0 -> 38262 bytes 03.charts/examples.ipynb | 177 ++++++++++++++++++++++++++++ 03.charts/francetrains.jpg | Bin 0 -> 95992 bytes 03.charts/labeled.png | Bin 0 -> 30508 bytes 03.charts/liefactor.jpg | Bin 0 -> 24477 bytes 03.charts/sizecycle.gif | Bin 0 -> 32051 bytes 03.charts/slides.html | 130 ++++++++++++++++++++ 03.charts/slides.md | 152 ++++++++++++++++++++++++ 03.charts/sparkline.png | Bin 0 -> 236071 bytes 03.charts/spinal.webp | Bin 0 -> 71308 bytes 03.charts/tufte.png | Bin 0 -> 426735 bytes Justfile | 5 +- pyproject.toml | 1 + uv.lock | 14 +++ 18 files changed, 586 insertions(+), 32 deletions(-) create mode 100644 03.charts/Untitled.ipynb create mode 100644 03.charts/age-junk.png create mode 100644 03.charts/chartjunk-bullet.webp create mode 100644 03.charts/eec.gif create mode 100644 03.charts/examples.ipynb create mode 100644 03.charts/francetrains.jpg create mode 100644 03.charts/labeled.png create mode 100644 03.charts/liefactor.jpg create mode 100644 03.charts/sizecycle.gif create mode 100644 03.charts/slides.html create mode 100644 03.charts/slides.md create mode 100644 03.charts/sparkline.png create mode 100644 03.charts/spinal.webp create mode 100644 03.charts/tufte.png diff --git a/02.perception-and-color/slides.html b/02.perception-and-color/slides.html index e4d26fd..9552539 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 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%}
+/* @theme 670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p */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,13 +204,13 @@

TODO: example of 2D decomposition of a graph

-
+

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

    @@ -225,14 +225,14 @@
  • less sensitive in low light conditions
-
+

Metamers ...

TODO: slides from Alex maybe? or drop?

-
+

Color Naming

-
+

Color Models

  • CIE
  • @@ -240,12 +240,12 @@
  • 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

@@ -261,19 +261,19 @@ TODO: (also 33 and 34)

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

    @@ -286,10 +286,10 @@ TODO: (also 33 and 34)

    TODO: example

    -
    +

    Tools

    -
    +

    Acknowledgements & References

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