diff --git a/06.narrative/pyramid.svg b/06.narrative/pyramid.svg new file mode 100644 index 0000000..d0ece6b --- /dev/null +++ b/06.narrative/pyramid.svg @@ -0,0 +1,464 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/06.narrative/slides.html b/06.narrative/slides.html new file mode 100644 index 0000000..2c763bc --- /dev/null +++ b/06.narrative/slides.html @@ -0,0 +1,199 @@ +
+

Narratives

+

CAPP 30239

+
+
+

Today

+
    +
  • What types of data visualization narratives exist?
    • +
  • Practical advice on creating publications & pages.
    • +
  • Narrative Examples
    • +
+
+
+

Crafting a Narrative

+

Narrative = Visualization + Context

+

Benefits

+
    +
  • More engaged audience. +
      +
    • Greussing & Boomgaarden, Digital Journalism 2019.
      • +
    +
    • +
  • Better learning outcomes. +
      +
    • Mayer, Multimedia Principles, 2005.
      • +
    +
    • +
  • Promote active reading. +
      +
    • Victor, Explorable Explanations, 2011.
      • +
    +
    • +
  • Persuasiveness of data. +
      +
    • Murray, Data Visualization And The Power Of Persuasion, 2019.
      • +
    +
    • +
+
+
+

Storytelling

+

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

+
    +
  • Beginning: Required Context, Pose Questions
    • +
  • Middle: Exposition & Exploration
    • +
  • 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.

+
+
+

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

+
+
+

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.

+
+
+

Infographic

+

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

+

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

+

TODO: 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

+
+
+

Animations & Videos

+

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

+

Video can blend presentation with commentary and narrative.

+

Examples

+ +
+
+

Interactive Stories

+

Take advantage of web as a medium.

+

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

+ +
+
+

Interactive Articles

+

TODO: 5 affordances

+
+
+

What Skills Do You Need?

+
    +
  • Writing
    • +
  • Design
    • +
  • Programming (particularly for interactives)
    • +
  • 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.
    • +
  • HTML - HyperText Markup Language - The language of the web, focused on semantics over layout. A document can appear differently on different devices.
    • +
  • CSS - Cascading Style Sheets - A styling language that, when applied to an HTML document controls visual appearance.
    • +
  • 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. +

    Most professional data visualization starts with data-driven tools (code-driven like Altair or no-code like Tableau), which are then exported as SVG.

    +
    2. +
  2. +

    Those SVGs will then be embedded in a larger graphic or HTML page.

    +
    3. +
  3. +

    Export/render to final form(s):

    +
    4. +
+
    +
  • For web presentation: HTML/CSS will be the final form. If interactivity is at play, JavaScript will be a part of the process.
    • +
  • 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. + +
    • +
  • Typst - PDF-focused, (HTML coming soon).
    • +
  • 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.
    • +
  • Adobe Illustrator - Vector graphics editor, part of Adobe Creative Suite. Dominant option for many years. (Most expensive.)
    • +
  • Affinity Designer - Competitor to Illustrator, much cheaper, full-featured, and gaining popularity because of Adobe's subscription model & business practices.
    • +
+

Honorable Mentions

+
    +
  • BoxySVG - Online/browser-based SVG editor.
    • +
  • 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

\ No newline at end of file diff --git a/06.narrative/slides.md b/06.narrative/slides.md new file mode 100644 index 0000000..62c6c5f --- /dev/null +++ b/06.narrative/slides.md @@ -0,0 +1,197 @@ +# Narratives + +## CAPP 30239 + +--- + +## Today + +- What types of data visualization narratives exist? +- Practical advice on creating publications & pages. +- Narrative Examples + +--- + +## Crafting a Narrative + +**Narrative** = **Visualization** + **Context** + +### Benefits + +- More engaged audience. + - Greussing & Boomgaarden, Digital Journalism 2019. +- Better learning outcomes. + - Mayer, Multimedia Principles, 2005. +- Promote active reading. + - Victor, Explorable Explanations, 2011. +- Persuasiveness of data. + - Murray, Data Visualization And The Power Of Persuasion, 2019. + +--- + +## Storytelling + +Instead of a loosely connected series of images, take reader on a journey with a beginning, middle, and end. + +- Beginning: Required Context, Pose Questions +- Middle: Exposition & Exploration +- 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. + +--- + +## 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**" + +![bg right fit](pyramid.svg) + +Other Formats: + +TODO: examples + +--- + +## 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. + +--- + +## Infographic + +Typically a single-page image with an arrangement of graphics, tables, and brief narratives. + +Typically aimed at general audiences, easy to share online, can be designed to work well in print. + +TODO: 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 + +--- + +## Animations & Videos + +Animation can be used to show change, uncertainty, or relationships. + +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 + +--- + +## Interactive Stories + +Take advantage of web as a medium. + +Can seamlessly blend text, images, audio and video, and interactive elements. + +- [NYT Snow Fall](https://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek) +TODO: examples + +--- + +## Interactive Articles + +TODO: 5 affordances + +--- + +## What Skills Do You Need? + +- Writing +- Design +- Programming (particularly for interactives) +- 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. +- **HTML** - HyperText Markup Language - The language of the web, focused on *semantics* over layout. A document can appear differently on different devices. +- **CSS** - Cascading Style Sheets - A *styling* language that, when applied to an HTML document controls visual appearance. +- **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. Most professional data visualization starts with data-driven tools (code-driven like Altair or no-code like Tableau), which are then exported as SVG. + +2. Those SVGs will then be embedded in a larger graphic or HTML page. + +3. Export/render to final form(s): + - For web presentation: HTML/CSS will be the final form. If interactivity is at play, JavaScript will be a part of the process. + - 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. + - [Overleaf](https://overleaf.com) - online editor and compiler. + - [Tectonic](https://tectonic-typesetting.github.io/en-US/) - local LateX compiler. +- **[Typst](https://typst.app)** - PDF-focused, (HTML coming soon). +- **[Quarto](https://quarto.org)** - 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](https://inkscape.org)** - Free & Open Source SVG editor. My recommendation for this class if you don't have prior experience with other options. +- **Adobe Illustrator** - Vector graphics editor, part of Adobe Creative Suite. Dominant option for many years. (Most expensive.) +- **Affinity Designer** - Competitor to Illustrator, much cheaper, full-featured, and gaining popularity because of Adobe's subscription model & business practices. + +### Honorable Mentions + +- **BoxySVG** - Online/browser-based SVG editor. +- **Canva** - Popular for infographics, collection of free clip art/etc. + + +--- + +## References & Acknowledgements + +- Thanks to Alex Kale. +-