Creative representation of invisible data
"Discover: to obtain knowledge or sight of what was not known."
Fabio Franchino - todo.to.it - May 2014 - [email protected]
Slide 2
Slide 2 text
What is Data?
Slide 3
Slide 3 text
This slide intentionally left blank
Slide 4
Slide 4 text
Data Visualization:
visual representation of abstract information
that exploits our visual perception abilities
in order to amplify cognition
Slide 5
Slide 5 text
Basic Visualization
It doesn’t allow to identify patterns.
Slide 6
Slide 6 text
Why pattern?
Humans are intensely visual creatures.
Patterns can express meaning.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Visual patterns can be surprisingly.
It can reveal hidden informations.
Slide 13
Slide 13 text
Radiations of a microwave oven
Slide 14
Slide 14 text
How to create patterns from raw data?
The act of mapping information to visual elements.
Slide 15
Slide 15 text
FatFont: a proportional correlation between the value and the ink
http://fatfonts.org/
Slide 16
Slide 16 text
Purposes
"The purpose of visualization is insight, not pictures"
Ben Shneiderman
Visualization is a powerful tool to
discover, understand and present
hidden stories
Slide 19
Slide 19 text
Discover:
In 1973, Anscombe's quartet dataset.
Nearly identical simple statistical properties, yet appear very different when graphed.
http://en.wikipedia.org/wiki/Anscombe's_quartet
Slide 20
Slide 20 text
Presentation:
1. Communicate:
clearly and effectively
!
2. Stimulate:
engadge the viewer attention
Slide 21
Slide 21 text
We need a Language to
explain the world, tell stories, point specific facts and objects,
elaborate ambiguous messages, defend arguments,
attack arguments and carry ideas and ideologies
Slide 22
Slide 22 text
1
2
3
4
5
6
7
8
16
17
18
19
20
21
22
23
31
32
33
34
35
36
37
38
75, 37 multiple ways to communicate two quantities
75 37
37
75
0
37
75
0
37
75
a
a
a
a
b
b
b c
a b
a b
a b
a b
a b
c
b
c
75, 37
a b
c
Slide 23
Slide 23 text
In charts, junk elements are those elements that can be removed without
modify the meaning of the intention of the graph.
"Every single pixel should testify directly to content"
– Edward Tufte
Slide 24
Slide 24 text
Early days
Slide 25
Slide 25 text
William Playfair | Scotland's imports and exports (1786)
First quantitative
graphical form.
Slide 26
Slide 26 text
Nicole Oresme | "The Latitude of Forms" (14th century)
Plot velocity over time
Slide 27
Slide 27 text
William Playfair | Turkish Empire (1789)
Inventor of Pie chart
From his Statistical Breviary
Proportion of Turkish Empire
Slide 28
Slide 28 text
William Playfair | Exports and Imports of Denmark and Norway (1786)
Revenues and Debts of
England commerce
Slide 29
Slide 29 text
E.J. Marey | Train Schedule Paris-Lion (1880)
Slide 30
Slide 30 text
Emma Willard | Picture of Nation: (1835)
Slide 31
Slide 31 text
John Snow | Communication of Cholera (1854)
Slide 32
Slide 32 text
Francis Walker | Principal Constituent Elements (1874)
Slide 33
Slide 33 text
Walter Houghton | Conspectus of the History of Political Parties (1880)
Slide 34
Slide 34 text
Charles Minard | Map of Napoleon’s March (1869)
Slide 35
Slide 35 text
Dmitri Mendeleev | Periodic Table of Elements (1869)
Slide 36
Slide 36 text
Failed attempts
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Cost of Local Councillors
http://www.linkiesta.it/costi-regioni-italia-consiglio
Slide 45
Slide 45 text
The Shift
The field has become less reserved for experts and less expensive
Slide 46
Slide 46 text
The science used visualization
as a tool for understanding data.
!
Now the same paradigms
belong also to the design culture
Slide 47
Slide 47 text
Artists and Designers have started to work with
data as raw material
!
They use the Data Visualization paradigm
to evoke particular emotions.
Slide 48
Slide 48 text
We need to define
what is a Beautiful and Effective
Visualization
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Principles
(Good Design - Dieter Rams)
Slide 52
Slide 52 text
Is innovative
The possibilities for innovation are not, by any means, exhausted. Technological development is
always offering new opportunities for innovative design. But innovative design always develops in
tandem with innovative technology, and can never be an end in itself.
Slide 53
Slide 53 text
Is useful
A product is bought to be used. It has to satisfy certain criteria, not only functional, but also
psychological and aesthetic. Good design emphasizes the usefulness of a product whilst
disregarding anything that could possibly detract from it.
Slide 54
Slide 54 text
Is aesthetic
The aesthetic quality of a product is integral to its usefulness because products are used every day
and have an effect on people and their well-being. Only well-executed objects can be beautiful.
Slide 55
Slide 55 text
Is understandable
It clarifies the product’s structure. Better still, it can make the product clearly express its function
by making use of the user's intuition. At best, it is self-explanatory.
Slide 56
Slide 56 text
Is unobtrusive
Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art.
Their design should therefore be both neutral and restrained, to leave room for the user's self-
expression.
Slide 57
Slide 57 text
Is long-lasting
It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it
lasts many years – even in today's throwaway society.
Slide 58
Slide 58 text
Is complete (to the last detail)
Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect
towards the consumer.
Slide 59
Slide 59 text
Is as little design as possible
Less, but better – because it concentrates on the essential aspects, and the products are not
burdened with non-essentials. Back to purity, back to simplicity.
Slide 60
Slide 60 text
Is honest
It does not make a product more innovative, powerful or valuable than it really is. It does not attempt
to manipulate the consumer with promises that cannot be kept.
“Making an evidence presentation is a moral act
as well as an intellectual activity”
Edward Tufte
Slide 61
Slide 61 text
With a great power
comes great RESPONSIBILITY*
!
*(the lie factor)
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
US representatives exploit their free mailing privileges to advance their re-election
campaigns
Slide 64
Slide 64 text
FOX
Slide 65
Slide 65 text
FOX (again)
Slide 66
Slide 66 text
FOX (again x 2)
Slide 67
Slide 67 text
Keynote’ Jobs Famous Pie
Slide 68
Slide 68 text
Finding stories
Slide 69
Slide 69 text
The greatest value of a picture is when it forces us
to notice what we never expected to see.
—John Tukey
Slide 70
Slide 70 text
Important stories live in our data.
Slide 71
Slide 71 text
The AOL case
RELEASED SEARCH DATA FOR ROUGHLY
658,000 ANONYMIZED USERS
OVER A THREE MONTH PERIOD FROM
MARCH TO MAY
Slide 72
Slide 72 text
how to kill your wife
how to kill your wife
wife killer
how to kill a wife
poop
dead people
pictures of dead people
killed people
dead pictures
dead pictures
dead pictures
murder photo
steak and cheese
photo of death
photo of death
death
dead people photos
photo of dead people
www.murderdpeople.com
decapatated photos
decapatated photos
car crashes3
car crashes3
car crash photo
The AOL case
The User 17556639 search history
Slide 73
Slide 73 text
The AOL case
http://www.nytimes.com/2006/08/09/technology/09aol.html?ex=1155787200&en=6c5dfa2a9c1be4ec&ei=5070&emc=eta1
Thelma Arnold recognized as user No. 4417749
Slide 74
Slide 74 text
The Google Oracle
http://www.fastcocreate.com/3029902/infographic-these-are-the-weirdest-things-thousands-of-people-google-every-month#1
Weirdest Things Thousands Of People Google Every Month
Slide 75
Slide 75 text
Succesful Visualizations
Visualizations that mean something
A History of the World in 100 Seconds
https://vimeo.com/19088241
Slide 94
Slide 94 text
OSM 2008: A Year of Edits
http://vimeo.com/2598878
Slide 95
Slide 95 text
The geography of Tweets | All geo-tagged Tweets since 2009
http://www.flickr.com/photos/twitteroffice/sets/72157633647745984/
Slide 96
Slide 96 text
Every Day Of My Life
http://marcinignac.com/projects/everyday-of-my-life/
Slide 97
Slide 97 text
WHAT DOES RANDOMNESS LOOK LIKE?
http://www.random-walk.com
Slide 98
Slide 98 text
Similar Diversity
http://similardiversity.net/project/
Slide 99
Slide 99 text
Exploratory
Slide 100
Slide 100 text
Salary vs Performance
http://fathom.info/salaryper/
Slide 101
Slide 101 text
Gun control in America: A state-by-state breakdown
http://www.theglobeandmail.com/news/world/gun-control-in-america-a-state-by-state-breakdown/article6465107/
Slide 102
Slide 102 text
Why Is Her Paycheck Smaller?
http://www.nytimes.com/interactive/2009/03/01/business/20090301_WageGap.html?_r=1&
Slide 103
Slide 103 text
The Evolution Of the Web
http://www.evolutionoftheweb.com/
Slide 104
Slide 104 text
The Jobless Rate for People Like You
http://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html
Slide 105
Slide 105 text
512 Paths to the White House
http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html?_r=0
Slide 106
Slide 106 text
Map of the Market
http://www.smartmoney.com/map-of-the-market/
Slide 107
Slide 107 text
Out of Sight, Out of Mind
http://drones.pitchinteractive.com/
Slide 108
Slide 108 text
Narrations
Slide 109
Slide 109 text
Water
http://www.angelamorelli.com/water/
Slide 110
Slide 110 text
NYTimes - Usain Bolt vs. 116 years of Olympic sprinters
http://www.nytimes.com/interactive/2012/08/05/sports/olympics/the-100-meter-dash-one-race-every-medalist-ever.html
Slide 111
Slide 111 text
New York's carbon emissions
http://carbonvisuals.com/work/new-yorks-carbon-emissions-in-real-time
Slide 112
Slide 112 text
Evolution of the F1 Car
https://vimeo.com/43233380
Slide 113
Slide 113 text
Just Landed
https://vimeo.com/4587178
Slide 114
Slide 114 text
GE - Powering the World
https://vimeo.com/36354487
Slide 115
Slide 115 text
We Feel Fine
http://www.wefeelfine.org
Slide 116
Slide 116 text
Light painting WiFi
https://vimeo.com/20412632
Slide 117
Slide 117 text
The Process
A combination of many disciplines
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
Iterations
Slide 121
Slide 121 text
The Process
1. ACQUIRE THE DATA
2. CONVERSION & CLEANING
3. VISUALIZE QUICKLY
4. FIND FACTS, ASK QUESTIONS
5. ITERATE
6. SKETCH VISUAL MODEL
7. DESIGN TONE OF VOICE, LOOK AND FEEL
8. ADD LAYERS (ANIMATION, TRANSITION, INTERACTIVITY)
Slide 122
Slide 122 text
Sum Up
Know your data
Know your data
Know your data
(no, it’s not a typo)
Explore your data visually
Think about your target audience
Determine the message
Let users to explore
Let users to learn something
Draw attention to relevant data
Avoid junk elements
Use narration when possible
Provoke emotions is a good thing
Cite your sources