Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization...
Transcript of Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization...
![Page 1: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/1.jpg)
1
Storytelling with InfoVis
CS 4460 – Intro. to Information Visualization
October 25, 2017
John Stasko
Learning Objectives
• Define narrative visualization (vis for storytelling) and explain how it differs from analytic/exploratory visualization
• Name and describe different genres and approaches to narrative visualization
• Explain the style, content, and significance of Rosling's GapMinder video
• View and learn from designs of examples
Mariano Rivera, What's Warming World?, Home and Away, Bubble Bust to Recovery, Fallen of WWII, …
Fall 2017 CS 4460 2
![Page 2: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/2.jpg)
2
Purpose
• Two main uses of infovis
Analysis – Understand your data better and act upon that understanding
Presentation – Communicate and inform others more effectively
• Today we look at that second one more
Fall 2017 CS 4460
Review
3
Telling Stories
• Data visualization can help to communicate ideas, summarize, influence, unite, explain, persuade
• Visuals can serve as evidence or support
Fall 2017 CS 4460 4
![Page 3: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/3.jpg)
3
A Famous Example
Fall 2017 CS 4460
http://www.ted.com/index.php/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html
Hans RoslingGapminder
2006
5
They Had Him Back
Fall 2017 CS 4460
http://www.ted.com/index.php/talks/hans_rosling_reveals_new_insights_on_poverty.html
2007
6
![Page 4: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/4.jpg)
4
Discuss
• Why has this had such a big impact?
Fall 2017 CS 4460 7
InfoGraphics
• See them everywhere today
• Perhaps a good example of infovis for presentation purposes
Typically not interactive though
Fall 2017 CS 4460 8
![Page 5: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/5.jpg)
5
Fall 2017 CS 4460
http://thedinfographics.com/2011/11/16/obesity-in-america-facts-statistics-and-lies/
9
Fall 2017 CS 4460
http://www.informationisbeautiful.net/visualizations/left-vs-right-us/
10
![Page 6: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/6.jpg)
6
Fall 2017 CS 4460
http://www.wired.com/2012/07/you-suck-at-infographics
11
A Lead Paper
• Studied storytelling: Described topics as “Narrative Visualization”
How does this differ from traditional forms of storytelling
Reviews the designspace
Characterizes genres
Describes a framework
Fall 2017 CS 4460
Segel & HeerTVCG (InfoVis) ‘10
12
![Page 7: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/7.jpg)
7
Case Studies
Fall 2017 CS 4460
NY Times 2006
13
Genres
Fall 2017 CS 4460 14
![Page 8: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/8.jpg)
8
Approach
• Author-driven vs. reader-driven
• Common patterns
Martini glass
Interactive slideshow
Drill-down story
Fall 2017 CS 4460 15
Journalism Angle
Fall 2017 CS 4460
http://datadrivenjournalism.net
16
![Page 9: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/9.jpg)
9
Some Examples
Fall 2017 CS 4460 17
News Stories
Fall 2017 CS 4460
Tufte praises the work ofMegan Jaegerman at NY Times
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0002w4
18
![Page 10: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/10.jpg)
10
Films
Fall 2017 CS 4460
Gore made extensive useof data graphics
An Inconvenient Truth
19
Infographics
Fall 2017 CS 4460
Controversial, see http://soquelbythecreek.blogspot.com/2010/02/what-does-obama-job-chart-really-mean.html
(with a message)
20
![Page 11: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/11.jpg)
11
Fall 2017 CS 4460
http://www.nytimes.com/interactive/2010/06/29/magazine/rivera-pitches.html?ref=multimedia
21
Fall 2017 CS 4460
http://www.cnn.com/homeandaway
22
![Page 12: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/12.jpg)
12
Fall 2017 CS 4460
http://www.bloomberg.com/graphics/2015-whats-warming-the-world/
23
http://www.fallen.io/ww2/
Fall 2017 CS 4460 24
Discuss
![Page 13: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/13.jpg)
13
Fall 2017 CS 4460
http://public.tableau.com/views/MinimumWage_3/MinimumWage-StoryPointsEdition?:showVizHome=no
Tableau StoryPoints Textual narrative, slides with titles as breadcrumbs, element highlighting, and textual annotation on the chart
25
Fall 2017 CS 4460
http://www.bloomberg.com/dataview/2014-02-25/bubble-to-bust-to-recovery.html
Dot breadcrumbs, interaction on charts, tooltips, …
26
![Page 14: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/14.jpg)
14
Fall 2017 CS 4460
http://www.bloomberg.com/graphics/2015-auto-sales/
Page scroller, text annotations, rearranging glyphs
27
Fall 2017 CS 4460
http://www.nytimes.com/interactive/2015/01/29/sunday-review/road-map-home-values-street-names.html?_r=0
Dynamic query widget embedded in textual narrative
28
![Page 15: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/15.jpg)
15
Fall 2017 CS 4460
http://www.washingtonpost.com/wp-srv/special/local/2013-elections/demographics/
Steps
Linear steps with much interaction, comments
29
Fall 2017 CS 4460
Animated interaction, tooltips, scrolling
http://qz.com/296941/interactive-graphic-every-active-satellite-orbiting-earth/
30
![Page 16: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/16.jpg)
16
Fall 2017 CS 4460 31
http://www.facesoffracking.org/data-visualization/
Scrolling page with geovis updates
Fall 2017 CS 4460
http://mbtaviz.github.io/
Scrolling page with many visualizations, much interaction
Project inWPI infovisclass
32
![Page 17: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/17.jpg)
17
Fall 2017 CS 4460 33
http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
https://www.youtube.com/watch?v=Z4tB6qyxHJA
Design discussion
Fall 2017 CS 4460 34
http://polygraph.cool/films/
http://fivethirtyeight.com/features/gun-deaths/
http://www.georgelmurphy.com/berrics/
![Page 18: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/18.jpg)
18
Fall 2017 CS 4460 35
https://www.theguardian.com/world/ng-interactive/2015/aug/26/china-economic-slowdown-world-imports
http://www.nytimes.com/interactive/2015/05/28/upshot/you-draw-it-
how-family-income-affects-childrens-college-chances.html
http://drones.pitchinteractive.com/
Even President Obama
Went Interactive
Fall 2017 CS 4460
2011 State of Union Address
Side channeldata visualizationsaccompanied speech
36
![Page 19: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/19.jpg)
19
Fall 2017 CS 4460 37
Storytelling Scenarios
• Self-running presentations for a large audience
• Live presentations
• Individual or small group presentations
Fall 2017 CS 4460 38
![Page 20: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/20.jpg)
20
Data Matters
Fall 2017 CS 4460
http://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization.html
DavidMcCandless
39
McCandless Website
Fall 2017 CS 4460
http://www.informationisbeautiful.net/
40
![Page 21: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/21.jpg)
21
Back to Where We Started
Fall 2017 CS 4460
http://www.youtube.com/watch?v=jbkSRLYSojo
41
Changing Trends
Fall 2017 CS 4460
http://www.fastcodesign.com/3045291/what-killed-the-infographic
42
![Page 22: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/22.jpg)
22
Questions
• How do these types of visualizations differ from “traditional” infovis?
Fall 2017 CS 4460 43
Questions
• Would you characterize all of these as information visualizations?
Consider some of the different examples
Fall 2017 CS 4460 44
![Page 23: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/23.jpg)
23
My Reflections
• InfoVis for analysis and presentation are different
Apples & oranges (both fruit though)
• How?
Fall 2017 CS 4460 45
Resources
Fall 2017 CS 4460
http://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources
46
![Page 24: Storytelling with InfoVisStorytelling with InfoVis CS 4460 –Intro. to Information Visualization October 25, 2017 John Stasko Learning Objectives • Define narrative visualization](https://reader031.fdocuments.us/reader031/viewer/2022040723/5e3361a47a259d7e6c024dac/html5/thumbnails/24.jpg)
24
Learning Objectives
• Define narrative visualization (vis for storytelling) and explain how it differs from analytic/exploratory visualization
• Name and describe different genres and approaches to narrative visualization
• Explain the style, content, and significance of Rosling's GapMinder video
• View and learn from designs of examples
Mariano Rivera, What's Warming World?, Home and Away, Bubble Bust to Recovery, Fallen of WWII, …
Fall 2017 CS 4460 47
Fall 2017 CS 4460
Upcoming
• Lab: D3 – Enter, Update, & Exit
Prep: Murray chapter 9
Implementation change: Turn in code at end
• Hierarchies & Trees 1
48