Crafting Visual Stories
with Data
How many 5’s can you find?
142536789251364789245369178
419356728495126783149356728
245369178145672893145672938
49512678314...
Proximity
142 5 367892 5 136478924 5 369178
4193 5 672849 5 1267831493 5 6728
24 5 36917814 5 67289314 5 672938
49 5 12678...
Alignment
555 142367892136478924369178
555 419367284912678314936728
555 243691781467289314672938
555 491267831493672842369...
Repetition
123456789 123456789 123456789
123456789 123456789 123456789
123456789 123456789 123456789
123456789 123456789 1...
Contrast
142536789251364789245369178
419356728495126783149356728
245369178145672893145672938
495126783149356728423698517
3...
Subtraction
142536789251364789245369178
419356728495126783149356728
245369178145672893145672938
49512678314935672842369851...
One Frame Counts
Source: The Cutting Edge
War Stories & Killer Charts
Quote
I think people have begun to forget
how powerful human stories are,
exchanging their sense of empathy for
a fetishis...
Content
Why Stories?
Emotion & Empathy
I am blind
Emotion & Empathy
It is spring &
I am blind
Speakers’ Corner
Rhetoric
Joshua Bell
Source: Aristotle and Joshua Bell on Persuasion
Persuasion
logos reason
ethos
pathos
credible
emotional
|
|
|
Persuasion
Data-Story-Visual
Data Story
Visual
Graph Art
Tale
*
analysis SYNTHESIS
numbers
argument
VISUALISE
STORY
|
|
|
Synthesis -Visualise-Story
logic | EMPATHY
Data & Stories
The focus of stories is on
individual people rather than averages,
on motives rather than movements,
on poi...
Body Mass Index (BMI)
BMI =
mass (kg)
[ height (m) ]2h
m
Living on the edge
5’ 1
6’ 5
5’ 7
5’ 5
5’ 3
6’ 3
6’ 1
5’ 11
5’ 9
6’ 7
Obese
Over
Normal
Under
18 25 30
mass (in kg)
height...
The Story Mindset
In listening to stories we tend to
suspend disbelief in order to be
entertained, whereas in evaluating
s...
Stories are emotional
Stories are
Stories are
memorable
impactful
|
|
|
Why Stories?
Content
How do stories work?
People tell stories
Words
Pictures
tell stories
tell stories
|
|
|
Synthesis -Visualise-Story
Comics tell stories|
Movies ...
Dual Coding
Aural Visual
ˌvɪʒʊəlaɪˈzeɪʃən (noun)
Derived from the Latin verb videre, "to look,
to see"
The act or instance to
form a mental image o...
Two Little Fishes
Transfer of Imagery
Teller
Story
Listener
Storytelling Triangle
Transfer of Imagery
Source: The Visitor - Learning the Djembe
Visual Aural
Kinesthetic Conceptual
Cognitive Flow
Start
Frame it
as a Journey
Finish
/ˈnærətiv / (noun)
A narrative (or story) is any account of
connected events, presented to a reader or
listener in a seque...
A man walks into a store...
Narrative Structure
Journalistic - Kabob
Anecdote
Anecdote
Meat
Meat
Meat
Nut graf
Outline the Story
1
2
3
4
5
Making Comics
“I can take any empty space
and call it a bare stage. A man
walks across this empty space
whilst someone else is
watching ...
Content
How to craft Data-Stories?
Data Art for visual expression, delight
(and impact) e.g. Infographics
Exhibition | Expression
Source: Aaron Koblin
Exhibition
Data Tool for engagement,
exploration and discovery
Exploration | Interactive
Source: Gramener
Exploration
Data Stories for telling a specific and
(linear) visual narrative
Explanatory | Narrative
Source: Hans Rosling | Joy of Stats
Explanatory
Word Writer
Note
Frame
Musician
Film Maker
|
|
|
Basic Element
Data Artist|Datum
???
???
???
???
Datum
Data-Stories
1
6
11
16
21
2
7
12
17
22
3
8
13
18
23
4
9
14
19
24
5
10
15
20
25
4
16
1
13
6
11
21
2
7
12
17
22
3
8
18
23
9
14
19
24
5
10
15
20
25
See the Data
Show the Visual
Tell the Story
Engage the Audience
Datum
Data-Stories
See the Data
Pattern
Deviation Outlier
Trend
Data
Abstraction
Anscombe’s Quartet
x1 y1 x2 y2 x3 y3 x4 y4
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0...
Anscombe’s Quartet
x(mean) = 9
y(mean) = 7.5
x(var) = 11
y(var) = 4.12
y = 3.00 + 0.500 x
Anscombe’s Quartet
Building Ability to See
Hypothesis-driven Approach
a.k.a
Educated guesses based on
experience, knowledge & intuition
See the Data
Pattern
Deviation Outlier
Trend
Data
Abstraction
Show the Visual
Framing
Transition
Visual
Representation
Visual Perception
Visual Perception
Iconic
Pre-attentive
<1s Fast
Temporary
Unconscious
In-device
Working
Attentive
<1-3s Medium
Temporary
C...
Length
Size
Orientation
Hue
Width
EnclosureShape
PositionIntensity
How big is the 2nd
circle?
Source: WTF Visualizations
Avoid Chart Junk
Representation Matters
Source: South China Post
Single Frame Dominates
Source: Walmart & Target Store Expansion
Establish & Focus
Source: OECD Better Life
Consistent
Visual
Framework
Establish & Focus
Source: OECD Better Life
See the Data
Pattern
Deviation Outlier
Trend
Data
Abstraction
Show the Visual
Framing
Transition
Visual
Representation
Tell the Story
Ordering &
Structure
Messaging
(Verbal & Text)
Point of View
Relatability
TRF JQL
VWX DFR
RGT DEF
ZEF LXR
Integrate Text & Graphics
Stories through Annotation
Source: Napolean’s Campaign
Linear Narrative
Source: Pitch Interactive
Source: Hans Rosling | Joy of Stats
Power of Verbal Messaging
Idea-driven Mileu-driven
Character-driven Event-driven
See the Data
Pattern
Deviation Outlier
Trend
Data
Abstraction
Show the Visual
Framing
Transition
Visual
Representation
Tell the Story
Ordering &
Structure
Messaging
(Verbal & Text)
Point of View
Relatability
TRF JQL
VWX DFR
RGT DEF
ZEF LXR
Engage the Audience
TRF JQL
VWX DFR
RGT DEF
ZEF LXR
Emotion
Takeaway
Interactivity
Source: Working Capital Profiler
Build your own story
Source: Wealth Inequality
Emotions are key
Source: Libor Scandal
Emotions
“I think the trick with knowledge is to
“acquire it, and forget all except the
perfume” —  because it is noisy and
sometim...
Amit Kapoor
@amitkaps
Partner, narrativeVIZ Consulting
amit@narrativeviz.com
Crafting Visual Stories with Data
Upcoming SlideShare
Loading in...5
×

