diff --git a/06.narrative/aftermarket-education-infographic.png b/06.narrative/aftermarket-education-infographic.png new file mode 100644 index 0000000..64f5e7e Binary files /dev/null and b/06.narrative/aftermarket-education-infographic.png differ diff --git a/06.narrative/baseball1.png b/06.narrative/baseball1.png new file mode 100644 index 0000000..eaa1f2f Binary files /dev/null and b/06.narrative/baseball1.png differ diff --git a/06.narrative/baseball2.png b/06.narrative/baseball2.png new file mode 100644 index 0000000..b2a4f20 Binary files /dev/null and b/06.narrative/baseball2.png differ diff --git a/06.narrative/bmp-vs-svg.png b/06.narrative/bmp-vs-svg.png new file mode 100644 index 0000000..1cec437 Binary files /dev/null and b/06.narrative/bmp-vs-svg.png differ diff --git a/06.narrative/slides.html b/06.narrative/slides.html index 2c763bc..21929a1 100644 --- a/06.narrative/slides.html +++ b/06.narrative/slides.html @@ -13,11 +13,11 @@ /* custom-theme.css */ /* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1} -/* @theme d356ztsjf1ng059ysmpfw82l9b61f1ihss7d2x3azxoh */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}
+/* @theme 86agpampooaoe6ld8i1zigc71lbc4zs0p2106peip5cb */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%}

Narratives

CAPP 30239

-
+

Today

  • What types of data visualization narratives exist?
    • @@ -25,7 +25,7 @@
  • Narrative Examples
-
+

Crafting a Narrative

Narrative = Visualization + Context

Benefits

@@ -52,7 +52,7 @@
-
+

Storytelling

Instead of a loosely connected series of images, take reader on a journey with a beginning, middle, and end.

    @@ -61,62 +61,147 @@
  • End: Conclusion and/or Further Questions
-
+

Risks

Oversimplification. Constraints of format can lead to the need to simplify, finding the right balance requires skill, practice, and knowledge of audience.

Bias. All narratives require interpretation, which can be a source of bias. We should not compromise on graphical integrity to make our point, or suggest conclusions that are not supported by the data.

-
+
+

Medium is the Message

+

"[...]medium is the message. This is merely to say that the
+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."

+

Marshall McLuhan, Understanding Media: The Extensions of Man, 1964.

+

The nature of a narrative is shaped by (dominated by) the medium chosen.

+
    +
  • Standard "Print" Article
    • +
  • Infographic
    • +
  • Live Presentation
    • +
  • Video / Animation
    • +
  • Museum / In Person Interaction
    • +
  • Web Interactives
    • +
+
+

News Article Format

Lede/Lead - Opening paragraph. Summarize key ideas & grab attention.
"Nut Graf" - Nutshell paragraph. Immediately follows lead. Gives overview of why topic is important, and introduce key ideas to be explored in article.

"Inverted Pyramid"

-

Other Formats: https://en.wikipedia.org/wiki/Article_structure

-

TODO: examples

+

Example: Chicago Missing Persons Pulitzer-winning long form piece that CAPP Alum Aïcha Camara contributed to.

-
-

Medium is the Message

-

The nature of a narrative is shaped by (dominated by?) the medium chosen.

-

Marshall McLuhan, Understanding Media: The Extensions of Man, 1964.

+
+

"Print" Article

+

Even if initially viewed on a screen, use static design so can be copied/printed/shared easily.

+

No vital information in tooltips, animation, etc.

+
    +
  • Text-forward, with supporting visuals. -or-
    • +
  • Visual-centric, with explanatory text.
    • +
-
+

Infographic

-

Typically a single-page image with an arrangement of graphics, tables, and brief narratives.

+

Can be built around a single chart, or combine many into a story.
+Typically a single-page image with an arrangement of graphics, tables, and brief narrative.

Typically aimed at general audiences, easy to share online, can be designed to work well in print.

-

TODO: examples

+

Important to think about visual flow, keep information organized.

+

Examples:

+
-
+
+
+
+
+

Live Presentation

-

A live presentation with slides.

-

Special consideration should be given to legibility from a distance.

-

If detailed visualizations play a role: consider print versions.

-

TODO: examples

+

Few words, large fonts.

+

Legibility from distance.

+

Nature of audience/projector/room.

+

Print handouts if visualizations have lots of detail.
+

-
+

Animations & Videos

Animation can be used to show change, uncertainty, or relationships.

