- 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.
"[...]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.
**"Nut Graf"** - Nutshell paragraph. Immediately follows lead. Gives overview of why topic is important, and introduce key ideas to be explored in article.
Example: [Chicago Missing Persons](https://chicagomissingpersons.com/who-goes-missing/) Pulitzer-winning long form piece that CAPP Alum Aïcha Camara contributed to.
- **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.
- **[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.
<!--
**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
-->
---
## 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.
