guidelines for effective data visualisation · guidelines for effective data visualisation...
TRANSCRIPT
![Page 1: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/1.jpg)
Guidelines for effectivedata visualisation
Direction Access to and Reuse of Public Information
Unit EU Open Data and CORDIS
Sector EU Open Data
![Page 2: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/2.jpg)
The context
This training course is organized in the scope of OP project within the
ISA2 programme
ISA2 supports the development of digital solutions enabling public administrations,
businesses and citizens in Europe to benefit from interoperable cross-border and cross-
sector public services.
How OP is involved in ISA2?
OP is aiming at developing open data related activities in the areas of:
Data visualisation
Linked open data
Persistent identification
![Page 3: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/3.jpg)
Upcoming training & workshop sessions
TopicType of
session
Lux
+ webexBxl
Garbage in, garbage out: how to assure data
quality for visualisation
Training 30/04 13/05
Exploratory data analysis through data visualisation
(R-ggplot)
Training 24/05 04/06
Telling your story through data visualisation Training 25/06 28/06
Making great online data visualisations without
coding
workshop 26/06 -
Going beyond bars and lines: practising non-
standard data visualisation
Training 24/09 Sep-Oct
Making data visualisations like a pro: D3.js Workshop 25/09 -
Applying data visualisation best practices in real
use cases
workshop 24/10 -
and webinars (topic like for the trainings) … stay tuned!
Materials will be published on https://data.europa.eu/euodp/en/knowledge-center
![Page 4: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/4.jpg)
![Page 5: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/5.jpg)
Data visualization events in 2019
EU DataViz 2019 – Data Visualisation for the Public Sector
• Date: 12 November 2019
• Venue: European Convention Center - Luxembourg
• Website: https://publications.europa.eu/eudataviz
• e-mail: [email protected]
EU Datathon 2019
• Date: 13 June 2019
• Venue: Residence Palace - Brussels
• Website: https://publications.europa.eu/eudatathon
• e-mail: [email protected]
![Page 6: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/6.jpg)
Agenda
Introduction
Fundamentals and concepts of design
Coffee break
Fundamentals of data visualisation
Lunch
Choosing a chart type
Text-chart integration
Coffeebreak
Pitfalls to avoid
The Data Visualisation Checklist
Q&A
09:00
10:30
12:00 – 13:00
14:30
16:30
![Page 7: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/7.jpg)
INTRODUCTION
1.
![Page 8: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/8.jpg)
Participants
Institution/DG and role?
What data do you work with?
Experience in data visualisation?
Expectations for today?
![Page 9: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/9.jpg)
FUNDAMENTALS
2.
![Page 10: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/10.jpg)
Fundamentals
Gestalt
The whole is
something else than
the sum of its parts
![Page 11: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/11.jpg)
Gestalt
Similarity
![Page 12: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/12.jpg)
Gestalt
Proximity
![Page 13: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/13.jpg)
Gestalt
Enclosure
![Page 14: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/14.jpg)
Gestalt
Figure-ground
![Page 15: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/15.jpg)
CONCEPTS OF DESIGN
3.
![Page 16: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/16.jpg)
"Graphic designers create and combine symbols,
images and text to form visual representations of
ideas and messages. They use typography, visual
arts and page layout techniques to create visual
compositions."- Wikipedia
"Perfection is achieved, not when there is nothing
more to add, but when there is nothing more to take
away."
- Antoine de Saint Exupéry
"Content precedes design. Design in the absence of
content isn't design, it's decoration"
- Jeffrey Zeldman
![Page 17: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/17.jpg)
Framework to structure
content
Columns, rows and gutters
Widely used
Both in print and in web
design
Concepts of design
The grid
![Page 18: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/18.jpg)
Almost all publication
software has some kind of
grid settings.
12 is a popular number of
columns in grids.
What do you think is the
reason for that?
Concepts of design
The grid
![Page 19: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/19.jpg)
Why use the grid?
Grids align
Grids organize
Grids are flexible
Grids make readable
Broken grids are dynamic
Broken grids draw attention
Can be applied everywhere
Let you use the rule of thirds
Concepts of design
The grid
![Page 20: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/20.jpg)
Align visualisations to the grid of the
publication
Align elements of a chart
Guidelines
Concepts of design
The grid
![Page 21: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/21.jpg)
![Page 22: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/22.jpg)
Hierarchy — it’s a big word, but an easy-to-implement (albeit
important) concept when it comes to typography. And this guide will
show you how to use it to improve your design projects. Even if
you’re not familiar with the term, you’ve likely run into typographic
hierarchy many times. Just picture in a newspaper, with a headline,
subheadline, and body copy. This is a classic example of three levels
of typographic hierarchy, an approach that’s still used today, both
in print and online. Newspapers from the early- to mid-20th century
offer especially exaggerated examples, like this one. These days,
our headlines or titles don’t have to be six inches tall to catch
readers’ attention, but the image above provides a dramatic
reminder of just what typographic hierarchy is all about —organizing
and formatting your type choices in such a way that readers or users
can clearly see what’s most important, which enables them to easily
navigate the layout at a glance and quickly scan to find the
information they’re looking for.
Does this text
invite you to
read it?
Concepts of design
Hierarchy
![Page 23: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/23.jpg)
Does this text
invite you to
read it?
Hierarchy — it’s a big word, but an easy-to-implement (albeit
important) concept when it comes to typography. And this guide will
show you how to use it to improve your design projects.
Even if you’re not familiar with the term, you’ve likely run into
typographic hierarchy many times. Just picture in a newspaper,
with a headline, subheadline, and body copy. This is a classic
example of three levels of typographic hierarchy, an approach
that’s still used today, both in print and online. Newspapers from
the early- to mid-20th century offer especially exaggerated
examples, like this one.
These days, our headlines or titles don’t have to be six inches tall to
catch readers’ attention, but the image above provides a dramatic
reminder of just what typographic hierarchy is all about —organizing
and formatting your type choices in such a way that readers or users
can clearly see what’s most important, which enables them to easily
navigate the layout at a glance and quickly scan to find the
information they’re looking for.
Concepts of design
Hierarchy
![Page 24: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/24.jpg)
Does this text
invite you to
read it?
HIERARCHY — it’s a big word, but an easy-to-
implement (albeit important) concept when it comes
to typography. And this guide will show you how to
use it to improve your design projects.
Even if you’re not familiar with the term, you’ve likely run into
typographic hierarchy many times. Just picture a newspaper, with a
headline, subheadline, and body copy. This is a classic example of
three levels of typographic hierarchy, an approach that’s still used
today, both in print and online. Newspapers from the early- to mid-
20th century offer especially exaggerated examples, like this one.
Make it scannable
These days, our headlines or titles don’t have to be six inches tall to
catch readers’ attention, but the image above provides a dramatic
reminder of just what typographic hierarchy is all about —organizing
and formatting your type choices in such a way that readers or users
can clearly see what’s most important, which enables them to easily
navigate the layout at a glance and quickly scan to find the
information they’re looking for.
Concepts of design
Hierarchy
![Page 25: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/25.jpg)
Concepts of design
Hierarchy
![Page 26: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/26.jpg)
How is the visual hierarchy
built up here?
Concepts of design
Hierarchy
![Page 27: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/27.jpg)
Font size is the one of the
strongest signals in the
visual hierarchy
It goes without saying that font size matters
The biggest letters
get the most
attention
Concepts of design
Hierarchy
![Page 28: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/28.jpg)
Font weight Weight
Weight
Weight
Concepts of design
Hierarchy
![Page 29: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/29.jpg)
Letter spacing Spacing
Spacing
Spacing
Concepts of design
Hierarchy
![Page 30: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/30.jpg)
Visual hierarchy in data
visualisation
Color
Stroke and stroke width
Opacity
Size
Concepts of design
Hierarchy
![Page 31: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/31.jpg)
Visual hierarchy in
data visualisation
The data is the most important element:
it should be high in the visual hierarchy
Supportive elements, like axes and axes
labels, should retreat to the background
Font sizes of text elements should reflect
the hierarchy
Concepts of design
Hierarchy
![Page 32: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/32.jpg)
Concepts of design
Typography
Sans serif:
• Simplicity
• Modern
• Minimal
• Screens
Serif:
• Traditional
• Ease of reading
• Body text
Sans serif
Serif
Serif
![Page 33: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/33.jpg)
![Page 34: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/34.jpg)
Stop
![Page 35: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/35.jpg)
![Page 36: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/36.jpg)
![Page 37: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/37.jpg)
![Page 38: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/38.jpg)
Comic SansPapyrusHandwritten
Times New Roman
Arial
Concepts of design
Typography
Avoid playful and
"dated" fonts
![Page 39: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/39.jpg)
A sans-serif title
Aenean vitae volutpat dolor, id porttitor felis. Nulla tempor quis nislvel
accumsan. Donec ornare mollis ornare. Duis porta augue erat,
investibulum lorem rutrum quis.
Vestibulum vel velit ut augue euismodeleifend sit amet ut orci.
Maecenas varius dictum metus, quis varius duiiaculis id.
A serif title
Aenean vitae volutpat dolor, id porttitor felis. Nulla tempor quis nislvel
accumsan. Donec ornare mollis ornare. Duis porta augue erat, investibulum
lorem rutrum quis.
Vestibulum vel velit ut augue euismodeleifend sit amet ut orci. Maecenas
varius dictum metus, quis varius duiiaculis id.
Combine serif and
sans-serif for body
and headings
Avoid playful and
"dated" fonts
Concepts of design
Typography
![Page 40: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/40.jpg)
![Page 41: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/41.jpg)
You can mix serif and sans-serifs, for example for the chart title versus data labels
Space for text is usually limited on charts, so you could consider a condensed font or reduce the letter spacing
Choose a font that fits your publication and the topic
For numbers, use a monospaced font with lining
Typography in data
visualisation
Concepts of design
Typography
![Page 42: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/42.jpg)
Concepts of design
Color
Colors have feelings
Is red good or bad?
What is happier: yellow or
grey?
Do you want your banker
to wear a blue or an
orange suit?
Is it fresh or fresh?
![Page 43: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/43.jpg)
Let colors make
sense
Banana
Tomato
Orange
Grass
Concepts of design
Color
![Page 44: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/44.jpg)
Color harmonies:
• Analogous
• Monochromatic
• Complementary
• Triad
Get inspired by art you
love
Adobe color wheel
Concepts of design
Color
![Page 45: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/45.jpg)
Contrast is the difference
in the color and
brightness between an
object and its
surroundings
Contrast determines
legibility of text
Colorable
Concepts of design
Color
![Page 46: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/46.jpg)
Contrast determines
legibility, not only for
text but also for visual
elements in your
visualization
Optimised color palettes:
ColorBrewer
Viz Palette
Concepts of design
Color
![Page 47: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/47.jpg)
Guidelines Avoid colors and color schemes with strong
connotations or cliche color schemes
Let colors make sense
Use color consistently
Use tools to pick harmonious color palettes
Assure enough contrast
Think about color blindness
Concepts of design
Color
![Page 48: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/48.jpg)
Concepts of design
Negative space
Can you see it?
![Page 49: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/49.jpg)
Concepts of design
Negative spaceHierarchy — it’s a big word, but an easy-to-implement (albeit
important) concept when it comes to typography. And this guide will
show you how to use it to improve your design projects. Even if
you’re not familiar with the term, you’ve likely run into typographic
hierarchy many times. Just picture a newspaper, with a headline,
sub-headline, and body copy. This is a classic example of three
levels of typographic hierarchy, an approach that’s still used today,
both in print and online. Newspapers from the early- to mid-20th
century offer especially exaggerated examples, like this one. These
days, our headlines or titles don’t have to be six inches tall to catch
readers’ attention, but the image above provides a dramatic
reminder of just what typographic hierarchy is all about —organizing
and formatting your type choices in such a way that readers or users
can clearly see what’s most important, which enables them to easily
navigate the layout at a glance and quickly scan to find the
information they’re looking for.
![Page 50: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/50.jpg)
Concepts of design
Negative spaceHierarchy — it’s a big word, but an easy-to-implement (albeit
important) concept when it comes to typography. And this guide
will show you how to use it to improve your design projects.
Even if you’re not familiar with the term, you’ve likely run into
typographic hierarchy many times. Just picture a newspaper, with a
headline, sub-headline, and body copy. This is a classic example of
three levels of typographic hierarchy, an approach that’s still used
today, both in print and online. Newspapers from the early- to mid-
20th century offer especially exaggerated examples, like this one.
Make it scannable
These days, our headlines or titles don’t have to be six inches tall to
catch readers’ attention, but the image above provides a dramatic
reminder of just what typographic hierarchy is all about —organizing
and formatting your type choices in such a way that readers or users
can clearly see what’s most important, which enables them to easily
navigate the layout at a glance and quickly scan to find the
information they’re looking for.
![Page 51: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/51.jpg)
Concepts of design
Negative space Hierarchy — it’s a big word, but an easy-to-implement (albeit important)
concept when it comes to typography. And this guide will show you how to
use it to improve your design projects.
Even if you’re not familiar with the term, you’ve likely run into typographic
hierarchy many times. Just picture a newspaper, with a headline, subheadline,
and body copy.
This is a classic example of three levels of typographic hierarchy, an approach
that’s still used today, both in print and online. Newspapers from the early- to
mid-20th century offer especially exaggerated examples, like this one.
Make it scannable
These days, our headlines or titles don’t have to be six inches tall to catch
readers’ attention, but the image above provides a dramatic reminder of just
what typographic hierarchy is all about —organizing and formatting your type
choices in such a way that readers or users can clearly see what’s most
important, which enables them to easily navigate the layout at a glance and
quickly scan to find the information they’re looking for.
Negative space:
• Increases legibility
• Easier on the eye
• Guides attention
Use negative space
(whitespace) to let your
visualisation breath
![Page 52: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/52.jpg)
Concepts of design
The grid
Hierarchy
Fonts
Color
Negative space
![Page 53: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/53.jpg)
FUNDAMENTALS OF DATA
VISUALISATION
4.
![Page 54: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/54.jpg)
Preattentive features
Color
![Page 55: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/55.jpg)
Preattentive features
Size
![Page 56: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/56.jpg)
Preattentive features
Position
![Page 57: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/57.jpg)
Preattentive features
Rotation
![Page 58: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/58.jpg)
Preattentive features
Shape
![Page 59: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/59.jpg)
Data visualisation is
mapping data to
color
size
position
rotation
shape
so we can go from interpreting numbers to
spotting patterns immediately
![Page 60: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/60.jpg)
Gestalt
Similarity
![Page 61: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/61.jpg)
Gestalt
Proximity
![Page 62: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/62.jpg)
Gestalt
Enclosure
![Page 63: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/63.jpg)
Gestalt:
Figure-ground
![Page 64: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/64.jpg)
Gestalt:
Figure-ground
![Page 65: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/65.jpg)
Gestalt:
Figure-ground
![Page 66: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/66.jpg)
Excercise
Data encodings
9 16
Exercise:
How can you represent 2
numbers?
![Page 67: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/67.jpg)
![Page 68: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/68.jpg)
Fundamentals of
data visualisation
Encodings
Some encodings are
more effeciently
decoded by the reader
![Page 69: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/69.jpg)
CHART CHOOSERS
5.
![Page 70: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/70.jpg)
Chart choosers
Visual Vocabulary
By the Financial Times
![Page 72: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/72.jpg)
Exercise
Choosing a chart type
Country Year GDP/capita
Belgium 2008 30100
Bulgaria 2008 11100
… … …
Sweden 2017 36300
UK 2017 31600
Dataset:
• yearly gdp/capita,
2008-2017
• By EU country
In what different ways
could you visualise this
data?
For what kind of story or
message would you choose
one over the other?
![Page 73: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/73.jpg)
Chart choosers
Chartmaker
Directory
By Andy Kirk and the
visualisation community
![Page 74: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/74.jpg)
TEXT AND VISUALISATION
INTEGRATION
6.
![Page 75: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/75.jpg)
Text – visualisation
integration
Text on charts
Titles (or at least units)
are needed to interpret a
visualisation
Datalabels provide
hierarchy: not all data
points are equally
important
![Page 76: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/76.jpg)
Text – visualisation
integration
Text on charts
A descriptive title tells the
story
Optional subtitle can give
details and metadata
Source and credits make
the chart selfcontained
![Page 77: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/77.jpg)
Text – visualisation
integration
Text on charts
Annotations make the
reader focus and tell the
story even more
![Page 78: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/78.jpg)
Text – visualisation
integration
Text on charts
Tell the message of the chart in the title
Optional subtitle
Always specify the units of the data
Use data labels to indicate hierarchy
Use annotations to tell the story
Make your visualisation self contained: data
source, author/graphic source
![Page 79: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/79.jpg)
Text – visualisation
integration
In publication
Keep charts on the same page as their
reference in the text
Don’t repeat the message
Don’t contradict the message
Reinforce: explain in the text, show with a
visualisation
![Page 80: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/80.jpg)
Text – visualisation
integration
The medium
Make sure scaled text is legible on all screens
Maximum size for big screens
Use a resolution that is high enough, also for HD
screens
Keep fluid integration in mind: chart can be to
the side of the reference, but also above or
below
Consider flipping the chart orientation on small
screens
Online
![Page 81: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/81.jpg)
![Page 82: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/82.jpg)
![Page 83: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/83.jpg)
Text – visualisation
integration
The medium
Boil the message down (space is limited)
Fixed integration: you can be creative
Paper
![Page 84: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/84.jpg)
![Page 85: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/85.jpg)
Text – visualisation
integration
The medium
Use big font sizes
Use horizontal chart orientation
Slides
![Page 86: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/86.jpg)
PITFALLS IN DATA
VISUALISATION
7.
![Page 87: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/87.jpg)
Pitfalls in data
visualisation
What is going wrong here?
Don’t cut barts
Make text run horizontal
![Page 88: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/88.jpg)
Pitfalls in data
visualisation
What is going wrong here?
Don’t cut time axes
![Page 89: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/89.jpg)
Pitfalls in data
visualisation
What can go wrong here?
Label directly
![Page 90: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/90.jpg)
Pitfalls in data
visualisation
![Page 91: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/91.jpg)
Pitfalls in data
visualisation
Use colors deliberately
Use colors hierarchically
(make grey your best
friend)
![Page 92: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/92.jpg)
Pitfalls in data
visualisation
Is this a good chart?
Be careful with "chart
junk"
![Page 93: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/93.jpg)
![Page 94: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/94.jpg)
![Page 95: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/95.jpg)
![Page 96: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/96.jpg)
Pitfalls in data
visualisation
Widht-to-height ratio
Axes that encode data should have enough space to show the data
![Page 97: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/97.jpg)
Pitfalls in data
visualisation
What is wrong here?
![Page 98: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/98.jpg)
Pitfalls in data
visualisation
Scale circles by area,
not radius
![Page 99: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/99.jpg)
Pitfalls in data
visualisation
What’s going on here?
![Page 100: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/100.jpg)
Pitfalls in data
visualisation
What’s going on here?
![Page 101: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/101.jpg)
Pitfalls in data
visualisation
What’s going on here?
Don’t double the axis
![Page 102: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/102.jpg)
Pitfalls in data
visualisation
What’s going on here?
Be careful with
scatterplots,
correlation is not
causation
![Page 103: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/103.jpg)
What’s going on here?
Don’t do 3D
Pitfalls in data
visualisation
![Page 104: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/104.jpg)
Pitfalls in data
visualisation
Sort on the data
![Page 105: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/105.jpg)
Pitfalls in data
visualisation
Countries by gdp
![Page 106: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/106.jpg)
Ireland, Netherlands and Austria
are the richest EU countries
Pitfalls in data
visualisation
Tell the story
![Page 107: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/107.jpg)
Do you think this a good chart?
Pitfalls in data
visualisation
![Page 108: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/108.jpg)
Pitfalls in data
visualisation
One message, one chart
![Page 109: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/109.jpg)
Pitfalls in data
visualisation
Alternative: small
multiples
![Page 110: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/110.jpg)
Pitfalls in data
visualisation
Ozone concentrations
in the northern
hemisphere: a clear
front between the
yellow and the green
areas?
![Page 111: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/111.jpg)
Pitfalls in data
visualisation
Sometimes the patterns
are in the color scale, not
in the data
Use perceptually uniform
color scales for encoding
numbers with color
![Page 112: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/112.jpg)
Pitfalls in data
visualisation
More arguments against
rainbow color scales
![Page 113: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/113.jpg)
Pitfalls in data
visualisation
More arguments against
rainbow color scales
![Page 114: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/114.jpg)
Pitfalls in data
visualisation
More arguments against
rainbow color scales
![Page 115: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/115.jpg)
Pitfalls in data
visualisation
More arguments against
rainbow color scales
![Page 116: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/116.jpg)
Pitfalls in data
visualisation
More arguments against
rainbow color scales
#Endrainbow
![Page 117: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/117.jpg)
Pitfalls in data
visualisation
![Page 118: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/118.jpg)
Pitfalls in data
visualisation
Scale numbers on the map
![Page 119: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/119.jpg)
Pitfalls in data
visualisation
What’s wrong here?
All maps lie, especially
Mercator world maps
![Page 120: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/120.jpg)
THE DATAVIZ CHECKLIST
8.
![Page 121: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/121.jpg)
The Dataviz
Checklist
datavizchecklist.stephanieevergreen.com
For effective communication of data with
visualisations
Evaluate your work or others work and learn
the guidelines
Evaluate a chart, based on
25 guidelines
![Page 122: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/122.jpg)
![Page 123: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/123.jpg)
Q&A
![Page 124: Guidelines for effective data visualisation · Guidelines for effective data visualisation Direction Access to and Reuse of Public Information ... arts and page layout techniques](https://reader035.vdocuments.mx/reader035/viewer/2022081512/5ee014c6ad6a402d666b551a/html5/thumbnails/124.jpg)
Resources
Gestalt
interaction-design.org/literature/article/the-law-of-similarity-
gestalt-principles-1
daydreamingnumbers.com/concepts/gestalt-laws-data-
visualization
medium.com/@Elijah_Meeks/gestalt-principles-for-data-
visualization-59f18f20bd40
Grid
15 reasons Why a Grid Based Design Will Improve Your Designs
Visual hierarchy
gistbok.ucgis.org/bok-topics/visual-hierarchy-and-layout
Typography for numbers
invisionapp.com/inside-design/best-free-fonts-for-numbers/
Preattentive Attributes
daydreamingnumbers.com/blog/preattentive-attributes-example/
Pitfalls in visualisation
data-to-viz.com/caveats.html
geckoboard.com/learn/data-literacy/data-visualization-tips/
Tools
Color wheel
Visual Vocabulary
Dataviz Project
Chartmaker Directory
Viz Palette
Blogs
Datawrapper Weekly Chart
Financial Times Chart Doctor (paywall)
Books
The Functional Art (Alberto Cairo)
Effective Data Visualization (Stephanie Green)
Data Points (Nathan Yau)