03-design-tabulaire.html 13KB

5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
  3. <head>
  4. <title>Principes de design, Visualisation de données tabulaires</title>
  5. <meta charset="utf-8" />
  6. <meta name="author" content="Maxime Wack" />
  7. <link href="libs/remark-css-0.0.1/default.css" rel="stylesheet" />
  8. <script src="libs/htmlwidgets-1.5.1/htmlwidgets.js"></script>
  9. <script src="libs/jquery-1.12.4/jquery.min.js"></script>
  10. <link href="libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
  11. <script src="libs/datatables-binding-0.10/datatables.js"></script>
  12. <link href="libs/dt-core-1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
  13. <link href="libs/dt-core-1.10.19/css/jquery.dataTables.extra.css" rel="stylesheet" />
  14. <script src="libs/dt-core-1.10.19/js/jquery.dataTables.min.js"></script>
  15. <link href="libs/crosstalk-1.0.0/css/crosstalk.css" rel="stylesheet" />
  16. <script src="libs/crosstalk-1.0.0/js/crosstalk.min.js"></script>
  17. <link rel="stylesheet" href="css/my_style.css" type="text/css" />
  18. </head>
  19. <body>
  20. <textarea id="source">
  21. class: center, middle, title
  22. # UE Visualisation
  23. ### 2019-2020
  24. ## Dr. Maxime Wack
  25. ### AHU Informatique médicale
  26. #### Hôpital Européen Georges Pompidou, &lt;/br&gt; Université de Paris
  27. ---
  28. class: center, middle
  29. # Objectifs
  30. ## Principes de design
  31. ## Visualisation de données tabulaires
  32. ---
  33. class: center, middle
  34. # Principes de design
  35. ---
  36. class: center
  37. # *Éléments* de design
  38. ### Espace
  39. ### Point
  40. ### Ligne
  41. ### Surface
  42. ### Taille
  43. ### Couleur
  44. ### Forme
  45. ### ...
  46. ---
  47. class: center
  48. # *Principes* de design
  49. Autant de principes que de designers
  50. ![:scale 50%](03_img/designprinciples.png)
  51. [https://principles.design](https://principles.design)
  52. ---
  53. class: center
  54. # Principes de design
  55. ### Unité/Harmonie
  56. ### Motifs
  57. ### Équilibre
  58. ### Hiérarchisation
  59. ### Mouvement
  60. ### Contraste
  61. ---
  62. class: middle
  63. # Unité / Harmonie
  64. .pull-left[
  65. ### Principe **fondamental** de la visualisation
  66. ### L'ensemble doit être **visuellement cohérent**
  67. ### Notion de **composition** des éléments en un tout
  68. ]
  69. .pull-right[![:scale 100%](03_img/princ_unite.png)]
  70. ---
  71. class: middle
  72. # Motifs
  73. .pull-left[
  74. ### Répétition **régulière** d'un ou plusieurs *éléments*
  75. ### Principal outil de la visualisation de **collections de données**
  76. ]
  77. .pull-right[![:scale 100%](03_img/princ_motif.png)]
  78. ---
  79. class: middle
  80. # Équilibre
  81. .pull-left[
  82. ### Distribution **équilibrée** des éléments visuels
  83. ### Utiliser la **symmétrie** pour comparer
  84. ### Utiliser l'**assymétrie** pour appuyer sur les différences
  85. ### La symmétrie **radiale** permet d'organiser autour d'un élément central
  86. ]
  87. .pull-right[![:scale 100%](03_img/princ_equilibre.png)]
  88. ---
  89. class: middle
  90. # Hiérarchisation
  91. .pull-left[
  92. ### **Insister** sur le message à communiquer
  93. ### Donner une **importance relative** indicative de la réalité
  94. ### Choix des couleurs (*rareté* des couleurs)
  95. ### Gestion du **contraste**
  96. ### **Échelles** et **proportions**
  97. ]
  98. .pull-right[![:scale 80%](03_img/princ_hierarch.png)]
  99. ---
  100. class: middle
  101. # Mouvement
  102. .pull-left[
  103. ### Même sur une image **fixe**
  104. ### Notion de directionalité
  105. ### **Diriger** le regard du lecteur
  106. ]
  107. .pull-right[![:scale 100%](03_img/princ_mouvement.png)]
  108. ---
  109. class: middle
  110. # Contraste
  111. .pull-left[
  112. ### **Juxtaposition** d'éléments **opposés** (couleur, luminosité, direction)
  113. ### Mise en avant **relative**
  114. ### Contraste ↔ Similarité
  115. ]
  116. .pull-right[![:scale 100%](03_img/princ_contraste.png)]
  117. ---
  118. class:center,middle
  119. # Code
  120. ## **Pas** de code spécifique
  121. ### Application des *principes* en manipulant les *éléments*
  122. ### *Data* → **Motifs, Mouvement**
  123. ### *Aesthetics* → **Hiérarchisation, Contraste**
  124. ### *Theme* → **Unité, Équilibre**
  125. ---
  126. class:center, middle
  127. # Exemples
  128. [Dark Horse Analytics](https://www.darkhorseanalytics.com/blog/data-looks-better-naked)
  129. ---
  130. class:center, middle
  131. ![](03_img/data-ink.gif)
  132. ---
  133. class:center, middle
  134. ![](03_img/ClearOffTheTableMd.gif)
  135. ---
  136. class:center, middle
  137. ![](03_img/map_reduce2.gif)
  138. ---
  139. class:center, middle
  140. ![](03_img/devourThePie3.gif)
  141. ---
  142. class: center, middle
  143. # Visualisation de données tabulaires
  144. ---
  145. class:center
  146. # Excel
  147. ![](03_img/excel_data.png)
  148. ---
  149. class:center, middle
  150. ![](03_img/excel_menu.png)
  151. ---
  152. class:center, middle
  153. ![](03_img/excel_graph.png)
  154. ---
  155. # Edgar F Codd
  156. .pull-left[
  157. ### 1923 - 2003
  158. ### Prix Turing 1981
  159. ### Inventeur des **modèles relationnels** pour la gestion de bases de données
  160. ### Définition des formes normales dans un papier de conférence en **1971**
  161. ]
  162. .pull-right[![](03_img/Edgar_F_Codd.jpg)]
  163. ---
  164. # Formes normales
  165. ## 1NF : une donnée par cellule
  166. *Le domaine de chaque attribut ne contient que des données atomiques*
  167. ## 2NF : 1NF + attributs par clé
  168. *Un attribut non-clé ne dépend pas d'une partie de la clé mais de toute la clé*
  169. ## 3NF : 2NF + attributs de la clé indépendants les uns des autres
  170. *Un attribut non-clé ne dépend pas d'un ou plusieurs attributs ne participant pas à la clé*
  171. ---
  172. class: center
  173. # 1NF
  174. .tiny[
  175. <div id="htmlwidget-8497cd67da8c9b7156d3" style="width:100%;height:auto;" class="datatables html-widget"></div>
  176. <script type="application/json" data-for="htmlwidget-8497cd67da8c9b7156d3">{"x":{"filter":"none","data":[["TV"],["samsung, sony"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Produit<\/th>\n <th>Fournisseur<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
  177. ]
  178. <div id="htmlwidget-139eaa4988d6f5e878a8" style="width:100%;height:auto;" class="datatables html-widget"></div>
  179. <script type="application/json" data-for="htmlwidget-139eaa4988d6f5e878a8">{"x":{"filter":"none","data":[["TV","TV"],["samsung","sony"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Produit<\/th>\n <th>Fournisseur<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
  180. ---
  181. class: center
  182. # 2NF
  183. <div id="htmlwidget-9ac7de99c0d988dbf9d8" style="width:100%;height:auto;" class="datatables html-widget"></div>
  184. <script type="application/json" data-for="htmlwidget-9ac7de99c0d988dbf9d8">{"x":{"filter":"none","data":[["TV","Phone","TV"],["Samsung","Samsung","Sony"],["Seoul","Seoul","Tokyo"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Produit<\/th>\n <th>Fournisseur<\/th>\n <th>Ville<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
  185. <div id="htmlwidget-518ff25f6400b8cfd378" style="width:100%;height:auto;" class="datatables html-widget"></div>
  186. <script type="application/json" data-for="htmlwidget-518ff25f6400b8cfd378">{"x":{"filter":"none","data":[["TV","Phone","TV"],["Samsung","Samsung","Sony"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Produit<\/th>\n <th>Fournisseur<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script><div id="htmlwidget-a5d7e2abe331b9a60ed1" style="width:100%;height:auto;" class="datatables html-widget"></div>
  187. <script type="application/json" data-for="htmlwidget-a5d7e2abe331b9a60ed1">{"x":{"filter":"none","data":[["Samsung","Sony"],["Seoul","Tokyo"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Fournisseur<\/th>\n <th>Ville<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
  188. ---
  189. class: center
  190. # 3NF
  191. <div id="htmlwidget-1f3a63b0e180f6db26a7" style="width:100%;height:auto;" class="datatables html-widget"></div>
  192. <script type="application/json" data-for="htmlwidget-1f3a63b0e180f6db26a7">{"x":{"filter":"none","data":[["Samsung","Sony"],["Seoul","Tokyo"],["Corée du sud","Japon"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Fournisseur<\/th>\n <th>Ville<\/th>\n <th>Pays<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
  193. <div id="htmlwidget-5d73de6865852988c780" style="width:100%;height:auto;" class="datatables html-widget"></div>
  194. <script type="application/json" data-for="htmlwidget-5d73de6865852988c780">{"x":{"filter":"none","data":[["Samsung","Sony"],["Seoul","Tokyo"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Fournisseur<\/th>\n <th>Ville<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script><div id="htmlwidget-8d6046fee5b02007a1ae" style="width:100%;height:auto;" class="datatables html-widget"></div>
  195. <script type="application/json" data-for="htmlwidget-8d6046fee5b02007a1ae">{"x":{"filter":"none","data":[["Seoul","Tokyo"],["Corée","Japon"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Ville<\/th>\n <th>Pays<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
  196. ---
  197. class: center
  198. # À plat
  199. <div id="htmlwidget-45dcda4f94b5fdaf9ad8" style="width:100%;height:auto;" class="datatables html-widget"></div>
  200. <script type="application/json" data-for="htmlwidget-45dcda4f94b5fdaf9ad8">{"x":{"filter":"none","data":[["TV","Phone","TV"],["Samsung","Samsung","Sony"],["Seoul","Seoul","Tokyo"],["Corée","Corée","Japon"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Produit<\/th>\n <th>Fournisseur<\/th>\n <th>Ville<\/th>\n <th>Pays<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"paging":false,"info":false,"searching":false,"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
  201. ### Opération facile à réaliser
  202. ### Chaque observation contient toute l'information
  203. ---
  204. class: center
  205. # Avec ggplot2
  206. ### Relation **1:1** entre *observation* et unité de *geometry*
  207. ### Valeur d'*aesthetic* directement accessible par *observation*
  208. </textarea>
  209. <style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
  210. <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
  211. <script src="addons/macros.js"></script>
  212. <script>var slideshow = remark.create({
  213. "ratio": "4:3",
  214. "countIncrementalSlides": false,
  215. "self-contained": true
  216. });
  217. if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
  218. window.dispatchEvent(new Event('resize'));
  219. });
  220. (function(d) {
  221. var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
  222. if (!r) return;
  223. s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
  224. d.head.appendChild(s);
  225. })(document);
  226. (function(d) {
  227. var el = d.getElementsByClassName("remark-slides-area");
  228. if (!el) return;
  229. var slide, slides = slideshow.getSlides(), els = el[0].children;
  230. for (var i = 1; i < slides.length; i++) {
  231. slide = slides[i];
  232. if (slide.properties.continued === "true" || slide.properties.count === "false") {
  233. els[i - 1].className += ' has-continuation';
  234. }
  235. }
  236. var s = d.createElement("style");
  237. s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
  238. d.head.appendChild(s);
  239. })(document);
  240. // delete the temporary CSS (for displaying all slides initially) when the user
  241. // starts to view slides
  242. (function() {
  243. var deleted = false;
  244. slideshow.on('beforeShowSlide', function(slide) {
  245. if (deleted) return;
  246. var sheets = document.styleSheets, node;
  247. for (var i = 0; i < sheets.length; i++) {
  248. node = sheets[i].ownerNode;
  249. if (node.dataset["target"] !== "print-only") continue;
  250. node.parentNode.removeChild(node);
  251. }
  252. deleted = true;
  253. });
  254. })();</script>
  255. <script>
  256. (function() {
  257. var links = document.getElementsByTagName('a');
  258. for (var i = 0; i < links.length; i++) {
  259. if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
  260. links[i].target = '_blank';
  261. }
  262. }
  263. })();
  264. </script>
  265. <script>
  266. slideshow._releaseMath = function(el) {
  267. var i, text, code, codes = el.getElementsByTagName('code');
  268. for (i = 0; i < codes.length;) {
  269. code = codes[i];
  270. if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
  271. text = code.textContent;
  272. if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
  273. /^\$\$(.|\s)+\$\$$/.test(text) ||
  274. /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
  275. code.outerHTML = code.innerHTML; // remove <code></code>
  276. continue;
  277. }
  278. }
  279. i++;
  280. }
  281. };
  282. slideshow._releaseMath(document);
  283. </script>
  284. <!-- dynamically load mathjax for compatibility with self-contained -->
  285. <script>
  286. (function () {
  287. var script = document.createElement('script');
  288. script.type = 'text/javascript';
  289. script.src = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
  290. if (location.protocol !== 'file:' && /^https?:/.test(script.src))
  291. script.src = script.src.replace(/^https?:/, '');
  292. document.getElementsByTagName('head')[0].appendChild(script);
  293. })();
  294. </script>
  295. </body>
  296. </html>