2024-10-22 17:54:34 +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
2024-10-20 03:35:34 +00:00
/*!
* 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
2024-10-22 17:54:34 +00:00
/* 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
2024-10-20 03:35:34 +00:00
< h1 id = "narratives" > Narratives< / h1 >
< h2 id = "capp-30239" > CAPP 30239< / h2 >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "2" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "today" > Today< / h2 >
< ul >
< li > What types of data visualization narratives exist?< / li >
< li > Practical advice on creating publications & pages.< / li >
< li > Narrative Examples< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "3" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "crafting-a-narrative" > Crafting a Narrative< / h2 >
< p > < strong > Narrative< / strong > = < strong > Visualization< / strong > + < strong > Context< / strong > < / p >
< h3 id = "benefits" > Benefits< / h3 >
< ul >
< li > More engaged audience.
< ul >
< li > Greussing & Boomgaarden, Digital Journalism 2019.< / li >
< / ul >
< / li >
< li > Better learning outcomes.
< ul >
< li > Mayer, Multimedia Principles, 2005.< / li >
< / ul >
< / li >
< li > Promote active reading.
< ul >
< li > Victor, Explorable Explanations, 2011.< / li >
< / ul >
< / li >
< li > Persuasiveness of data.
< ul >
< li > Murray, Data Visualization And The Power Of Persuasion, 2019.< / li >
< / ul >
< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "4" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "storytelling" > Storytelling< / h2 >
< p > Instead of a loosely connected series of images, take reader on a journey with a beginning, middle, and end.< / p >
< ul >
< li > Beginning: Required Context, Pose Questions< / li >
< li > Middle: Exposition & Exploration< / li >
< li > End: Conclusion and/or Further Questions< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "5" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "risks" > Risks< / h2 >
< p > < strong > Oversimplification.< / strong > Constraints of format can lead to the need to simplify, finding the right balance requires skill, practice, and knowledge of audience.< / p >
< p > < strong > Bias.< / strong > All narratives require interpretation, which can be a source of bias. We should not compromise on < strong > graphical integrity< / strong > to make our point, or suggest conclusions that are not supported by the data.< / p >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "6" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h2 id = "medium-is-the-message" > Medium is the Message< / h2 >
< p > " [...]medium is the message. This is merely to say that the< br / >
personal and social consequences of any medium— that is, of any extension of ourselves— result from the new scale that is introduced into our affairs by each extension of ourselves, or by any new technology." < / p >
< p > < em > Marshall McLuhan, Understanding Media: The Extensions of Man, 1964.< / em > < / p >
< p > The nature of a narrative is shaped by (dominated by) the medium chosen.< / p >
< ul >
< li > Standard " Print" Article< / li >
< li > Infographic< / li >
< li > Live Presentation< / li >
< li > Video / Animation< / li >
< li > Museum / In Person Interaction< / li >
< li > Web Interactives< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section lang = "en-US" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" style = "--marpit-advanced-background-split:50%;" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("pyramid.svg");background-size:contain;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "7" lang = "en-US" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" style = "--marpit-advanced-background-split:50%;" >
2024-10-20 03:35:34 +00:00
< h2 id = "news-article-format" > News Article Format< / h2 >
< p > < strong > Lede/Lead< / strong > - Opening paragraph. Summarize key ideas & grab attention.< br / >
< strong > " Nut Graf" < / strong > - Nutshell paragraph. Immediately follows lead. Gives overview of why topic is important, and introduce key ideas to be explored in article.< / p >
< p > " < strong > Inverted Pyramid< / strong > " < / p >
2024-10-20 17:57:10 +00:00
< p > Example: < a href = "https://chicagomissingpersons.com/who-goes-missing/" > Chicago Missing Persons< / a > Pulitzer-winning long form piece that CAPP Alum Aïcha Camara contributed to.< / p >
2024-10-20 03:35:34 +00:00
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section lang = "en-US" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" style = "" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "8" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h2 id = "print-article" > " Print" Article< / h2 >
< p > Even if initially viewed on a screen, use static design so can be copied/printed/shared easily.< / p >
< p > No vital information in tooltips, animation, etc.< / p >
< ul >
< li > Text-forward, with supporting visuals. < em > -or-< / em > < / li >
< li > Visual-centric, with explanatory text.< / li >
< / ul >
2024-10-20 03:35:34 +00:00
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "9" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "infographic" > Infographic< / h2 >
2024-10-20 17:57:10 +00:00
< p > Can be built around a single chart, or combine many into a story.< br / >
Typically a single-page image with an arrangement of graphics, tables, and brief narrative.< / p >
2024-10-20 03:35:34 +00:00
< p > Typically aimed at general audiences, easy to share online, can be designed to work well in print.< / p >
2024-10-20 17:57:10 +00:00
< p > Important to think about visual flow, keep information organized.< / p >
< p > Examples:< / p >
< ul >
< li > < a href = "https://www.wri.org/data/infographic-global-carbon-budget" > https://www.wri.org/data/infographic-global-carbon-budget< / a > < / li >
2024-10-22 17:54:34 +00:00
< li > < a href = "https://www.chartography.net/p/seeing-centuries-part-2" > https://www.chartography.net/p/seeing-centuries-part-2< / a > < / li >
2024-10-20 17:57:10 +00:00
< / ul >
2024-10-20 03:35:34 +00:00
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section lang = "en-US" data-marpit-advanced-background = "background" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("baseball1.png");background-size:contain;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "1280" height = "720" > < section id = "10" lang = "en-US" data-marpit-advanced-background = "content" > < / section >
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section lang = "en-US" data-marpit-advanced-background = "pseudo" style = "" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section lang = "en-US" data-marpit-advanced-background = "background" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("baseball2.png");background-size:contain;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "1280" height = "720" > < section id = "11" lang = "en-US" data-marpit-advanced-background = "content" > < / section >
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section lang = "en-US" data-marpit-advanced-background = "pseudo" style = "" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section lang = "en-US" data-marpit-advanced-background = "background" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("aftermarket-education-infographic.png");background-size:contain;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "1280" height = "720" > < section id = "12" lang = "en-US" data-marpit-advanced-background = "content" > < / section >
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section lang = "en-US" data-marpit-advanced-background = "pseudo" style = "" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "13" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< font size = "140%" >
2024-10-20 03:35:34 +00:00
< h2 id = "live-presentation" > Live Presentation< / h2 >
2024-10-20 17:57:10 +00:00
< p > Few words, large fonts.< / p >
< p > Legibility from distance.< / p >
< p > Nature of audience/projector/room.< / p >
< p > < strong > Print handouts if visualizations have lots of detail.< / strong > < br / >
< / font > < / p >
2024-10-20 03:35:34 +00:00
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "14" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "animations--videos" > Animations & Videos< / h2 >
< p > Animation can be used to show change, uncertainty, or relationships.< / p >
< p > Video can blend presentation with commentary and narrative.< / p >
< h3 id = "examples" > Examples< / h3 >
< ul >
2024-10-20 17:57:10 +00:00
< li > < a href = "https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen?subtitle=en" > The best stats you've ever seen - Hans Rosling< / a > < / li >
< li > < a href = "https://vimeo.com/555245282" > Planetary Visualization< / a > (thanks Sam!)< / li >
< li > < a href = "https://www.nytimes.com/interactive/2015/11/24/upshot/thanksgiving-flight-patterns.html" > NYT Thanksgiving Flight Animations< / a > (thanks Krisha!)< / li >
2024-10-20 03:35:34 +00:00
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "15" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h2 id = "museum-interactives" > Museum Interactives< / h2 >
< p > < a href = "https://www.blueparadox.com/en/the-exhibit" > Blue Paradox @ MSI< / a > - Thanks Magdalena!< / p >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "16" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "interactive-stories" > Interactive Stories< / h2 >
2024-10-20 17:57:10 +00:00
< p > Can take advantage of web as a medium. Seamlessly blend text, images, audio and video, and interactive elements.< / p >
< h3 id = "potential-benefits" > Potential Benefits< / h3 >
2024-10-20 03:35:34 +00:00
< ul >
2024-10-20 17:57:10 +00:00
< li > Reducing Cognitive Load< / li >
< li > Personalization for Reader< / li >
< li > Making Information Playful< / li >
< li > Prompting Self-Reflection< / li >
2024-10-20 03:35:34 +00:00
< / ul >
2024-10-20 17:57:10 +00:00
< p > < strong > Caveat:< / strong > Can overwhelm with options, lose sight of what's important.< / p >
2024-10-20 03:35:34 +00:00
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "17" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h3 id = "reducing-cognitive-load" > Reducing Cognitive Load< / h3 >
< p > Make data pleasant, avoid rigidity of visualization designed for print.< / p >
< p > Animations, tooltips, drop-downs, sliders, zoom & pan, highlights.< br / >
Used artfully, these can provide ways for complex data to be presented in a more digestible way.< / p >
< p > In practical terms, Altair will allow a lot of this, handling the JS for you via Vega-Lite.< / p >
< p > Examples:< / p >
< ul >
< li > < a href = "https://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/" > https://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/< / a > (thanks David!)< / li >
< li > < a href = "https://ourworldindata.org/grapher/covid-people-vaccinated-marimekko?time=2023-04-16" > https://ourworldindata.org/grapher/covid-people-vaccinated-marimekko?time=2023-04-16< / a > < / li >
< li > < a href = "https://www.nytimes.com/interactive/2018/03/27/upshot/make-your-own-mobility-animation.html" > https://www.nytimes.com/interactive/2018/03/27/upshot/make-your-own-mobility-animation.html< / a > < / li >
< li > < a href = "https://especiales.eldiario.es/spain-lives-in-flats/" > https://especiales.eldiario.es/spain-lives-in-flats/< / a > (thanks Michael!)< / li >
< / ul >
2024-10-20 03:35:34 +00:00
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "18" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h3 id = "personalization-for-reader" > Personalization For Reader< / h3 >
< p > Engage reader better by showing them the data most relevant to them first.< / p >
< p > Excellent way to drill down in large data sets to make it meaningful to reader.< / p >
< p > Examples:< / p >
< ul >
< li > < a href = "https://www.nature.org/en-us/get-involved/how-to-help/carbon-footprint-calculator/carbon-by-birth-year/" > https://www.nature.org/en-us/get-involved/how-to-help/carbon-footprint-calculator/carbon-by-birth-year/< / a > < / li >
< li > < a href = "https://www.nytimes.com/interactive/2018/08/30/climate/how-much-hotter-is-your-hometown.html" > https://www.nytimes.com/interactive/2018/08/30/climate/how-much-hotter-is-your-hometown.html< / a > < / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "19" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h3 id = "making-information-playful" > Making Information Playful< / h3 >
< p > Give people tools to explore or run simulations on their own in the browser.< br / >
Encourages exploration & engagement.< / p >
< p > Examples:< / p >
< ul >
< li > < a href = "https://publicdomain.nypl.org/pd-visualization/" > https://publicdomain.nypl.org/pd-visualization/< / a > < / li >
< li > < a href = "https://www.nytimes.com/interactive/2024/upshot/buy-rent-calculator.html" > https://www.nytimes.com/interactive/2024/upshot/buy-rent-calculator.html< / a > < / li >
< li > < a href = "https://www.economist.com/big-mac-index" > https://www.economist.com/big-mac-index< / a > (thanks Paul!)< / li >
< li > < a href = "https://pudding.cool/2017/05/song-repetition/" > https://pudding.cool/2017/05/song-repetition/< / a > (thanks Daniel!)< / li >
2024-10-22 17:54:34 +00:00
< li > < a href = "https://bost.ocks.org/mike/algorithms/" > https://bost.ocks.org/mike/algorithms/< / a > < / li >
2024-10-20 17:57:10 +00:00
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "20" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h3 id = "prompting-self-reflection" > Prompting Self-Reflection< / h3 >
< p > Encourage people to reflect upon expectations & experiences relevant to framing of story.< / p >
< p > NYT " You Draw It" Series:< / p >
< ul >
< li > < a href = "https://www.nytimes.com/interactive/2017/04/14/upshot/drug-overdose-epidemic-you-draw-it.html" > https://www.nytimes.com/interactive/2017/04/14/upshot/drug-overdose-epidemic-you-draw-it.html< / a > < / li >
< li > < a href = "https://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html" > https://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-how-family-income-affects-childrens-college-chances.html< / a > < / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "21" lang = "en-US" >
2024-10-20 17:57:10 +00:00
< h3 id = "more-examples" > More Examples...< / h3 >
< p > < a href = "https://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek" > NYT Snow Fall< / a > < br / >
< a href = "https://www.google.com/publicdata/explore" > Google Public Data Explorer< / a > < / p >
< ul >
< li > < a href = "https://pudding.cool" > pudding.cool< / a > - a data visualization magazine, with lots more inspiration< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "22" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "what-skills-do-you-need" > What Skills Do You Need?< / h2 >
< ul >
< li > Writing< / li >
< li > Design< / li >
< li > Programming (particularly for interactives)< / li >
< li > Subject-matter expertise< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section lang = "en-US" data-marpit-advanced-background = "background" data-marpit-advanced-background-split = "right" style = "--marpit-advanced-background-split:50%;" > < div data-marpit-advanced-background-container = "true" data-marpit-advanced-background-direction = "horizontal" > < figure style = "background-image:url("bmp-vs-svg.png");background-size:contain;" > < / figure > < / div > < / section > < / foreignObject > < foreignObject width = "50%" height = "720" > < section id = "23" lang = "en-US" data-marpit-advanced-background = "content" data-marpit-advanced-background-split = "right" style = "--marpit-advanced-background-split:50%;" >
2024-10-20 03:35:34 +00:00
< h2 id = "svg-vs-png-vs-jpg" > SVG vs PNG vs JPG< / h2 >
< ul >
< li > < strong > SVG< / strong > - Scalable Vector Graphics format.< / li >
< li > < strong > PNG< / strong > - Lossless raster image format. Should be preferred if SVG is not an option.< / li >
< li > < strong > JPG< / strong > - Image format that uses compression, suitable for photographs but not fine details in visualizations.< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < foreignObject width = "1280" height = "720" data-marpit-advanced-background = "pseudo" > < section lang = "en-US" data-marpit-advanced-background = "pseudo" data-marpit-advanced-background-split = "right" style = "" > < / section > < / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "24" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "document-formats" > Document Formats< / h2 >
< ul >
< li > < strong > PDF< / strong > - Portable Document Format - A vector-based format aimed at entire documents. PDF documents are aligned to paper sizes, great for printing, but less flexible on modern devices.< / li >
< li > < strong > HTML< / strong > - HyperText Markup Language - The language of the web, focused on < em > semantics< / em > over layout. A document can appear differently on different devices.< / li >
< li > < strong > CSS< / strong > - Cascading Style Sheets - A < em > styling< / em > language that, when applied to an HTML document controls visual appearance.< / li >
< li > < strong > Markdown< / strong > - Simplified markup language that can be converted to HTML or PDF with various tools. Offers < strong > much< / strong > less control over formatting than other options.< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "25" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "in-practice" > In Practice< / h2 >
< ol >
< li >
< p > Most professional data visualization starts with data-driven tools (code-driven like Altair or no-code like Tableau), which are then exported as SVG.< / p >
< / li >
< li >
< p > Those SVGs will then be embedded in a larger graphic or HTML page.< / p >
< / li >
< li >
< p > Export/render to final form(s):< / p >
< / li >
< / ol >
< ul >
< li > For web presentation: HTML/CSS will be the final form. If interactivity is at play, JavaScript will be a part of the process.< / li >
< li > For print or PDF: The intermediate format used by a print design tool will be exported to a PDF of the appropriate size & resolution.< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "26" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "tools-typesetting-languages" > Tools: Typesetting Languages< / h2 >
< ul >
< li > < strong > LaTeX< / strong > - PDF-focused, almost anything via plugins/pandoc.
< ul >
< li > < a href = "https://overleaf.com" > Overleaf< / a > - online editor and compiler.< / li >
< li > < a href = "https://tectonic-typesetting.github.io/en-US/" > Tectonic< / a > - local LateX compiler.< / li >
< / ul >
< / li >
< li > < strong > < a href = "https://typst.app" > Typst< / a > < / strong > - PDF-focused, (HTML coming soon).< / li >
< li > < strong > < a href = "https://quarto.org" > Quarto< / a > < / strong > - Can use mix of Markdown, Python, R, and Julia. Jupyter notebook compatible. Can generate PDFs or HTML from same source document.< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "27" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "tools-vector-graphics-editors" > Tools: Vector Graphics Editors< / h2 >
< ul >
< li > < strong > < a href = "https://inkscape.org" > Inkscape< / a > < / strong > - Free & Open Source SVG editor. My recommendation for this class if you don't have prior experience with other options.< / li >
< li > < strong > Adobe Illustrator< / strong > - Vector graphics editor, part of Adobe Creative Suite. Dominant option for many years. (Most expensive.)< / li >
< li > < strong > Affinity Designer< / strong > - Competitor to Illustrator, much cheaper, full-featured, and gaining popularity because of Adobe's subscription model & business practices.< / li >
< / ul >
< h3 id = "honorable-mentions" > Honorable Mentions< / h3 >
< ul >
2024-10-22 17:54:34 +00:00
< li > < strong > < a href = "https://graphite.rs/learn/" > Graphite< / a > < / strong > - Mix of GUI/programmatic SVG editing.< / li >
2024-10-20 03:35:34 +00:00
< li > < strong > BoxySVG< / strong > - Online/browser-based SVG editor.< / li >
< li > < strong > Canva< / strong > - Popular for infographics, collection of free clip art/etc.< / li >
< / ul >
< / section >
2024-10-22 17:54:34 +00:00
< / foreignObject > < / svg > < svg data-marpit-svg = "" viewBox = "0 0 1280 720" > < foreignObject width = "1280" height = "720" > < section id = "28" lang = "en-US" >
2024-10-20 03:35:34 +00:00
< h2 id = "references--acknowledgements" > References & Acknowledgements< / h2 >
< ul >
< li > Thanks to Alex Kale.< / li >
2024-10-20 17:57:10 +00:00
< li > American Journalism Handbook: Leads & Nut Grafs: < a href = "https://ajh.rodrigozamith.com/creating-journalistic-content/leads-and-nut-grafs/" > https://ajh.rodrigozamith.com/creating-journalistic-content/leads-and-nut-grafs/< / a > < / li >
2024-10-20 03:35:34 +00:00
< li > < a href = "https://www.forbes.com/sites/evamurray/2019/02/11/data-visualization-and-the-power-of-persuasion/" > https://www.forbes.com/sites/evamurray/2019/02/11/data-visualization-and-the-power-of-persuasion/< / a > < / li >
< / 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-10-20 17:57:10 +00:00
< / script > < / foreignObject > < / svg > < / div > < div class = "bespoke-marp-note" data-index = "20" tabindex = "0" > < p > these don't neatly fit into the above categories,
does Google Data explorer overwhelm the user? circa 2010 lots of attempts
to create " one viz to rule them all" < / p > < / div > < div class = "bespoke-marp-note" data-index = "25" tabindex = "0" > < p > **LaTeX** is the most widely used in academic & scientific circles. It is a document typesetting language designed originally for Computer Science text. The author, Donald Knuth, created the original (TeX) so he could typeset his magnum opus, *The Art of Computer Programming*. The easiest way to work with LaTeX is to use , an online editor & compiler. Many versions exist that can be run locally, such as< / 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-10-22 17:54:34 +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