Video can blend presentation with commentary and narrative.

Examples

-
+
+

Museum Interactives

+

Blue Paradox @ MSI - Thanks Magdalena!

+
+

Interactive Stories

-

Take advantage of web as a medium.

-

Can seamlessly blend text, images, audio and video, and interactive elements.

+

Can take advantage of web as a medium. Seamlessly blend text, images, audio and video, and interactive elements.

+

Potential Benefits

    -
  • NYT Snow Fall
    -TODO: examples
    • +
  • Reducing Cognitive Load
    • +
  • Personalization for Reader
    • +
  • Making Information Playful
    • +
  • Prompting Self-Reflection
    • +
+

Caveat: Can overwhelm with options, lose sight of what's important.

+
+
+

Reducing Cognitive Load

+

Make data pleasant, avoid rigidity of visualization designed for print.

+

Animations, tooltips, drop-downs, sliders, zoom & pan, highlights.
+Used artfully, these can provide ways for complex data to be presented in a more digestible way.

+

In practical terms, Altair will allow a lot of this, handling the JS for you via Vega-Lite.

+

Examples:

+
-
-

Interactive Articles

-

TODO: 5 affordances

+
+

Personalization For Reader

+

Engage reader better by showing them the data most relevant to them first.

+

Excellent way to drill down in large data sets to make it meaningful to reader.

+

Examples:

+
-
+
+

Making Information Playful

+

Give people tools to explore or run simulations on their own in the browser.
+Encourages exploration & engagement.

+

Examples:

+ +
+
+

Prompting Self-Reflection

+

Encourage people to reflect upon expectations & experiences relevant to framing of story.

+

NYT "You Draw It" Series:

+ +
+
+

More Examples...

+

NYT Snow Fall
+Google Public Data Explorer

+
    +
  • pudding.cool - a data visualization magazine, with lots more inspiration
    • +
+
+

What Skills Do You Need?

  • Writing
    • @@ -125,16 +210,15 @@ TODO: examples
  • Subject-matter expertise
-
+

SVG vs PNG vs JPG

  • SVG - Scalable Vector Graphics format.
  • PNG - Lossless raster image format. Should be preferred if SVG is not an option.
  • JPG - Image format that uses compression, suitable for photographs but not fine details in visualizations.
-

TODO: images

-
+

Document Formats

  • PDF - 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.
    • @@ -143,7 +227,7 @@ TODO: examples
  • Markdown - Simplified markup language that can be converted to HTML or PDF with various tools. Offers much less control over formatting than other options.
-
+

In Practice

  1. @@ -161,7 +245,7 @@ TODO: examples
  2. For print or PDF: The intermediate format used by a print design tool will be exported to a PDF of the appropriate size & resolution.
-
+

Tools: Typesetting Languages

  • LaTeX - PDF-focused, almost anything via plugins/pandoc. @@ -174,7 +258,7 @@ TODO: examples
  • Quarto - Can use mix of Markdown, Python, R, and Julia. Jupyter notebook compatible. Can generate PDFs or HTML from same source document.
-
+

Tools: Vector Graphics Editors

  • Inkscape - Free & Open Source SVG editor. My recommendation for this class if you don't have prior experience with other options.
    • @@ -187,13 +271,17 @@ TODO: examples
  • Canva - Popular for infographics, collection of free clip art/etc.
-
+

References & Acknowledgements

**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

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"

**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

