Systèmes d'Information Décisionnels - Cours - 20150309 - DataVisualisation
1. Université Paris-Sud
MASTER 1 MIAGE
Cours de Gestion des Systèmes
d’Information Décisionnels
2ème semestre 2014-2015
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
2. Objectif de la Data Visualisation
• Les 2 objectifs de la data visualisation:
1. Data Analysis: making sense of the data
2. Communication
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
3. Comment il est facile de comprendre
le business?
2013 Sells (in $)
Jan Feb March April May Jun Jul Aug Sep Oct Nov Dec Total
BtoC sells 1534 1697 1798 1556 1651 1834 1492 1559 1800 1547 1659 1809 19936
BtoB sells 658 647 667 654 678 659 458 459 647 687 675 654 7543
Total 2192 2344 2465 2210 2329 2493 1950 2018 2447 2234 2334 2463 27479
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
4. Pourquoi nous avons besoin de la
Data Visualisation?
I II III IV
x y x y x y x y
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
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89
Anscombe's quartet
Property Value
Mean of x in each case 9 (exact)
Variance of x in each case 11 (exact)
Mean of y in each case 7.50 (to 2 decimal places)
Variance of y in each case 4.122 or 4.127 (to 3 decimal places)
Correlation between x and y in each case 0.816 (to 3 decimal places)
Linear regression line in each case y = 3.00 + 0.500x (to 2 and 3 decimal places, respectively)
http://en.wikipedia.org/wiki/Anscombe's_quartetCours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
5. Pourquoi nous avons besoin de la
Data Visualisation?
Anscombe's quartet
http://en.wikipedia.org/wiki/Anscombe's_quartetCours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
6. Communication
• Dans notre vie, chaque jour, nous
communiquons. En entreprise, c’est toujours le
cas!
• Vous aurez à communiquer pour:
– Echanger sur votre vécu et vos idées
– Influancer vos collègues même s’ils sont plus anciens
que vous
• Mais les personnes sont des humains! Et l’humain
est une créature émotionnelle et donc nous
devons savoir comment l’être humaine pense et
écoute!
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
7. Vision = the most powerful sense!
70%
of our
sense
30% of
our
sense
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
8. Pre-attentive perception
• Some visual features are processed pre-
attentively, e.g. without focusing attention
• Low-level (unconscious) cognitive processes
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
11. Pre-attentive perception
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
12. Pre-attentive perception
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
13. Pre-attentive perception
Gesalt Theory: The Form Theory
http://sixrevisions.com/usability/data-visualization-gestalt-laws/
• Law of Prägnanz: Keep it simple. Arrange data logically wherever possible.
• Law of Continuity: Arrange objects in a line to facilitate grouping and
comparison.
• Law of Similarity: Use similar characteristics (color, size, shape, etc.) to establish
relationships and to encourage groupings of objects.
• Law of Focal Point: Use distinctive characteristics (like a different color or a
different shape) to highlight and create focal points.
• Law of Proximity: Know what your chart’s information priority is, and then
create groupings through proximity to support that priority.
• Law of Isomorphic Correspondence: Keep in mind your user and their
preconceived notions and experiences. Stick to well-established conventions
and best practices.
• Law of Figure/Ground: Ensure there is enough contrast between your
foreground and background so that charts and graphs are more legible.
• Law of Common Fate: Use direction and/or movement to establish or negate
relationships.
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
14. Pre-attentive perception
Gesalt Theory: Law of Prägnanz: Arrange data logically
wherever possible!
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
15. Pre-attentive perception
Gesalt Theory: Law of Continuity
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
17. Pre-attentive perception
Gesalt Theory: Law of Similarity
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
18. Pre-attentive perception
Gesalt Theory: Law of Similarity
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
19. Pre-attentive perception
Gesalt Theory: Law of Focal Point
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
20. Pre-attentive perception
Gesalt Theory: Law of Proximity
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
21. Pre-attentive perception
Gesalt Theory: Law of Isomorphic Correspondence
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
22. About the color
The hue dimension is circular, and present the colors in the same order. In any
hue circle, analogous hues are close together, most simply variations
of the same color name (such as purple, or purple-red).
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
23. About the color
• Analogous color schemes choose colors that are next to each others in
color wheel
• Complementary color schemes are opposite each others in the color
wheel
• Split Complementary is a mix of complementary & analogous
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
24. About the color
• Culture influence
For example:
• In Western: Good
Luck can represent
by green, but in
Chinese is red!
• Marriage can be
represent by white
but in Hindi and Asia
it’s red!
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
25. About the color
Original Graph Deuteranomaly (Affects 4.9% of Men)
Be aware of the color perception of every one. 8% of the population have color blind!
http://tim.webanalyticsdemystified.com/?p=387Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
=> Problème de perception du vert
26. About the color
Original Graph Deuteranopia (Affects 1.1% of Men)
Be aware of the color perception of every one. 8% of the population have color blind!
http://tim.webanalyticsdemystified.com/?p=387Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
=> Problème de perception du vert
27. About the color
Original Graph Protanopia (Affects 1% of Men)
Be aware of the color perception of every one. 8% of the population have color blind!
http://tim.webanalyticsdemystified.com/?p=387Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
=> Problème de perception du rouge
28. About the color
Original Graph Protanomaly (Affects 1% of Men)
Be aware of the color perception of every one. 8% of the population have color blind!
http://tim.webanalyticsdemystified.com/?p=387Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
29. About the color
Original Graph Achromatopsia (Extremely Rare)
Be aware of the color perception of every one. 8% of the population have color blind!
http://tim.webanalyticsdemystified.com/?p=387Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
30. About the color
How to choose the colors? Use: http://colorbrewer2.org/
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
31. Pre-attentive perception
Back to the Gesalt Theory: The Form Theory
http://sixrevisions.com/usability/data-visualization-gestalt-laws/
• Law of Prägnanz: Keep it simple. Arrange data logically wherever possible.
• Law of Continuity: Arrange objects in a line to facilitate grouping and
comparison.
• Law of Similarity: Use similar characteristics (color, size, shape, etc.) to establish
relationships and to encourage groupings of objects.
• Law of Focal Point: Use distinctive characteristics (like a different color or a
different shape) to highlight and create focal points.
• Law of Proximity: Know what your chart’s information priority is, and then
create groupings through proximity to support that priority.
• Law of Isomorphic Correspondence: Keep in mind your user and their
preconceived notions and experiences. Stick to well-established conventions
and best practices.
• Law of Figure/Ground: Ensure there is enough contrast between your
foreground and background so that charts and graphs are more legible.
• Law of Common Fate: Use direction and/or movement to establish or negate
relationships.
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
32. Pre-attentive perception
Gesalt Theory: Law of Figure/Ground
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
33. Pre-attentive perception
Gesalt Theory: Law of Common Fate
http://sixrevisions.com/usability/data-visualization-gestalt-laws/Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
34. Combination of variables
Jacques Bertin’s Semiology graphics:
• We can represent maps in points, lines &
zones
• We can different variables, like Orientation
(OR), Form (F), Value - Tint (V), Size (T)
• Here how Jacques Bertin make the
combination of these variables
To be efficient, humans can easily perceive:
• 12 orientations
• 10 forms
• 5 sizes
• 3 values (tint)
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
35. Combination of variables- Example
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
36. Combination of variables- Example
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
37. • First rule of an efficient data visualization:
keep it simple!
• Abstraction has a perfect sense in Data
Visualization
Pre-attentive perception
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
38. Goal of a data visualization
• To achieve the goal of a good data visualization, the display
should achieve the following:
1. Clearly indicates how the values relate to one another.
2. Represents the quantities accurately.
3. Makes it easy to compare the quantities.
4. Makes it easy to see the ranked order of values.
5. Makes obvious how people should use the information -
what they should use it to accomplish - and encourages
them to do this.
Source: “Data Visualization for Human Perception” Stephen FewCours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
39. Tufte’s principles
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
40. Why is 3D “harder”?
“Human Based Visual Communication” presentation by Dan Young – Corporate CMKCours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
41. Why is 3D “harder”?
Poucentage%
France Italie Suisse Espagne Portugal
Country Pourcentage %
France 50
Italie 15
Suisse 10
Espagne 20
Portugal 5
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
42. Bad or Good Data Visualization?
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
43. Bad or Good Data Visualization?
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
44. Bad or Good Data Visualization?
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
45. Bad or Good Data Visualization?
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
46. Bad or Good Data Visualization?
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
http://simplystatistics.org/2012/11/26/the-statisticians-at-fox-news-use-classic-and-novel-graphical-techniques-to-lead-with-data/
47. Bad or Good Data Visualization?
Web site for the video: https://www.wat.tv/images/v70/PlayerLite.swf?videoId=3azh7
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
48. Exercice
• Try to find the best way to represent this data:
Number of person by transport type in Spain in
2012:
Plane: 7,876,951
4 wheel vehicles: 35,417,247
Bus: 17,675,980
Motorcycles: 6,874,887
Pedestrians: 5,639,072
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
49. Solution 1
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
50. Solution 2
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
51. Solution 3
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
52. Solution 4
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
53. Solution 5
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
54. Solution 6
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
55. Solution 7
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
56. One of the best in the world!
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
57. One of the best in the world!
http://en.wikipedia.org/wiki/Florence_NightingaleCours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés
58. Conclusion
• A data visualization should:
– Be understanding by your audience very quickly: clear title, clear
axis, clear purpose, do not surcharge the different variables
– Respect the Gesalt Laws as soon as possible
– Show all the data – not trying to influence an opinion
– Use small space to represent large data set (vs Infographic)
– Specify the source of data
– Give accurate information – for example, there is no sense to
compare the number of cars crashed between France &
Liechtenstein … it’s better to see this data regarding the number
of cars in circulation or the length of roads in each country
Cours de Gestion des SI Décisionnels - MASTER 1 MIAGE Paris-Sud Année 2014-2015 – Abed Ajraou - Tous droits réservés