2024-09-27 22:28:23 +00:00
<!DOCTYPE html> < html lang = "en-US" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width,height=device-height,initial-scale=1.0" > < meta name = "apple-mobile-web-app-capable" content = "yes" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < meta property = "og:type" content = "website" > < meta name = "twitter:card" content = "summary" > < style > @ m e d i a s c r e e n { b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n { - w e b k i t - t a p - h i g h l i g h t - c o l o r : t r a n s p a r e n t ; - w e b k i t - a p p e a r a n c e : n o n e ; a p p e a r a n c e : n o n e ; b a c k g r o u n d - c o l o r : t r a n s p a r e n t ; b o r d e r : 0 ; c o l o r : i n h e r i t ; c u r s o r : p o i n t e r ; f o n t - s i z e : i n h e r i t ; o p a c i t y : . 8 ; o u t l i n e : n o n e ; p a d d i n g : 0 ; t r a n s i t i o n : o p a c i t y . 2 s l i n e a r } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : d i s a b l e d , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : d i s a b l e d , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : d i s a b l e d , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : d i s a b l e d { c u r s o r : n o t - a l l o w e d ; o p a c i t y : . 1 5 ! i m p o r t a n t } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : h o v e r , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : h o v e r { o p a c i t y : 1 } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : a c t i v e , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : a c t i v e , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : h o v e r : a c t i v e , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : h o v e r : a c t i v e { o p a c i t y : . 6 } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : n o t ( : d i s a b l e d ) , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n : h o v e r : n o t ( : d i s a b l e d ) , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n : h o v e r : n o t ( : d i s a b l e d ) , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - n o t e - c o n t a i n e r b u t t o n : h o v e r : n o t ( : d i s a b l e d ) { t r a n s i t i o n : n o n e } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = p r e v ] , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = p r e v ] , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n . b e s p o k e - m a r p - p r e s e n t e r - i n f o - p a g e - p r e v { b a c k g r o u n d : t r a n s p a r e n t u r l ( " d a t a : i m a g e / s v g + x m l ; b a s e 6 4 , P H N 2 Z y B 4 b W x u c z 0 i a H R 0 c D o v L 3 d 3 d y 5 3 M y 5 v c m c v M j A w M C 9 z d m c i I H Z p Z X d C b 3 g 9 I j A g M C A x M D A g M T A w I j 4 8 c G F 0 a C B m a W x s P S J u b 2 5 l I i B z d H J v a 2 U 9 I i N m Z m Y i I H N 0 c m 9 r Z S 1 s a W 5 l Y 2 F w P S J y b 3 V u Z C I g c 3 R y b 2 t l L W x p b m V q b 2 l u P S J y b 3 V u Z C I g c 3 R y b 2 t l L X d p Z H R o P S I 1 I i B k P S J N N j g g O T A g M j g g N T B s N D A t N D A i L z 4 8 L 3 N 2 Z z 4 = " ) n o - r e p e a t 5 0 % ; b a c k g r o u n d - s i z e : c o n t a i n ; o v e r f l o w : h i d d e n ; t e x t - i n d e n t : 1 0 0 % ; w h i t e - s p a c e : n o w r a p } b o d y [ d a t a - b e s p o k e - v i e w = " " ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = n e x t ] , b o d y [ d a t a - b e s p o k e - v i e w = n e x t ] . b e s p o k e - m a r p - p a r e n t > . b e s p o k e - m a r p - o s c > b u t t o n [ d a t a - b e s p o k e - m a r p - o s c = n e x t ] , b o d y [ d a t a - b e s p o k e - v i e w = p r e s e n t e r ] . b e s p o k e - m a r p - p r e s e n t e r - c o n t a i n e r . b e s p o k e - m a r p - p r e s e n t e r - i n f o - c o n t a i n e r b u t t o n . b e s p o k e - m a r p - p r e s e n t e r - i n f o - p a g e - n e x t { b a c k g r o u n d : t r a n s p a r e n t u r l ( " d a t a : i m a g e / s v g + x m l ; b a s e 6 4 , P H N 2 Z y B 4 b W x u c z 0 i a H R 0 c D o v L 3 d 3 d y 5 3 M y 5 v c m c v M j A w M C 9 z d m c i I H Z p Z X d C b 3 g 9 I j A g M C A x M D A g M T A w I j 4 8 c G F 0 a C B m a W x s P S J u b 2 5 l I i B z d H J v a 2 U 9 I i N m Z m Y i I H N 0 c m 9 r Z S 1 s a W 5 l Y 2 F w P S J y b 3 V u Z C I g c 3 R y b 2 t l L W x p b m V q b 2 l u P S
/*!
* Marp default theme.
*
* @theme default
* @author Yuki Hattori
*
* @auto-scaling true
* @size 16:9 1280px 720px
* @size 4:3 960px 720px
*/div#\:\$p>svg>foreignObject>section,div#\:\$p>svg>foreignObject>section [data-theme=light]{--color-prettylights-syntax-comment:#6e7781;--color-prettylights-syntax-constant:#0550ae;--color-prettylights-syntax-entity:#6639ba;--color-prettylights-syntax-storage-modifier-import:#24292f;--color-prettylights-syntax-entity-tag:#116329;--color-prettylights-syntax-keyword:#cf222e;--color-prettylights-syntax-string:#0a3069;--color-prettylights-syntax-variable:#953800;--color-prettylights-syntax-brackethighlighter-unmatched:#82071e;--color-prettylights-syntax-invalid-illegal-text:#f6f8fa;--color-prettylights-syntax-invalid-illegal-bg:#82071e;--color-prettylights-syntax-carriage-return-text:#f6f8fa;--color-prettylights-syntax-carriage-return-bg:#cf222e;--color-prettylights-syntax-string-regexp:#116329;--color-prettylights-syntax-markup-list:#3b2300;--color-prettylights-syntax-markup-heading:#0550ae;--color-prettylights-syntax-markup-italic:#24292f;--color-prettylights-syntax-markup-bold:#24292f;--color-prettylights-syntax-markup-deleted-text:#82071e;--color-prettylights-syntax-markup-deleted-bg:#ffebe9;--color-prettylights-syntax-markup-inserted-text:#116329;--color-prettylights-syntax-markup-inserted-bg:#dafbe1;--color-prettylights-syntax-markup-changed-text:#953800;--color-prettylights-syntax-markup-changed-bg:#ffd8b5;--color-prettylights-syntax-markup-ignored-text:#eaeef2;--color-prettylights-syntax-markup-ignored-bg:#0550ae;--color-prettylights-syntax-meta-diff-range:#8250df;--color-prettylights-syntax-brackethighlighter-angle:#57606a;--color-prettylights-syntax-sublimelinter-gutter-mark:#8c959f;--color-prettylights-syntax-constant-other-reference-link:#0a3069;--color-fg-default:#1f2328;--color-fg-muted:#656d76;--color-fg-subtle:#6e7781;--color-canvas-default:#fff;--color-canvas-subtle:#f6f8fa;--color-border-default:#d0d7de;--color-border-muted:#d8dee4;--color-neutral-muted:rgba(175,184,193,.2);--color-accent-fg:#0969da;--color-accent-emphasis:#0969da;--color-attention-subtle:#fff8c5;--color-danger-fg:#d1242f;color-scheme:light}div#\:\$p>svg>foreignObject>section [data-theme=dark],div#\:\$p>svg>foreignObject>section:where(.invert){--color-prettylights-syntax-comment:#8b949e;--color-prettylights-syntax-constant:#79c0ff;--color-prettylights-syntax-entity:#d2a8ff;--color-prettylights-syntax-storage-modifier-import:#c9d1d9;--color-prettylights-syntax-entity-tag:#7ee787;--color-prettylights-syntax-keyword:#ff7b72;--color-prettylights-syntax-string:#a5d6ff;--color-prettylights-syntax-variable:#ffa657;--color-prettylights-syntax-brackethighlighter-unmatched:#f85149;--color-prettylights-syntax-invalid-illegal-text:#f0f6fc;--color-prettylights-syntax-invalid-illegal-bg:#8e1519;--color-prettylights-syntax-carriage-return-text:#f0f6fc;--color-prettylights-syntax-carriage-return-bg:#b62324;--color-prettylights-syntax-string-regexp:#7ee787;--color-prettylights-syntax-markup-list:#f2cc60;--color-prettylights-syntax-markup-heading:#1f6feb;--color-prettylights-syntax-markup-italic:#c9d1d9;--color-prettylights-syntax-markup-bold:#c9d1d9;--color-prettylights-syntax-markup-deleted-text:#ffdcd7;--color-prettylights-syntax-markup-deleted-bg:#67060c;--color-prettylights-syntax-markup-inserted-text:#aff5b4;--color-prettylights-syntax-markup-inserted-bg:#033a16;--color-prettylights-syntax-markup-changed-text:#ffdfb6;--color-prettylights-syntax-markup-changed-bg:#5a1e02;--color-prettylights-syntax-markup-ignored-text:#c9d1d9;--color-prettylights-syntax-markup-ignored-bg:#1158c7;--color-prettylights-syntax-meta-diff-range:#d2a8ff;--color-prettylights-syntax-brackethighlighter-angle:#8b949e;--color-prettylights-syntax-sublimelinter-gutter-mark:#484f58;--color-prettylights-syntax-constant-other-reference-link:#a5d6ff;--color-fg-default:#e6edf3;--color-fg-muted:#7d8590;--color-fg-subtle:#6e7681;--color-canvas-default:#0d1117;--color-canvas-subtle:#161b22;--color-border-default:#30363d;--color-border-muted:#21262d;--color-neutral-muted:hsla(215,8%,47%,.4);--color-accent-fg:#2f81f7;--color-accent-emphasis:#1f6feb;--color-attention-subtle:rgba(187,128,9,.1
/* content:""; */display:table}div#\:\$p>svg>foreignObject>section:after{clear:both}div#\:\$p>svg>foreignObject>section>:first-child{margin-top:0!important}div#\:\$p>svg>foreignObject>section>:last-child{margin-bottom:0!important}div#\:\$p>svg>foreignObject>section a:not([href]){color:inherit;text-decoration:none}div#\:\$p>svg>foreignObject>section .absent{color:var(--color-danger-fg)}div#\:\$p>svg>foreignObject>section .anchor{float:left;line-height:1;margin-left:-20px;padding-right:4px}div#\:\$p>svg>foreignObject>section .anchor:focus{outline:none}div#\:\$p>svg>foreignObject>section :is(pre,marp-pre),div#\:\$p>svg>foreignObject>section blockquote,div#\:\$p>svg>foreignObject>section details,div#\:\$p>svg>foreignObject>section dl,div#\:\$p>svg>foreignObject>section ol,div#\:\$p>svg>foreignObject>section p,div#\:\$p>svg>foreignObject>section table,div#\:\$p>svg>foreignObject>section ul{margin-bottom:16px;margin-top:0}div#\:\$p>svg>foreignObject>section blockquote>:first-child{margin-top:0}div#\:\$p>svg>foreignObject>section blockquote>:last-child{margin-bottom:0}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) .octicon-link,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) .octicon-link{color:var(--color-fg-default);vertical-align:middle;visibility:hidden}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5):hover .anchor,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6):hover .anchor{text-decoration:none}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5):hover .anchor .octicon-link,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6):hover .anchor .octicon-link{visibility:visible}div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) code,div#\:\$p>svg>foreignObject>section :is(h1,marp-h1) tt,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) code,div#\:\$p>svg>foreignObject>section :is(h2,marp-h2) tt,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) code,div#\:\$p>svg>foreignObject>section :is(h3,marp-h3) tt,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) code,div#\:\$p>svg>foreignObject>section :is(h4,marp-h4) tt,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) code,div#\:\$p>svg>foreignObject>section :is(h5,marp-h5) tt,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) code,div#\:\$p>svg>foreignObject>section :is(h6,marp-h6) tt{font-size:inherit;padding:0 .2em}div#\:\$p>svg>foreignObject>section summary :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section summary :is(h2,marp-h2),div#\:\$p>svg>foreignObject>section summary :is(h3,marp-h3),div#\:\$p>svg>foreignObject>section summary :is(h4,marp-h4),div#\:\$p>svg>foreignObject>section summary :is(h5,marp-h5),div#\:\$p>svg>foreignObject>section summary :is(h6,marp-h6){display:inline-block}div#\:\$p>svg>foreignObject>section summary :is(h1,marp-h1) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h2,marp-h2) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h3,marp-h3) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h4,marp-h4) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h5,marp-h5) .anchor,div#\:\$p>svg>foreignObject>section summary :is(h6,marp-h6) .anchor{margin-left:-40px}div#\:\$p>svg>foreignObject>section summary :is(h1,marp-h1),div#\:\$p>svg>foreignObject>section summary :is(h2,marp-h2){b
/* custom-theme.css */
/* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1}
2024-09-28 21:51:09 +00:00
/* @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%}< / style > < / head > < body > < div class = "bespoke-marp-osc" > < button data-bespoke-marp-osc = "prev" tabindex = "-1" title = "Previous slide" > Previous slide< / button > < span data-bespoke-marp-osc = "page" > < / span > < button data-bespoke-marp-osc = "next" tabindex = "-1" title = "Next slide" > Next slide< / button > < button data-bespoke-marp-osc = "fullscreen" tabindex = "-1" title = "Toggle fullscreen (f)" > Toggle fullscreen< / button > < button data-bespoke-marp-osc = "presenter" tabindex = "-1" title = "Open presenter view (p)" > Open presenter view< / button > < / div > < div id = ":$p" > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "1" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h1 id = "perception--color" > Perception & Color< / h1 >
< h2 id = "capp-30239" > CAPP 30239< / h2 >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "2" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "today" > Today< / h2 >
< ul >
< li > What matters most when creating a visualization?< / li >
< li > How does human < strong > perception< / strong > factor into visualization design?< / li >
< li > Understanding < strong > color< / strong > , and computational representations of it.< / li >
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "3" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "what-is-the-most-important-question-when-creating-a-visualization" > What is the most important question when creating a visualization?< / h2 >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "4" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "what-is-the-most-important-question-when-creating-a-visualization-1" > What is the most important question when creating a visualization?< / h2 >
2024-09-28 21:51:09 +00:00
< ul >
< li > < s > Where will the data come from?< / s >
< li > < s > What type of chart do I use?< / s > < / li >
< li > Who is the audience?< / li >
< / ul >
2024-09-27 22:28:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "5" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "audience-first" > Audience First< / h2 >
< ul >
< li > Who are you presenting to?< / li >
< li > How familiar are they with the data?< / li >
< li > What is their numerical & visualization literacy?< / li >
< li > Via what medium will they receive the information?< / li >
< li > What are you trying to do? (Persuade, Inform, Inspire?)< / li >
< / ul >
< p > < em > Only now can we start thinking about data and presentation.< / em > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "6" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "perception" > Perception< / h2 >
< ul >
< li > < strong > Selective< / strong > - We can only pay attention to so much.< / li >
< li > < strong > Patterns< / strong > - Our brains are pattern-matching machines, audience will benefit from intentional patterns & be distracted by unintentional ones.< / li >
< li > < strong > Limited working memory< / strong > - We hold a very limited set of information in our minds at once.< / li >
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "7" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "what-do-you-see" > What do you see?< / h2 >
2024-09-28 21:51:09 +00:00
< div class = "container" >
< div class = "col" >
2024-09-27 22:28:23 +00:00
< p > < img src = "example1a.png" alt = "" / > < / p >
2024-09-28 21:51:09 +00:00
< / div > < div class = "col" >
2024-09-27 22:28:23 +00:00
< pre is = "marp-pre" data-auto-scaling = "downscale-only" > < code class = "language-python" > alt.Chart(random_df).mark_point().encode(
alt.X(< span class = "hljs-string" > " a" < / span > ),
alt.Y(< span class = "hljs-string" > " c" < / span > ),
alt.Color(< span class = "hljs-string" > " b" < / span > ),
alt.Size(< span class = "hljs-string" > " c" < / span > ),
alt.Shape(< span class = "hljs-string" > " a:N" < / span > ),
alt.Fill(< span class = "hljs-string" > " b" < / span > ),
alt.Opacity(< span class = "hljs-string" > " b" < / span > ),
)
< / code > < / pre >
2024-09-28 21:51:09 +00:00
< / div >
< / div >
2024-09-27 22:28:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "8" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "what-do-you-see-1" > What do you see?< / h2 >
2024-09-28 21:51:09 +00:00
< div class = "container" >
< div class = "col" >
2024-09-27 22:28:23 +00:00
< p > < img src = "example1b.png" alt = "" / > < / p >
< pre is = "marp-pre" data-auto-scaling = "downscale-only" > < code > alt.Chart(random_df).mark_line().encode(
x=" a" ,
y=" c" ,
)`
< / code > < / pre >
2024-09-28 21:51:09 +00:00
< / div >
< / div >
2024-09-27 22:28:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "9" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "effectiveness-revisited" > Effectiveness Revisited< / h2 >
< p > < img src = "effectiveness.png" alt = "" style = "width:800px;" / > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "10" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
< div class = "container" >
< div class = "col" >
2024-09-27 22:28:23 +00:00
< p > < strong > Altair Channels< / strong > < / p >
< ul >
< li > Position (< code > X, Y< / code > )< / li >
< li > Angle (< code > Angle< / code > )< / li >
< li > Area (< code > Radius< / code > , < code > Size< / code > )< / li >
< li > Hue, Saturation (< code > Color< / code > )< / li >
< li > Texture (< code > Opacity< / code > , < code > Fill< / code > )< / li >
< li > Shape (mark type, < code > Shape< / code > )< / li >
< / ul >
2024-09-28 21:51:09 +00:00
< / div >
< div class = "col" >
2024-09-27 22:28:23 +00:00
< p > < strong > What about?< / strong > < / p >
< ul >
< li > Length< / li >
< li > Slope< / li >
< li > Volume< / li >
< li > Density< / li >
< li > Connection< / li >
< li > Containment< / li >
< / ul >
2024-09-28 21:51:09 +00:00
< / div >
< / div >
2024-09-27 22:28:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "11" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< p > < strong > Derived Properties< / strong > < / p >
< ul >
< li > Length/Area - size of bars (< code > X< / code > , < code > Y< / code > )< / li >
< li > Slope & Density - affected by scale< / li >
< li > Connection - ex. layering of lines w/ points< / li >
< li > Containment - achieved with layering< / li >
< / ul >
< p > What about < em > volume< / em > ?< / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "12" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "stevens-power-law" > Stevens' Power Law< / h2 >
< p > Stevens (1975): Human response to sensory stimulus is characterized by a power law with different exponents with different stimuli.< / p >
2024-09-28 21:51:09 +00:00
< p > perception = (magnitude of sensation)< sup > a< / sup > < / p >
< p > Smaller < sup > a< / sup > exponent: harder to perceive changes.< / p >
2024-09-27 22:28:23 +00:00
< p > Stevens measured values of a by exposing people to varied stimulus and asking them to compare magnitudes.< / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "13" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
< div class = "container" > < div class = "col" >
2024-09-27 22:28:23 +00:00
< p > < img src = "stevens.png" alt = "" / > < / p >
2024-09-28 21:51:09 +00:00
< / div > < div class = "col" >
2024-09-27 22:28:23 +00:00
< table >
< thead >
< tr >
< th > Continuum< / th >
< th > Exponent< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Color Brightness< / td >
< td > 0.33-0.5< / td >
< / tr >
< tr >
< td > Smell< / td >
< td > 0.6< / td >
< / tr >
< tr >
< td > Loudness< / td >
< td > 0.67< / td >
< / tr >
< tr >
< td > < strong > Depth Perception< / strong > < / td >
< td > 0.67< / td >
< / tr >
< tr >
< td > Area< / td >
< td > 0.7< / td >
< / tr >
< tr >
< td > 2D Planar Position< / td >
< td > 1.0< / td >
< / tr >
< tr >
< td > Warmth< / td >
< td > 1.3-1.6< / td >
< / tr >
< tr >
< td > Color Saturation< / td >
< td > 1.7< / td >
< / tr >
< tr >
< td > Electric Shock< / td >
< td > 3.5< / td >
< / tr >
< / tbody >
< / table >
2024-09-28 21:51:09 +00:00
< / div > < / div >
2024-09-27 22:28:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "14" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "3d-graphs" > 3D Graphs< / h2 >
< p > < img src = "stunning-3d-chart.jpg" alt = "" / > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "15" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< p > < img src = "datavizproject.png" alt = "" / > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "16" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< p > < img src = "3d-scatter.png" alt = "" / > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "left" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("scatter-matrix.png");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" x = "50%" > < section id = "17" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "left" >
2024-09-27 22:28:23 +00:00
< h2 id = "instead-of-3d-graphs" > Instead of 3D Graphs< / h2 >
< ul >
2024-09-28 21:17:56 +00:00
< li > Find other channels: hue & size are good candidates. (bubble chart)< / li >
< li > Or make multiple 2D graphs with XY/YZ/XZ pairs.< / li >
2024-09-27 22:28:23 +00:00
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "left" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "18" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 23:18:23 +00:00
< h2 id = "what-is-color" > What is Color?< / h2 >
< p > Wavelengths of light are perceived as particular colors:< br / >
< img src = "linear_visible_spectrum.svg.png" alt = "" / > < / p >
< p > In practice: we almost never see monochromatic color, light sources emit a spectrum & we perceive peaks.< / p >
2024-09-27 22:28:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("cone-fundamentals.png");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "19" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-27 23:18:23 +00:00
< h2 id = "color--the-eye" > Color & the Eye< / h2 >
< h3 id = "rods" > Rods< / h3 >
< ul >
< li > " brightness" < / li >
< li > spread throughout retina< / li >
< li > more sensitive in low light conditions< / li >
< / ul >
< h3 id = "cones" > Cones< / h3 >
< ul >
< li > 3 types with peak sensitivity at different frequencies< / li >
< li > concentrated in center of eye< / li >
< li > less sensitive in low light conditions< / li >
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "20" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "spectrum-vs-what-we-see" > Spectrum vs. What We See< / h2 >
< p > What we actually see is always a blend of multiple peaks.< / p >
< p > This is impacted by ambient light conditions, as well as quirks of our visual processing.< / p >
< p > < img src = "the-dress.jpg" alt = "" style = "height:400px;" / > < / p >
< p > In actuality, multiple combinations of light can give same color (< strong > metamers< / strong > ).< / p >
2024-09-27 23:18:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "21" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "chromatic-adaptation" > Chromatic Adaptation< / h2 >
< p > < img src = "demo-bw-illusion-andrew-steele.gif" alt = "" / > < / p >
< p > Source: Andrew Steele < a href = "https://www.youtube.com/channel/UC-XYsDNh4-886rMNLnnwR_w" > https://www.youtube.com/channel/UC-XYsDNh4-886rMNLnnwR_w< / a > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("xkcd-color-map.png");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "22" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-27 23:18:23 +00:00
< h2 id = "color-naming" > Color Naming< / h2 >
2024-09-28 21:17:56 +00:00
< p > Color naming is highly subjective, and research has shown that the ability to name a color correlates highly with the ability to distinguish it.< / p >
< p > Be particularly careful with blue/green boundaries, as there are significant cultural differences.< / p >
< p > Source: < a href = "https://blog.xkcd.com/2010/05/03/color-survey-results/" > https://blog.xkcd.com/2010/05/03/color-survey-results/< / a > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("hok-uk.svg");background-size:600px auto;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "23" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-28 21:17:56 +00:00
< h2 id = "cultural-considerations" > Cultural Considerations< / h2 >
< ul >
2024-09-28 21:51:09 +00:00
< li > American audiences associated < span color = "red" > red< / span > & < span color = "blue" > blue< / span > with political parties on any map in a political context.< / li >
< li > Also international meaning of < span color = "red" > red< / span > & < span color = "blue" > blue< / span > is flipped: red is left, blue is right.< / li >
2024-09-28 21:17:56 +00:00
< li > 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).< / li >
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("cmyk.svg");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "24" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-28 21:17:56 +00:00
< h2 id = "color-on-a-page" > Color on a Page< / h2 >
< p > 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.< / p >
< p > We call this CMYK color.< / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("additive.png");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "25" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-28 21:17:56 +00:00
< h2 id = "color-on-a-screen" > Color on a Screen< / h2 >
< p > Screens emit light, which means we use < strong > additive blending< / strong > of red, green, and blue light. Every pixel of a screen can emit these three colors in different intensities.< / p >
< p > A common way to refer to colors is by their intensity in each of these three channels.< / p >
2024-09-28 21:51:09 +00:00
< p > < span style = "color: rgb(0% 100% 0%)" > this is 0% red, 100% green, 0% blue intensity< / span > < br / >
< span style = "color: rgb(20% 60% 20%)" > this is 20% red, 60% green, 20% blue intensity< / span > < br / >
< span style = "color: #ff00ff" > this is 100% red, 0% green, 100% blue intensity< / span > < / p >
2024-09-28 21:17:56 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "26" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h3 id = "rgb-space-as-a-cube" > RGB space as a cube< / h3 >
< p > < img src = "LinearRGBCube.png" alt = "cube" / > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "27" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h3 id = "rgb-as-pair-plots" > RGB as pair plots< / h3 >
< p > < img src = "RGBPairPlots.png" alt = "pair plots" / > < / p >
< p > Remember this trick for your own 3-dimensional data!< / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "28" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< p > < img src = "TriangleSliceRGB.png" alt = "" style = "height:500px;" / > < / p >
< p > A slice through the middle of the cube gives colors of comparable brightness. (You may have seen such a triangle in color pickers.)< / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "29" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "hsl" > HSL< / h2 >
< p > < img src = "HSL.png" alt = "" style = "height:500px;" / > < / p >
< p > An alternative color space that's very useful for visualization is HSL color space.< / p >
< p > Hue, Saturation, Luminosity< / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "left" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("rgb-pixels.jpg");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" x = "50%" > < section id = "30" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "left" >
2024-09-28 21:17:56 +00:00
< h2 id = "aside-what-about-alpha" > Aside: What about " alpha" ?< / h2 >
< p > You will often see a fourth channel: RGB< strong > A< / strong > , HSL< strong > A< / strong > .< / p >
< p > This is known as alpha transparency (translucency).< / p >
< p > This has to do with how the program in question < em > blends< / em > the colors. The final pixel values on the screen will still be converted to RGB components.< / p >
< ul >
< li > Use sparingly.< / li >
< li > Variations are very subtle, and background dependent.< / li >
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "left" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("cie-xyz.png");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "31" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-28 21:17:56 +00:00
< h2 id = "cie-xyz" > CIE XYZ< / h2 >
< p > Derived in 1931(!) based on human perception.< / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("gamut2.png");" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "32" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;--marpit-advanced-background-split:50%;" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" >
2024-09-28 21:17:56 +00:00
< h2 id = "screen-gamut" > Screen Gamut< / h2 >
< p > 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.< / p >
< p > Projectors (like the one you're likely viewing this on) usually have skewed gamut.< / p >
< p > Moral of the story: < strong > Consider your medium!< / strong > < / p >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "33" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "other-variations" > Other Variations< / h2 >
< p > TODO: colorblindness, etc.< / p >
2024-09-27 23:18:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "34" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "what-does-all-this-mean-for-visualization" > What does all this mean for visualization?< / h2 >
< p > Color choices should be made with respect to:< / p >
2024-09-27 23:18:23 +00:00
< ul >
2024-09-28 21:17:56 +00:00
< li > medium (screen vs. print, type of screen)< / li >
< li > audience (culture, vision differences, expectations)< / li >
< li > differentiability< / li >
2024-09-27 23:18:23 +00:00
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "35" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "role-of-color" > Role of Color< / h2 >
< ul >
< li > < strong > Identify< / strong > - Different color per category/actor.
< ul >
< li > opt for distinct hues< / li >
< / ul >
< / li >
< li > < strong > Group< / strong > - Group like entities using same/like colors.
< ul >
< li > often with similar hues< / li >
< / ul >
< / li >
< li > < strong > Layer< / strong > - Overlay different information while keeping contrast.
< ul >
< li > saturation differences very important to not overwhelm eye< / li >
< / ul >
< / li >
< li > < strong > Highlight< / strong > - Call out important/relevant information.
< ul >
< li > brightness and hue differences important< / li >
< / ul >
< / li >
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "36" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 23:18:23 +00:00
< h2 id = "color-channels--data-types" > Color Channels & Data Types< / h2 >
< p > TODO: < a href = "https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27" > https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27< / a > < br / >
TODO: (also 33 and 34)< / p >
< h3 id = "types-of-palettes" > Types of Palettes< / h3 >
< ul >
< li > qualitative< / li >
< li > sequential< / li >
< li > diverging< / li >
< / ul >
< h3 id = "hue-separation" > Hue Separation< / h3 >
< ul >
< li > distinct< / li >
< li > grouped< / li >
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "37" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 23:18:23 +00:00
< h2 id = "legibility" > Legibility< / h2 >
2024-09-28 21:17:56 +00:00
< p > An important issue when using colored text and/or backgrounds is < strong > legibility< / strong > .< / p >
< p > TODO: font legibility image< / p >
2024-09-27 23:18:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "38" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "get-it-right-in-black--white" > " Get it right in black & white" < / h2 >
< p > A common mantra among visual designers.< / p >
< p > Ensure that you aren't using hue alone for your image.< / p >
< p > TODO: image< / p >
2024-09-27 23:18:23 +00:00
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "39" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-28 21:17:56 +00:00
< h2 id = "tools" > Tools< / h2 >
2024-09-27 23:18:23 +00:00
< ul >
2024-09-28 21:17:56 +00:00
< li > Vega Schemes: < a href = "https://vega.github.io/vega/docs/schemes/" > https://vega.github.io/vega/docs/schemes/< / a > < / li >
< li > Contrast/theme exploration: < a href = "https://schubert-da.github.io/dataviz-palette-tool/" > https://schubert-da.github.io/dataviz-palette-tool/< / a > < / li >
< li > Theme exploration for cartography: < a href = "https://colorbrewer2.org/" > https://colorbrewer2.org/< / a > < / li >
< li > Color-theory based theme creator: < a href = "https://meodai.github.io/poline/" > https://meodai.github.io/poline/< / a > < / li >
< li > Theme creator w/ theme sharing: < a href = "https://coolors.co" > https://coolors.co< / a > < / li >
< / ul >
< h3 id = "color-blindness" > Color-Blindness< / h3 >
< ul >
< li > MacOS/iOS app: < a href = "https://michelf.ca/projects/sim-daltonism/" > https://michelf.ca/projects/sim-daltonism/< / a > < / li >
< li > Browser extensions (search " colorblindness" in your browser of choice)< / li >
2024-09-27 23:18:23 +00:00
< / ul >
< / section >
2024-09-28 21:51:09 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "40" data-theme = "32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk" lang = "en-US" style = "--theme:32coy81frr1xr6ju4zce7hednbinmam8mxn6p61zjhk;" >
2024-09-27 22:28:23 +00:00
< h2 id = "acknowledgements--references" > Acknowledgements & References< / h2 >
< p > Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.< / p >
2024-09-28 21:17:56 +00:00
< p > Color space images are from < a href = "https://jamie-wong.com/post/color/" > https://jamie-wong.com/post/color/< / a > , which is an incredible resource if you'd like to go deeper into both the biology and math of color.< / p >
2024-09-27 22:28:23 +00:00
< ul >
< li > < a href = "https://www.math.csi.cuny.edu/~mvj/GC-DataViz-S23/lectures/L6.html" > https://www.math.csi.cuny.edu/~mvj/GC-DataViz-S23/lectures/L6.html< / a > < / li >
< li > < a href = "https://en.wikipedia.org/wiki/Stevens%27s_power_law" > https://en.wikipedia.org/wiki/Stevens's_power_law< / a > < / li >
2024-09-27 23:18:23 +00:00
< li > < a href = "https://colorusage.arc.nasa.gov" > https://colorusage.arc.nasa.gov< / a > < / li >
2024-09-27 22:28:23 +00:00
< / ul >
< / section >
< script > ! f u n c t i o n ( ) { " u s e s t r i c t " ; c o n s t t = { h 1 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 1 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 2 e m ; m a r g i n - b l o c k - s t a r t : 0 . 6 7 e m ; m a r g i n - b l o c k - e n d : 0 . 6 7 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 2 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 2 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 1 . 5 e m ; m a r g i n - b l o c k - s t a r t : 0 . 8 3 e m ; m a r g i n - b l o c k - e n d : 0 . 8 3 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 3 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 3 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 1 . 1 7 e m ; m a r g i n - b l o c k - s t a r t : 1 e m ; m a r g i n - b l o c k - e n d : 1 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 4 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 4 " } , s t y l e : " d i s p l a y : b l o c k ; m a r g i n - b l o c k - s t a r t : 1 . 3 3 e m ; m a r g i n - b l o c k - e n d : 1 . 3 3 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 5 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 5 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 0 . 8 3 e m ; m a r g i n - b l o c k - s t a r t : 1 . 6 7 e m ; m a r g i n - b l o c k - e n d : 1 . 6 7 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , h 6 : { p r o t o : ( ) = > H T M L H e a d i n g E l e m e n t , a t t r s : { r o l e : " h e a d i n g " , " a r i a - l e v e l " : " 6 " } , s t y l e : " d i s p l a y : b l o c k ; f o n t - s i z e : 0 . 6 7 e m ; m a r g i n - b l o c k - s t a r t : 2 . 3 3 e m ; m a r g i n - b l o c k - e n d : 2 . 3 3 e m ; m a r g i n - i n l i n e - s t a r t : 0 p x ; m a r g i n - i n l i n e - e n d : 0 p x ; f o n t - w e i g h t : b o l d ; " } , s p a n : { p r o t o : ( ) = > H T M L S p a n E l e m e n t } , p r e : { p r o t o : ( ) = > H T M L E l e m e n t , s t y l e : " d i s p l a y : b l o c k ; f o n t - f a m i l y : m o n o s p a c e ; w h i t e - s p a c e : p r e ; m a r g i n : 1 e m 0 ; - - m a r p - a u t o - s c a l i n g - w h i t e - s p a c e : p r e ; " } } , e = " d a t a - m a r p - a u t o - s c a l i n g - w r a p p e r " , i = " d a t a - m a r p - a u t o - s c a l i n g - s v g " , n = " d a t a - m a r p - a u t o - s c a l i n g - c o n t a i n e r " ; c l a s s s e x t e n d s H T M L E l e m e n t { c o n s t r u c t o r ( ) { s u p e r ( ) , t h i s . s v g P r e s e r v e A s p e c t R a t i o = " x M i n Y M i d m e e t " ; c o n s t t = t = > ( [ e ] ) = > { c o n s t { w i d t h : i , h e i g h t : n } = e . c o n t e n t R e c t ; t h i s [ t ] = { w i d t h : i , h e i g h t : n } , t h i s . u p d a t e S V G R e c t ( ) } ; t h i s . a t t a c h S h a d o w ( { m o d e : " o p e n " } ) , t h i s . c o n t a i n e r O b s e r v e r = n e w R e s i z e O b s e r v e r ( t ( " c o n t a i n e r S i z e " ) ) , t h i s . w r a p p e r O b s e r v e r = n e w R e s i z e O b s e r v e r ( ( ( . . . e ) = > { t ( " w r a p p e r S i z e " ) ( . . . e ) , t h i s . f l u s h S v g D i s p l a y ( ) } ) ) } s t a t i c g e t o b s e r v e d A t t r i b u t e s ( ) { r e t u r n [ " d a t a - d o w n s c a l e - o n l y " ] } c o n n e c t e d C a l l b a c k ( ) { v a r t , s , o , r , a ; t h i s . s h a d o w R o o t . i n n e r H T M L = ` \ n < s t y l e > \ n s v g [ $ { i } ] { d i s p l a y : b l o c k ; w i d t h : 1 0 0 % ; h e i g h t : a u t o ; v e r t i c a l - a l i g n : t o p ; } \ n s p a n [ $ { n } ] { d i s p l a y : t a b l e ; w h i t e - s p a c e : v a r ( - - m a r p - a u t o - s c a l i n g - w h i t e - s p a c e , n o w r a p ) ; w i d t h : m a x - c o n t e n t ; } \ n < / s t y l e > \ n < d i v $ { e } > \ n < s v g p a r t = " s v g " $ { i } > \ n < f o r e i g n O b j e c t > < s p a n $ { n } > < s l o t > < / s l o t > < / s p a n > < / f o r e i g n O b j e c t > \ n < / s v g > \ n < / d i v > \ n ` . s p l i t ( / \ n \ s * / ) . j o i n ( " " ) , t h i s . w r a p p e r = n u l l ! = = ( t = t h i s . s h a d o w R o o t . q u e r y S e l e c t o r ( ` d i v [ $ { e } ] ` ) ) & & v o i d 0 ! = = t ? t : v o i d 0 ; c o n s t l = t h i s . s v g ; t h i s . s v g = n u l l ! = = ( o = n u l l = = = ( s = t h i s . w r a p p e r ) | | v o i d 0 = = = s ? v o i d 0 : s . q u e r y S e l e c t o r ( ` s v g [ $ { i } ] ` ) ) & & v o i d 0 ! = = o ? o : v o i d 0 , t h i s . s v g ! = = l & & ( t h i s . s v g C o m p u t e d S t y l e = t h i s . s v g ? w i n d o w . g e t C o m p u t e d S t y l e ( t h i s . s v g ) : v o i d 0 ) , t h i s . c o n t a i n e r = n u l l ! = = ( a = n u l l = = = ( r = t h i s . s v g ) | | v o i d 0 = = = r ? v o i d 0 : r . q u e r y S e l e c t o r ( ` s p a n [ $ { n } ] ` ) ) & & v o i d 0 ! = = a ? a : v o i d 0 , t h i s . o b s e r v e ( ) } d i s c o n n e c t e d C a l l b a c k ( ) { t h i s . s v g = v o i d 0 , t h i s . s v g C o m p u t e d S t y l e = v o i d 0 , t h i s . w r a p p e r = v o i d 0 , t h i s . c o n t a i n e r = v o i d 0 , t h i s . o b s e r v e ( ) } a t t r i b u t e C h a n g e d C a l l b a c k ( ) { t h i s . o b s e r v e ( ) } f l u s h S v g D i s p l a y ( ) { c o n s t { s v g : t } = t h i s ; t & & ( t . s t y l e . d i s p l a y = " i n l i n e " , r e q u e s t A n i m a t i o n F r a m e ( ( ( ) = > { t . s t y l e . d i s p l a y = " " } ) ) ) } o b s e r v e ( ) { t h i s . c o n t a i n e r O b s e r v e r . d i s c o n n e c t ( ) , t h i s . w r a p p e r O b s e r v e r . d i s c o n n e c t ( ) , t h i s . w r a p p e r & & t h i s . w r a p p e r O b s e r v e r . o b s e r v e ( t h i s . w r a p p e r ) , t h i s . c o n t a i n e r & & t h i s . c o n t a i n e r O b s e r v e r . o b s e r v e ( t h i s . c o n t a i n e r ) , t h i s . s v g C o m p u t e d S t y l e & & t h i s . o b s e r v e S V G S t y l e ( t h i s . s v g C o m p u t e d S t y l e ) } o b s e r v e S V G S t y l e ( t ) { c o n s t e = ( ) = > { c o n s t i = ( ( ) = > { c o n s t e = t . g e t P r o p e r t y V a l u e ( " - - p r e s e r v e - a s p e c t - r a t i o " ) ; i f ( e ) r e t u r n e . t r i m ( ) ; r e t u r n ` x $ { ( ( { t e x t A l i g n : t , d i r e c t i o n : e } ) = > { i f ( t . e n d s W i t h ( " l e f t " ) ) r e t u r n " M i n " ; i f ( t . e n d s W i t h ( " r i g h t " ) ) r e t u r n " M a x " ; i f ( " s t a r t " = = = t | | " e n d " = = = t ) { l e t i = " r t l " = = = e ; r e t u r n " e n d " = = = t & & ( i = ! i ) , i ? " M a x " : " M i n " } r e t u r n " M i d " } ) ( t ) } Y M i d m e e t ` } ) ( ) ; i ! = = t h i s . s v g P r e s e r v e A s p e c t R a t i o & & ( t h i s . s v g P r e s e r v e A s p e c t R a t i o = i , t h i s . u p d a t e S V G R e c t ( ) ) , t = = = t h i s . s v g C o m p u t e d S t y l e & & r e q u e s t A n i m a t i o n F r a m e ( e ) } ; e ( )
2024-09-28 21:17:56 +00:00
< / script > < / foreignObject > < / svg > < / div > < div class = "bespoke-marp-note" data-index = "17" tabindex = "0" > < p > credit: https://en.wikipedia.org/wiki/File:Linear_visible_spectrum.svg< / p > < / div > < div class = "bespoke-marp-note" data-index = "18" tabindex = "0" > < p > source https://commons.wikimedia.org/wiki/File:Cone-fundamentals-with-srgb-spectrum.svg< / p > < / div > < div class = "bespoke-marp-note" data-index = "22" tabindex = "0" > < p > Source: https://www.color-meanings.com/color-symbolism-different-cultures/< / p > < p > image from wikipedia: UK House of Commons< / p > < / div > < div class = "bespoke-marp-note" data-index = "29" tabindex = "0" > < p > image source: https://upload.wikimedia.org/wikipedia/commons/3/34/RGB_pixels.jpg< / p > < / div > < script > / * ! ! L i c e n s e : h t t p s : / / u n p k g . c o m / @ m a r p - t e a m / m a r p - c l i @ 3 . 4 . 0 / l i b / b e s p o k e . j s . L I C E N S E . t x t * /
2024-09-28 21:51:09 +00:00
!function(){"use strict";function e(e){return e& & e.__esModule& & Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t={from:function(e,t){var n,r=1===(e.parent||e).nodeType?e.parent||e:document.querySelector(e.parent||e),o=[].filter.call("string"==typeof e.slides?r.querySelectorAll(e.slides):e.slides||r.children,(function(e){return"SCRIPT"!==e.nodeName})),i={},a=function(e,t){return(t=t||{}).index=o.indexOf(e),t.slide=e,t},s=function(e,t){i[e]=(i[e]||[]).filter((function(e){return e!==t}))},l=function(e,t){return(i[e]||[]).reduce((function(e,n){return e& & !1!==n(t)}),!0)},c=function(e,t){o[e]& & (n& & l("deactivate",a(n,t)),n=o[e],l("activate",a(n,t)))},d=function(e,t){var r=o.indexOf(n)+e;l(e>0?"next":"prev",a(n,t))& & c(r,t)},u={off:s,on:function(e,t){return(i[e]||(i[e]=[])).push(t),s.bind(null,e,t)},fire:l,slide:function(e,t){if(!arguments.length)return o.indexOf(n);l("slide",a(o[e],t))&&c(e,t)},next:d.bind(null,1),prev:d.bind(null,-1),parent:r,slides:o,destroy:function(e){l("destroy",a(n,e)),i={}}}; return(t||[]).forEach((function(e){e(u)})),n||c(0),u}},n=e(t);const r=document.body,o=(...e)=>history.replaceState(...e),i="presenter",a="next",s=["",i,a],l="bespoke-marp-",c=`data-${l}`,d=(e,{protocol:t,host:n,pathname:r,hash:o}=location)=>{const i=e.toString();return`${t}//${n}${r}${i?"?":""}${i}${o}`},u=()=>r.dataset.bespokeView,f=e=>new URLSearchParams(location.search).get(e),m=(e,t={})=>{var n;const r={location,setter:o,...t},i=new URLSearchParams(r.location.search);for(const t of Object.keys(e)){const n=e[t];"string"==typeof n?i.set(t,n):i.delete(t)}try{r.setter({...null!==(n=window.history.state)& & void 0!==n?n:{}},"",d(i,r.location))}catch(e){console.error(e)}},g=(()=>{const e="bespoke-marp";try{return localStorage.setItem(e,e),localStorage.removeItem(e),!0}catch(e){return!1}})(),p=e=>{try{return localStorage.getItem(e)}catch(e){return null}},v=(e,t)=>{try{return localStorage.setItem(e,t),!0}catch(e){return!1}},h=e=>{try{return localStorage.removeItem(e),!0}catch(e){return!1}},y=(e,t)=>{const n="aria-hidden";t?e.setAttribute(n,"true"):e.removeAttribute(n)},b=e=>{e.parent.classList.add(`${l}parent`),e.slides.forEach((e=>e.classList.add(`${l}slide`))),e.on("activate",(t=>{const n=`${l}active`,r=t.slide,o=r.classList,i=!o.contains(n);if(e.slides.forEach((e=>{e.classList.remove(n),y(e,!0)})),o.add(n),y(r,!1),i){const e=`${n}-ready`;o.add(e),document.body.clientHeight,o.remove(e)}}))},w=e=>{let t=0,n=0;Object.defineProperty(e,"fragments",{enumerable:!0,value:e.slides.map((e=>[null,...e.querySelectorAll("[data-marpit-fragment]")]))});const r=r=>void 0!==e.fragments[t][n+r],o=(r,o)=>{t=r,n=o,e.fragments.forEach(((e,t)=>{e.forEach(((e,n)=>{if(null==e)return;const i=t< r | | t = ==r&&n<=o;e.setAttribute(`${c}fragment`,(i?"":"in")+"active");const a = `${c}current-fragment`;t===r&&n===o?e.setAttribute(a,"current"):e.removeAttribute(a)}))})),e.fragmentIndex=o;const i = {slide:e.slides[r],index:r,fragments:e.fragments[r],fragmentIndex:o};e.fire("fragment",i)};e.on("next",(({fragment:i=!0})= > {if(i){if(r(1))return o(t,n+1),!1;const i=t+1;e.fragments[i]& & o(i,0)}else{const r=e.fragments[t].length;if(n+1< r ) return o ( t , r-1 ) , ! 1 ; const i = e.fragments[t+1];i&&o(t+1,i.length-1)}})),e.on("prev",(({fragment:i=!0})= > {if(r(-1)& & i)return o(t,n-1),!1;const a=t-1;e.fragments[a]& & o(a,e.fragments[a].length-1)})),e.on("slide",(({index:t,fragment:n})=>{let r=0;if(void 0!==n){const o=e.fragments[t];if(o){const{length:e}=o;r=-1===n?e-1:Math.min(Math.max(n,0),e-1)}}o(t,r)})),o(0,0)},x=document,k=()=>!(!x.fullscreenEnabled& & !x.webkitFullscreenEnabled),$=()=>!(!x.fullscreenElement& & !x.webkitFullscreenElement),E=e=>{e.fullscreen=()=>{k()& & (async()=>{return $()?null===(e=x.exitFullscreen||x.webkitExitFullscreen)||void 0===e?void 0:e.call(x):((e=x.body)=>{var t;return null===(t=e.requestFullscreen||e.webkitRequestFullscreen)||void 0===t?void 0:t.call(e)})();var e})()},document.addEventListener("keydown",(t=>{"f"!==t.key& & "F11"!==t.key||t.altKey||t.ctrlKey||t.metaKey||!k()||(e.fullscreen(),t.preventDefault())}))},L=`${l}inactive`,S=(e=2e3)=>({parent:t,fire:n})=>{c