Crafting Visual Stories with Data

13,605

Published on

Data visualization has enabled us to compress data and express them visually in many interesting new ways. It is often cited that we are trying to tell stories through them. Is that really the case? How can we ensure that the audience is able to retain, recall and retell our data-driven stories.

Using examples and videos learning from different storytelling mediums, I walk through why stories are important and what we can learn about how stories work from these mediums. I then detail out a framework built on the See the data | Show the Visual | Tell the Story | Engage the Audience paradigm to convert the data in to a data-visual-story.

This slide deck was used in Bangalore Meetup - Crafting Visual Stories with Data - in March 2014 @ InMobi's Bangalore Office.

Published in: Business

Crafting Visual Stories with Data

  1. 1. Crafting Visual Stories with Data
  2. 2. How many 5’s can you find? 142536789251364789245369178 419356728495126783149356728 245369178145672893145672938 495126783149356728423698517 359164782145672938451672938 465132978423698517459163782 145762938451672938359164782 431567298459163782431567298
  3. 3. Proximity 142 5 367892 5 136478924 5 369178 4193 5 672849 5 1267831493 5 6728 24 5 36917814 5 67289314 5 672938 49 5 1267831493 5 6728423698 5 17 3 5 916478214 5 6729384 5 1672938 46 5 132978423698 5 174 5 9163782 14 5 7629384 5 16729383 5 9164782 431 5 672984 5 9163782431 5 67298
  4. 4. Alignment 555 142367892136478924369178 555 419367284912678314936728 555 243691781467289314672938 555 491267831493672842369817 555 391647821467293841672938 555 461329784236981749163782 555 147629384167293839164782 555 431672984916378243167298
  5. 5. Repetition 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
  6. 6. Contrast 142536789251364789245369178 419356728495126783149356728 245369178145672893145672938 495126783149356728423698517 359164782145672938451672938 465132978423698517459163782 145762938451672938359164782 431567298459163782431567298
  7. 7. Subtraction 142536789251364789245369178 419356728495126783149356728 245369178145672893145672938 495126783149356728423698517 359164782145672938451672938 465132978423698517459163782 145762938451672938359164782 431567298459163782431567298
  8. 8. One Frame Counts Source: The Cutting Edge
  9. 9. War Stories & Killer Charts
  10. 10. Quote I think people have begun to forget how powerful human stories are, exchanging their sense of empathy for a fetishistic fascination with data, networks, patterns, and total information... Really, the data is just part of the story. The human stuff is the main stuff, and the data should enrich it. - Jonathan Harris
  11. 11. Content Why Stories?
  12. 12. Emotion & Empathy I am blind
  13. 13. Emotion & Empathy It is spring & I am blind
  14. 14. Speakers’ Corner
  15. 15. Rhetoric
  16. 16. Joshua Bell Source: Aristotle and Joshua Bell on Persuasion
  17. 17. Persuasion
  18. 18. logos reason ethos pathos credible emotional | | | Persuasion
  19. 19. Data-Story-Visual Data Story Visual Graph Art Tale *
  20. 20. analysis SYNTHESIS numbers argument VISUALISE STORY | | | Synthesis -Visualise-Story
  21. 21. logic | EMPATHY
  22. 22. Data & Stories The focus of stories is on individual people rather than averages, on motives rather than movements, on point of view rather than the view from nowhere, context rather than raw data. Moreover, stories are open-ended and metaphorical rather than determinate and literal.
  23. 23. Body Mass Index (BMI) BMI = mass (kg) [ height (m) ]2h m
  24. 24. Living on the edge 5’ 1 6’ 5 5’ 7 5’ 5 5’ 3 6’ 3 6’ 1 5’ 11 5’ 9 6’ 7 Obese Over Normal Under 18 25 30 mass (in kg) height (in ft)
  25. 25. The Story Mindset In listening to stories we tend to suspend disbelief in order to be entertained, whereas in evaluating statistics we generally have an opposite inclination to suspend belief in order not to be beguiled. - John Allen Paulos
  26. 26. Stories are emotional Stories are Stories are memorable impactful | | | Why Stories?
  27. 27. Content How do stories work?
  28. 28. People tell stories Words Pictures tell stories tell stories | | | Synthesis -Visualise-Story Comics tell stories| Movies tell stories|
  29. 29. Dual Coding Aural Visual
  30. 30. ˌvɪʒʊəlaɪˈzeɪʃən (noun) Derived from the Latin verb videre, "to look, to see" The act or instance to form a mental image or picture (without an object) Visualization The act or instance to make visible or visual (with an object)
  31. 31. Two Little Fishes
  32. 32. Transfer of Imagery
  33. 33. Teller Story Listener Storytelling Triangle
  34. 34. Transfer of Imagery Source: The Visitor - Learning the Djembe
  35. 35. Visual Aural Kinesthetic Conceptual
  36. 36. Cognitive Flow Start Frame it as a Journey Finish
  37. 37. /ˈnærətiv / (noun) A narrative (or story) is any account of connected events, presented to a reader or listener in a sequence of written or spoken words, or in a sequence of (moving) pictures. Derived from the Latin verb narrare, "to tell" Narrative
  38. 38. A man walks into a store...
  39. 39. Narrative Structure
  40. 40. Journalistic - Kabob Anecdote Anecdote Meat Meat Meat Nut graf
  41. 41. Outline the Story 1 2 3 4 5
  42. 42. Making Comics
  43. 43. “I can take any empty space and call it a bare stage. A man walks across this empty space whilst someone else is watching him, and this is all that is needed for an act of theatre to be engaged. “ - Peter Brook, The Empty Space Simplicity
  44. 44. Content How to craft Data-Stories?
  45. 45. Data Art for visual expression, delight (and impact) e.g. Infographics Exhibition | Expression
  46. 46. Source: Aaron Koblin Exhibition
  47. 47. Data Tool for engagement, exploration and discovery Exploration | Interactive
  48. 48. Source: Gramener Exploration
  49. 49. Data Stories for telling a specific and (linear) visual narrative Explanatory | Narrative
  50. 50. Source: Hans Rosling | Joy of Stats Explanatory
  51. 51. Word Writer Note Frame Musician Film Maker | | | Basic Element Data Artist|Datum
  52. 52. ??? ??? ??? ??? Datum Data-Stories
  53. 53. 1 6 11 16 21 2 7 12 17 22 3 8 13 18 23 4 9 14 19 24 5 10 15 20 25
  54. 54. 4 16 1 13 6 11 21 2 7 12 17 22 3 8 18 23 9 14 19 24 5 10 15 20 25
  55. 55. See the Data Show the Visual Tell the Story Engage the Audience Datum Data-Stories
  56. 56. See the Data Pattern Deviation Outlier Trend Data Abstraction
  57. 57. Anscombe’s Quartet x1 y1 x2 y2 x3 y3 x4 y4 10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58 8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76 13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71 9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84 11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47 14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04 6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25 4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50 12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56 7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
  58. 58. Anscombe’s Quartet x(mean) = 9 y(mean) = 7.5 x(var) = 11 y(var) = 4.12 y = 3.00 + 0.500 x
  59. 59. Anscombe’s Quartet
  60. 60. Building Ability to See Hypothesis-driven Approach a.k.a Educated guesses based on experience, knowledge & intuition
  61. 61. See the Data Pattern Deviation Outlier Trend Data Abstraction
  62. 62. Show the Visual Framing Transition Visual Representation
  63. 63. Visual Perception
  64. 64. Visual Perception Iconic Pre-attentive <1s Fast Temporary Unconscious In-device Working Attentive <1-3s Medium Temporary Conscious RAM Long-term Attentive Long Permanent Deliberate SSD
  65. 65. Length Size Orientation Hue Width EnclosureShape PositionIntensity
  66. 66. How big is the 2nd circle?
  67. 67. Source: WTF Visualizations Avoid Chart Junk
  68. 68. Representation Matters Source: South China Post
  69. 69. Single Frame Dominates Source: Walmart & Target Store Expansion
  70. 70. Establish & Focus Source: OECD Better Life Consistent Visual Framework
  71. 71. Establish & Focus Source: OECD Better Life
  72. 72. See the Data Pattern Deviation Outlier Trend Data Abstraction
  73. 73. Show the Visual Framing Transition Visual Representation
  74. 74. Tell the Story Ordering & Structure Messaging (Verbal & Text) Point of View Relatability TRF JQL VWX DFR RGT DEF ZEF LXR
  75. 75. Integrate Text & Graphics
  76. 76. Stories through Annotation Source: Napolean’s Campaign
  77. 77. Linear Narrative Source: Pitch Interactive
  78. 78. Source: Hans Rosling | Joy of Stats Power of Verbal Messaging
  79. 79. Idea-driven Mileu-driven Character-driven Event-driven
  80. 80. See the Data Pattern Deviation Outlier Trend Data Abstraction
  81. 81. Show the Visual Framing Transition Visual Representation
  82. 82. Tell the Story Ordering & Structure Messaging (Verbal & Text) Point of View Relatability TRF JQL VWX DFR RGT DEF ZEF LXR
  83. 83. Engage the Audience TRF JQL VWX DFR RGT DEF ZEF LXR Emotion Takeaway Interactivity
  84. 84. Source: Working Capital Profiler Build your own story
  85. 85. Source: Wealth Inequality Emotions are key
  86. 86. Source: Libor Scandal Emotions
  87. 87. “I think the trick with knowledge is to “acquire it, and forget all except the perfume” —  because it is noisy and sometimes drowns out one’s own “brain voices”. The perfume part is important because it will help find the knowledge again to help get to the destinations the inner urges pick. ” — Alan Kay’s advice to Bret Victor Create your own Path
  88. 88. Amit Kapoor @amitkaps Partner, narrativeVIZ Consulting amit@narrativeviz.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×