6.1 KiB
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
- The best stats you've ever seen - Hans Rosling 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 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
-
Most professional data visualization starts with data-driven tools (code-driven like Altair or no-code like Tableau), which are then exported as SVG.
-
Those SVGs will then be embedded in a larger graphic or HTML page.
-
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.
- 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.