\ No newline at end of file diff --git a/06.narrative/slides.md b/06.narrative/slides.md index 62c6c5f..3fb2cb7 100644 --- a/06.narrative/slides.md +++ b/06.narrative/slides.md @@ -47,6 +47,24 @@ Instead of a loosely connected series of images, take reader on a journey with a --- +## Medium is the Message + +"[...]medium is the message. This is merely to say that the +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." + +*Marshall McLuhan, Understanding Media: The Extensions of Man, 1964.* + +The nature of a narrative is shaped by (dominated by) the medium chosen. + +- Standard "Print" Article +- Infographic +- Live Presentation +- Video / Animation +- Museum / In Person Interaction +- Web Interactives + +--- + ## News Article Format **Lede/Lead** - Opening paragraph. Summarize key ideas & grab attention. @@ -56,39 +74,59 @@ Instead of a loosely connected series of images, take reader on a journey with a ![bg right fit](pyramid.svg) -Other Formats: +Example: [Chicago Missing Persons](https://chicagomissingpersons.com/who-goes-missing/) Pulitzer-winning long form piece that CAPP Alum Aïcha Camara contributed to. -TODO: examples --- -## Medium is the Message +## "Print" Article -The nature of a narrative is shaped by (dominated by?) the medium chosen. +Even if initially viewed on a screen, use static design so can be copied/printed/shared easily. -Marshall McLuhan, Understanding Media: The Extensions of Man, 1964. +No vital information in tooltips, animation, etc. + +- Text-forward, with supporting visuals. *-or-* +- Visual-centric, with explanatory text. --- ## Infographic -Typically a single-page image with an arrangement of graphics, tables, and brief narratives. +Can be built around a single chart, or combine many into a story. +Typically a single-page image with an arrangement of graphics, tables, and brief narrative. Typically aimed at general audiences, easy to share online, can be designed to work well in print. -TODO: examples +Important to think about visual flow, keep information organized. + +Examples: +- --- +![bg fit](baseball1.png) + +--- + +![bg fit](baseball2.png) + +--- + +![bg fit](aftermarket-education-infographic.png) + +--- + + ## Live Presentation -A live presentation with slides. +Few words, large fonts. -Special consideration should be given to legibility from a distance. +Legibility from distance. -If detailed visualizations play a role: consider print versions. +Nature of audience/projector/room. -TODO: examples +**Print handouts if visualizations have lots of detail.** + --- @@ -101,24 +139,95 @@ Video can blend presentation with commentary and narrative. ### Examples - [The best stats you've ever seen - Hans Rosling](https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen?subtitle=en) -TODO: examples +- [Planetary Visualization](https://vimeo.com/555245282) (thanks Sam!) +- [NYT Thanksgiving Flight Animations](https://www.nytimes.com/interactive/2015/11/24/upshot/thanksgiving-flight-patterns.html) (thanks Krisha!) + +--- + +## Museum Interactives + +[Blue Paradox @ MSI](https://www.blueparadox.com/en/the-exhibit) - Thanks Magdalena! --- ## Interactive Stories -Take advantage of web as a medium. +Can take advantage of web as a medium. Seamlessly blend text, images, audio and video, and interactive elements. -Can seamlessly blend text, images, audio and video, and interactive elements. +### Potential Benefits -- [NYT Snow Fall](https://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek) -TODO: examples +- Reducing Cognitive Load +- Personalization for Reader +- Making Information Playful +- Prompting Self-Reflection + +**Caveat:** Can overwhelm with options, lose sight of what's important. --- -## Interactive Articles +### Reducing Cognitive Load -TODO: 5 affordances +Make data pleasant, avoid rigidity of visualization designed for print. + +Animations, tooltips, drop-downs, sliders, zoom & pan, highlights. +Used artfully, these can provide ways for complex data to be presented in a more digestible way. + +In practical terms, Altair will allow a lot of this, handling the JS for you via Vega-Lite. + +Examples: +- (thanks David!) +- +- +- (thanks Michael!) + +--- + +### Personalization For Reader + +Engage reader better by showing them the data most relevant to them first. + +Excellent way to drill down in large data sets to make it meaningful to reader. + +Examples: +- +- + +--- + +### Making Information Playful + +Give people tools to explore or run simulations on their own in the browser. +Encourages exploration & engagement. + +Examples: +- +- +- (thanks Paul!) +- (thanks Daniel!) + +--- + +### Prompting Self-Reflection + +Encourage people to reflect upon expectations & experiences relevant to framing of story. + +NYT "You Draw It" Series: +- +- + +--- + +### More Examples... + +[NYT Snow Fall](https://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek) +[Google Public Data Explorer](https://www.google.com/publicdata/explore) +- [pudding.cool](https://pudding.cool) - a data visualization magazine, with lots more inspiration + + --- @@ -137,7 +246,7 @@ TODO: 5 affordances - **PNG** - Lossless raster image format. Should be preferred if SVG is not an option. - **JPG** - Image format that uses compression, suitable for photographs but not fine details in visualizations. -TODO: images +![bg right fit](bmp-vs-svg.png) --- @@ -194,4 +303,5 @@ TODO: images ## References & Acknowledgements - Thanks to Alex Kale. +- American Journalism Handbook: Leads & Nut Grafs: - diff --git a/06.narrative/vaccine.png b/06.narrative/vaccine.png new file mode 100644 index 0000000..24d8052 Binary files /dev/null and b/06.narrative/vaccine.png differ