Presentation detailing data visualisation concepts and practices data visualisation. Covering history, the importance of narrative, basic visual grammar, gestalt principles and infographics.
2. WHAT WE’LL COVER
● A Brief History of Data Visualisation
● Why Visualize Data?
● What Does Your Data Say?
● The Importance of Narrative
● Visual Grammar & Gestalt Principles
● Infographics
● Some Simple (but effective) Visualisations
● Taking it to the Next Level
Graphs, basically...right?
3. A WORKING DEFINITION
Graphs, basically...right?
Data visualization is a general term that
describes any effort to help people
understand the significance of data by
placing it in a visual context.
4. A BRIEF HISTORY OF DATA VISUALISATION
Graphs, basically...right?
Babylonian World Map
600BC
Ptolemy’s world map
2nd century AD
CELESTIAL POSITIONS
950AD
5. A BRIEF HISTORY OF DATA VISUALISATION
Graphs, basically...right?
Millwright
Engineer
Draftsman
Accountant
Silversmith
Merchant
investment broker
Economist
Statistician
Pamphleteer
Translator
Publicist
Land speculator
Convict
Banker
Ardent royalist
Editor
Blackmailer
JournalistWILLIAM
PLAYFAIR
SCOUNDREL! SCOTSMAN! GENIUS!
6. A BRIEF HISTORY OF DATA VISUALISATION
Graphs, basically...right?
William Playfair
● Lived 1759 - 1823
● Ran many failed businesses
● Stormed the Bastille in 1789
● Inventor of:
➢ Line chart
➢ Bar graph
➢ Area Chart
➢ Pie chart
A Priestley Timeline Chart (circa 1765)
Playfair Bar Chart
(Scottish imports / exports 1781)
Playfair Pie Chart
(Turkish Empire Across Continents)
7. WHY VISUALIZE DATA?
Graphs, basically...right?
● Humans are visual creatures
■ We evolved to see things and make decisions; 30-50% of the
brain is devoted to visual processing
■ We can communicate ideas quickly and simply because our
brains work this way
■ It is easy to engage and influence an audience through the
visual medium
● Data can be complicated
■ Visualisation translates the complicated to the simple
■ Most datasets are useless in their raw form
■ In tests, subjects performed 300% better when learning with
images compare to without
● Revelation!
■ Successful data visualisations can reveal something we
didn’t know, or didn’t expect
■ A good visualisation teaches the audience something, not
simply confirms an idea
8. WHY VISUALIZE DATA?
Graphs, basically...right?
No. of Unique Words Used Within Hip-Hop Artist’s First 35,000 Lyrics
9. WHAT DOES YOUR DATA SAY?
Graphs, basically...right?
Having (good) data is only the first step; what
story do you want to tell with it? Generally, this
will fall into one of four categories:
● How much / what percent (quantities)
● Trends (time)
● Correlations (comparison)
● Geography (place)
10. THE IMPORTANCE OF NARRATIVE
Graphs, basically...right?
“If history were taught in the form of stories, it would
never be forgotten.” - Rudyard Kipling
● Data isn’t always intrinsically interesting. By
presenting it as a story it engages people and
will stay with them
● How data is presented becomes a response to
the necessities of the narrative
11. THE IMPORTANCE OF NARRATIVE
Graphs, basically...right?
NARRATIVE
Articles about Subject B
have become of core
interest to our readers in
the past six months.
12. THE IMPORTANCE OF NARRATIVE
Graphs, basically...right?
Think about your audience and what narrative suit
their expertise and needs. They can be thought of in
four groups:
● Watercooler (The Novice)
● Cafe (The Generalist)
● Library (The Manager)
● The Lab (The Executive)
13. THE IMPORTANCE OF NARRATIVE
Graphs, basically...right?
Peak Breakup Times on Facebook
14. VISUAL GRAMMAR & GESTALT PRINCIPLES
Graphs, basically...right?
There are techniques and methods to assist you in grabbing
your reader’s attention:
● Colour and Shape
● Proximity and Similarity
● Parallelism
● Common Fate
● Closure and Continuity
16. VISUAL GRAMMAR & GESTALT PRINCIPLES
Graphs, basically...right?
Figure / Ground
We perceive the thing at bottom as being in the foreground
17. VISUAL GRAMMAR & GESTALT PRINCIPLES
Graphs, basically...right?
Proximity Similarity
Things close to each other have some relation Things of a similar quality to each other have some relation
18. VISUAL GRAMMAR & GESTALT PRINCIPLES
Graphs, basically...right?
Parallelism
Things that are parallel have some relation to each
other; those that aren’t are different
21. VISUAL GRAMMAR & GESTALT PRINCIPLES
Graphs, basically...right?
Common Fate
Things that move together have share some commonality
22. VISUAL GRAMMAR & GESTALT PRINCIPLES
Graphs, basically...right?
Closure
The brain sees what isn’t there
Continuity
The brain allows you to see the continuous shape
25. SOME SIMPLE (BUT EFFECTIVE) VISUALISATIONS
Graphs, basically...right?
Although fancy and visually impactful visualisations are desirable, sometime we don’t have the time
or resource to get these done. Then what?
There’s nothing wrong with a simple bar graph or pie chart either...
26. Graphs, basically...right?
TAKING IT TO THE NEXT LEVEL
“But how do we create the fancy stuff?”
● Tableau
● Visually
● D3.js
● Gephi
● Sisense
● Good Data
● ...and don’t forget Cxense and
Google Analytics!
27. Graphs, basically...right?
KEY POINTS
● Data visualization is a general term that describes any effort to help people
understand the significance of data by placing it in a visual context.
● A story told through data will engage and entice your audience.
● Let the data inform you how it should be presented.
● The quality of your data will be reflected in your visualisations.
● Who your audience is is key to how to you visualise the data.
● Following simple visual rule can have huge impact on your audience.
● Not every visualisation needs to be a work of art
● AUDIENCE! AUDIENCE! AUDIENCE!
29. LINKS
Graphs, basically...right?
The Largest Vocabulary in Hip-Hop
If the Moon were only One Pixel
Information Is Beautiful: Peak Breakup Times on Facebook
Flag Stories - What Do Flag Colours Symbolise?
Every shot Kobe Bryant ever took. All 30,699 of them
The Cosmic Web
Spurious Correlations
Gestalt Principles
Your Brain on Beer vs. Coffee [Infographic]
How Well Do You Know Your Shit? [Infographic]
What are the Hardest Languages to Learn? [Infographic]
Tableau
Visually
D3.js
Gephi
Sisense
Good Data