LESSON 4
Data Visualization
Flowchart
Visual Variables
Colour theory
Types of charts
Rules and common mistakes
Visual Variables
Colour theory
Types of charts
Rules and common mistakes
Flowchart
- Diagrams.net — tool for drawing flowcharts.
- Flowcharts allow you to visually plan and track the execution of a code or function.
- Not for the external reader, but for you to avoid confusing your own actions.
- Read more on Wikipedia
Data Visualization
This is one of the last steps, when you work on a data-driven project. Before this step you should be ready to answer at least these questions:
1. What parameters do you want to visualize?
2. For what? What is the purpose? (eg. comparing two trends or highlighting top-5 values etc.)
3. What is the key idea of your visualization, what should the reader understand by looking at your chart?
Use the visualization when it helps to follow the principle:
"A picture is worth a thousand words"
1. What parameters do you want to visualize?
2. For what? What is the purpose? (eg. comparing two trends or highlighting top-5 values etc.)
3. What is the key idea of your visualization, what should the reader understand by looking at your chart?
Use the visualization when it helps to follow the principle:
"A picture is worth a thousand words"
Unlike visualizations for technical professions, where adherence to standards is important, media visualizations need to be clean, neat and tidy.
Statistician Edward Tufty came up with the Ink-Data Ratio, rule, which says that the less "ink" is used in a visualization, the better.
Learn more:
Visual Variables
Visual variables represent the ways we can perceive visual differences as differences in numerical values — the ways that data can be translated into pictures via design tools.
In other words, it is a set of ways in which data can be "translated" into a visual format using design tools.
Learn more:
Comparing
Visual Variables
Visual Variables
Rule: One data characteristic (column) — One visual variable.
Size:
Size:
- ✅ Good for quantitative data (numbers, eg. 2 cats vs 3 cats).
- ✅ Good for showing precise differences in data.
- ❌ Bad for qualitative data (groups, eg. black cats vs white cats).
Color hue:
- ✅ Good for qualitative data (groups, eg. black dogs vs white dogs).
- ❌ Bad for quantitative data (numbers, 2 dogs vs 3 dogs).
Color value:
- ✅ Good for approximate visual comparison, when the reader should get an overall perspective.
- ✅ Good for highlighting the most important data.
- ❌ Bad for showing precise differences in data.
Hue — different colours
Intensity — from the colourful spectrum
to the black & white one
Value — from the darkest shade
to the lightest one
Intensity — from the colourful spectrum
to the black & white one
Value — from the darkest shade
to the lightest one
Colour
Rule №1: The less colour hues the better.
The human eye can perceive at once up to 7 colours, but it is better to use up to 3 main colours and their values + grey as a neutral colour.
Rule №2: One category — one colour.
If you have a barchart with population by cities, the bars should be in one colour, because the population is already represented by the size of the bars, and the category is only one — cities.
Rule №3: The usage of colour hues should be consistent throughout the whole article.
If in one chart the dogs are blue and the cats are red, in the next chart they should also be blue and red — and not pink and yellow.
The human eye can perceive at once up to 7 colours, but it is better to use up to 3 main colours and their values + grey as a neutral colour.
Rule №2: One category — one colour.
If you have a barchart with population by cities, the bars should be in one colour, because the population is already represented by the size of the bars, and the category is only one — cities.
Rule №3: The usage of colour hues should be consistent throughout the whole article.
If in one chart the dogs are blue and the cats are red, in the next chart they should also be blue and red — and not pink and yellow.
Rule №4: Colours be chosen accordingly to the established cultural associations.
For example, red is considered the colour of good luck in China, but in English-speaking cultures, the colour of good luck is green. However, in China, a green headdress is a sign that a person is being cheated on.
Rule №5: Contrast is key.
Your chart should be intelligible even for a person with colour blindness.
Rule №6: Everything is not as it seems.
- Black - better not #111111, but a subtone in any direction.
- White is not #FFFFFFFF, but a subtone in any direction.
- Gray — not pure gray on the white to black scale, but a shade of gray-blue.
Useful tools:
- Color Blindness Simulator or Color Vision Simulator— how your visualizations will be perceived by a person with color blindness.
- Color Pallettes Generator
- Hex Color Converter
Computer colour codes:
- rgb — red+green+blue — (27,131,137)
- rgba — red+green+blue+opacity/transparency — (27,131,137,0.8)
- hex — six-digit (hexadecimal) number — #1B8389
- cmyk — cyan+magenta+yellow+key/black; used in printing — C 43% M 2% Y 0% K 46%
Tutorial
COLOURS
By pressing a space, find in Coolors:
1. A primary colour for the main data variable (pick by eye a similar colour).
2. A light colour for the background.
3. A dark colour for the font.
4. A contrasting bright colour for the second row of data.
by Christine Chan and Dave Sherwood, Reuters Graphics, 2019
- Line chart
- Bar chart
- Column chart
by Lauren Leatherby, Financial Times Data, 2017
- Lines for continuous data
- Columns for discrete data
- Highlights
by Heather Long and Andrew Van Dam, Washington Post, 2020
- Line chart with two main colours
- Column chart with two main colours and grey
- Line chart with two main colours and grey
Correlation in charts
- Line charthttps://www.washingtonpost.com/business/2020/07/16/9-charts-that-show-good-bad-alarming-this-early-economic-recovery/
- Scatterplothttps://www.nytimes.com/2017/10/09/learning/whats-going-on-in-this-graph-oct-10-2017.html
- Flow charthttps://www.nature.com/articles/s41599-020-00608-6#Tab3
What do you WANT to show?
Visual vocabulary — charts types cheatsheet by Financial Times
Analogue of FT Visual vocabulary in Russian
by A. Bogachev
Over 60 New York Times Graphs for Students to Analyze —
a collection of graphs, maps and charts organized by topic
and graph type
Analogue of FT Visual vocabulary in Russian
by A. Bogachev
Over 60 New York Times Graphs for Students to Analyze —
a collection of graphs, maps and charts organized by topic
and graph type
Main chart types
Line chart
Data Type: continuous for x axis (eg. dates).
Purpose: change over time, statistical outliers.
Bar chart
Data Type: qualitative or discrete.
Purpose: hierarchy, ranking, comparison.
Used if the labels are long.
Column chart
Data Type: qualitative or discrete.
Purpose: hierarchy, ranking, comparison.
Used if the labels are short.
Data Type: continuous for x axis (eg. dates).
Purpose: change over time, statistical outliers.
Bar chart
Data Type: qualitative or discrete.
Purpose: hierarchy, ranking, comparison.
Used if the labels are long.
Column chart
Data Type: qualitative or discrete.
Purpose: hierarchy, ranking, comparison.
Used if the labels are short.
Ответ: вагадане
Pie chart
Data Type: percentage.
Purpose: proportion.
🌻 The sum of all values should equal 100%.
🌻 It is better to show only 1-3 categories and combine the rest under the label "Other".
Scatter plot
Data Type: two qualitative categories with quantitative measurements.
Purpose: correlation, comparison, statistical outliers.
Common mistakes
1. "Noodles" — too many line charts, so no one could ever separate them.
2. Unnecessary pie chart
3. Column chart starts not at 0 — manipulates the comprehension of the reader by visually enhancing the difference between values.
4. The reader should turn the head upside down in order to read the text — it's better to write everything horizontally.
5. Too many colours without any meaning.
6. 3D charts — also misleading.
2. Unnecessary pie chart
- summed up values do not equal 100%,
- various categories in one chart — better use column chart.
3. Column chart starts not at 0 — manipulates the comprehension of the reader by visually enhancing the difference between values.
4. The reader should turn the head upside down in order to read the text — it's better to write everything horizontally.
5. Too many colours without any meaning.
6. 3D charts — also misleading.
Ответ: вагадане
7. The values are not sorted by any principle.
8. The labels of data ticks are invisibly small, or there are too many of them.
9. Excessive ornamentalism (decorative elements without any meaning).
10. No correlation between the chart title and the chart itself.
Learn more:
- 5 Common Data Visualization Mistakes to Avoid by Gitahi Ng'ang'a
- Common Data Visualization Mistakes by Anastasia Komissarova (VPN)
- Numbers Shouldn't Lie – An Overview of Common Data Visualization Mistakes by Micah Bowers
- What Happens When Bar Charts Don’t Start With Zero? by Manoj Agrawal (VPN)
- 5 Errors in your pie charts by Alessandra Cimatti (VPN)
- The issue with pie chart by from Data to Viz
How to create understandable charts
Examples of bad charts
from the Telegram-channel "Disgusting charts" and the website viz.wtf
Layout
Image formats supported for export by RAWGraphs and Flourish Studio.
Learn more:
- Vector VS Raster Images: Choosing the right format on Pavilion.
- Raster vs Vector on Adobe.
Five strategies for coming up with headlines
for datа visualisations, articles
and cards with infographics
and cards with infographics
- Indicator as it isNumber of frogs worldwide
- Leading questionIs the number of frogs increasing?
- ConflictFrogs VS toads: which animal is more numerous in the world?
- TrendThe number of frogs in the world is skyrocketing
- Key insightSoutheast Asia is the leader in the number of frogs
How to make a line chart in DataWrapper
in Russian
How to make a bubble chart in DataWrapper
in Russian
Timeline visualisation in Flourish (VPN)
How long did the song stay in the charts
in Russian
in Russian
Home Assignment
Deadline — 5 March, Thursday, 18:00.
Grading criteria
Grading criteria
This home assignment is an individual one! You have two weeks to complete it.
1. Create a chart from your data.
Requirements:
Upload to your folder in png format, naming it Last Name_Topic so that I could match the chart to the original data and the project topic. For example, Larina_Letters.
2. Find a similar chart in the media:
Upload this image to your folder, naming it Last Name_Media.
3. Create a text document with the prefix "Viz" — and put there
b) Which visual variables are used in the chart from the media?
c) How have you chosen and used the colours?
d) What are the colours of the media chart associated with? Can you think of any reasons why these colours were chosen?
e) Why have you chosen this particular chart type?
1. Create a chart from your data.
Requirements:
- Square layout (eg. 1000x1000 px, as if it were for Instagram).
- Title of any type (leading question, trend, conflict, key insight, indicator as is is).
- Subtitle with the measurements.
- Options for you to choose: chart legend, captions of chart parts, colour coding in title or subtitle.
- The chart itself.
- The values shoud be sorted. The sorting principle should be obvious or mentioned in the subtitle.
- Axis titles.
- Labels of data ticks.
- Data source + the year the data was published.
- Credits (your name/ name of your organization, your country and year).
Upload to your folder in png format, naming it Last Name_Topic so that I could match the chart to the original data and the project topic. For example, Larina_Letters.
2. Find a similar chart in the media:
- similar data type;
- similar chart type.
Upload this image to your folder, naming it Last Name_Media.
3. Create a text document with the prefix "Viz" — and put there
- your chart as a static picture
- similar chart from media
- a link to the original article where you've found this chart
- a short explanation (1–3 paragraphs):
b) Which visual variables are used in the chart from the media?
c) How have you chosen and used the colours?
d) What are the colours of the media chart associated with? Can you think of any reasons why these colours were chosen?
e) Why have you chosen this particular chart type?
