|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421 |
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
- <head>
- <title>Principes de design, Visualisation de données tabulaires</title>
- <meta charset="utf-8" />
- <meta name="author" content="Maxime Wack" />
- <link href="libs/remark-css-0.0.1/default.css" rel="stylesheet" />
- <script src="libs/htmlwidgets-1.5.1/htmlwidgets.js"></script>
- <script src="libs/jquery-1.12.4/jquery.min.js"></script>
- <link href="libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
- <script src="libs/datatables-binding-0.10/datatables.js"></script>
- <link href="libs/dt-core-1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
- <link href="libs/dt-core-1.10.19/css/jquery.dataTables.extra.css" rel="stylesheet" />
- <script src="libs/dt-core-1.10.19/js/jquery.dataTables.min.js"></script>
- <link href="libs/crosstalk-1.0.0/css/crosstalk.css" rel="stylesheet" />
- <script src="libs/crosstalk-1.0.0/js/crosstalk.min.js"></script>
- <link rel="stylesheet" href="css/my_style.css" type="text/css" />
- </head>
- <body>
- <textarea id="source">
-
-
-
-
- class: center, middle, title
-
- # UE Visualisation
-
- ### 2019-2020
-
- ## Dr. Maxime Wack
-
- ### AHU Informatique médicale
- #### Hôpital Européen Georges Pompidou, </br> Université de Paris
-
- ---
- class: center, middle
- # Objectifs
-
- ## Principes de design
-
- ## Visualisation de données tabulaires
-
- ---
- class: center, middle
-
- # Principes de design
-
- ---
- class: center
-
- # *Éléments* de design
-
- ### Espace
- ### Point
- ### Ligne
- ### Surface
- ### Taille
- ### Couleur
- ### Forme
- ### ...
-
- ---
- class: center
-
- # *Principes* de design
-
- Autant de principes que de designers
-
- ![:scale 50%](03_img/designprinciples.png)
-
- [https://principles.design](https://principles.design)
-
- ---
- class: center
-
- # Principes de design
-
- ### Unité/Harmonie
- ### Motifs
- ### Équilibre
- ### Hiérarchisation
- ### Mouvement
- ### Contraste
-
- ---
- class: middle
-
- # Unité / Harmonie
-
- .pull-left[
- ### Principe **fondamental** de la visualisation
-
- ### L'ensemble doit être **visuellement cohérent**
-
- ### Notion de **composition** des éléments en un tout
- ]
-
- .pull-right[![:scale 100%](03_img/princ_unite.png)]
-
- ---
- class: middle
-
- # Motifs
-
- .pull-left[
- ### Répétition **régulière** d'un ou plusieurs *éléments*
-
- ### Principal outil de la visualisation de **collections de données**
- ]
-
- .pull-right[![:scale 100%](03_img/princ_motif.png)]
-
- ---
- class: middle
-
- # Équilibre
-
- .pull-left[
- ### Distribution **équilibrée** des éléments visuels
-
- ### Utiliser la **symmétrie** pour comparer
-
- ### Utiliser l'**assymétrie** pour appuyer sur les différences
-
- ### La symmétrie **radiale** permet d'organiser autour d'un élément central
- ]
-
- .pull-right[![:scale 100%](03_img/princ_equilibre.png)]
-
- ---
- class: middle
-
- # Hiérarchisation
-
- .pull-left[
- ### **Insister** sur le message à communiquer
-
- ### Donner une **importance relative** indicative de la réalité
-
- ### Choix des couleurs (*rareté* des couleurs)
-
- ### Gestion du **contraste**
-
- ### **Échelles** et **proportions**
- ]
-
- .pull-right[![:scale 80%](03_img/princ_hierarch.png)]
-
- ---
- class: middle
-
- # Mouvement
-
- .pull-left[
- ### Même sur une image **fixe**
-
- ### Notion de directionalité
-
- ### **Diriger** le regard du lecteur
- ]
-
- .pull-right[![:scale 100%](03_img/princ_mouvement.png)]
-
- ---
- class: middle
-
- # Contraste
-
- .pull-left[
- ### **Juxtaposition** d'éléments **opposés** (couleur, luminosité, direction)
-
- ### Mise en avant **relative**
-
- ### Contraste ↔ Similarité
- ]
-
- .pull-right[![:scale 100%](03_img/princ_contraste.png)]
-
- ---
- class:center,middle
-
- # Code
-
- ## **Pas** de code spécifique
-
- ### Application des *principes* en manipulant les *éléments*
-
- ### *Data* → **Motifs, Mouvement**
- ### *Aesthetics* → **Hiérarchisation, Contraste**
- ### *Theme* → **Unité, Équilibre**
-
- ---
- class:center, middle
-
- # Exemples
-
- [Dark Horse Analytics](https://www.darkhorseanalytics.com/blog/data-looks-better-naked)
-
- ---
- class:center, middle
-
- ![](03_img/data-ink.gif)
-
- ---
- class:center, middle
-
- ![](03_img/ClearOffTheTableMd.gif)
-
- ---
- class:center, middle
-
- ![](03_img/map_reduce2.gif)
-
- ---
- class:center, middle
-
- ![](03_img/devourThePie3.gif)
-
- ---
- class: center, middle
-
- # Visualisation de données tabulaires
-
- ---
- class:center
-
- # Excel
-
- ![](03_img/excel_data.png)
-
- ---
- class:center, middle
-
- ![](03_img/excel_menu.png)
-
- ---
- class:center, middle
-
- ![](03_img/excel_graph.png)
-
- ---
-
- # Edgar F Codd
-
- .pull-left[
-
- ### 1923 - 2003
-
- ### Prix Turing 1981
-
- ### Inventeur des **modèles relationnels** pour la gestion de bases de données
-
- ### Définition des formes normales dans un papier de conférence en **1971**
-
- ]
-
- .pull-right[![](03_img/Edgar_F_Codd.jpg)]
-
- ---
-
- # Formes normales
-
- ## 1NF : une donnée par cellule
- *Le domaine de chaque attribut ne contient que des données atomiques*
-
- ## 2NF : 1NF + attributs par clé
- *Un attribut non-clé ne dépend pas d'une partie de la clé mais de toute la clé*
-
- ## 3NF : 2NF + attributs de la clé indépendants les uns des autres
- *Un attribut non-clé ne dépend pas d'un ou plusieurs attributs ne participant pas à la clé*
-
- ---
- class: center
-
- # 1NF
-
- .tiny[
- <div id="htmlwidget-8497cd67da8c9b7156d3" style="width:100%;height:auto;" class="datatables html-widget"></div>
- <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>
- ]
- ↓
- <div id="htmlwidget-139eaa4988d6f5e878a8" style="width:100%;height:auto;" class="datatables html-widget"></div>
- <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>
-
- ---
- class: center
-
- # 2NF
-
- <div id="htmlwidget-9ac7de99c0d988dbf9d8" style="width:100%;height:auto;" class="datatables html-widget"></div>
- <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>
- ↓
- <div id="htmlwidget-518ff25f6400b8cfd378" style="width:100%;height:auto;" class="datatables html-widget"></div>
- <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>
- <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>
-
- ---
- class: center
-
- # 3NF
-
- <div id="htmlwidget-1f3a63b0e180f6db26a7" style="width:100%;height:auto;" class="datatables html-widget"></div>
- <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>
- ↓
- <div id="htmlwidget-5d73de6865852988c780" style="width:100%;height:auto;" class="datatables html-widget"></div>
- <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>
- <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>
-
- ---
- class: center
-
- # À plat
-
- <div id="htmlwidget-45dcda4f94b5fdaf9ad8" style="width:100%;height:auto;" class="datatables html-widget"></div>
- <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>
-
- ### Opération facile à réaliser
-
- ### Chaque observation contient toute l'information
-
- ---
- class: center
-
- # Avec ggplot2
-
- ### Relation **1:1** entre *observation* et unité de *geometry*
-
- ### Valeur d'*aesthetic* directement accessible par *observation*
- </textarea>
- <style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
- <script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
- <script src="addons/macros.js"></script>
- <script>var slideshow = remark.create({
- "ratio": "4:3",
- "countIncrementalSlides": false,
- "self-contained": true
- });
- if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
- window.dispatchEvent(new Event('resize'));
- });
- (function(d) {
- var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
- if (!r) return;
- s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
- d.head.appendChild(s);
- })(document);
-
- (function(d) {
- var el = d.getElementsByClassName("remark-slides-area");
- if (!el) return;
- var slide, slides = slideshow.getSlides(), els = el[0].children;
- for (var i = 1; i < slides.length; i++) {
- slide = slides[i];
- if (slide.properties.continued === "true" || slide.properties.count === "false") {
- els[i - 1].className += ' has-continuation';
- }
- }
- var s = d.createElement("style");
- s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
- d.head.appendChild(s);
- })(document);
-
-
- (function() {
- var deleted = false;
- slideshow.on('beforeShowSlide', function(slide) {
- if (deleted) return;
- var sheets = document.styleSheets, node;
- for (var i = 0; i < sheets.length; i++) {
- node = sheets[i].ownerNode;
- if (node.dataset["target"] !== "print-only") continue;
- node.parentNode.removeChild(node);
- }
- deleted = true;
- });
- })();</script>
-
- <script>
- (function() {
- var links = document.getElementsByTagName('a');
- for (var i = 0; i < links.length; i++) {
- if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
- links[i].target = '_blank';
- }
- }
- })();
- </script>
-
- <script>
- slideshow._releaseMath = function(el) {
- var i, text, code, codes = el.getElementsByTagName('code');
- for (i = 0; i < codes.length;) {
- code = codes[i];
- if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
- text = code.textContent;
- if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
- /^\$\$(.|\s)+\$\$$/.test(text) ||
- /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
- code.outerHTML = code.innerHTML;
- continue;
- }
- }
- i++;
- }
- };
- slideshow._releaseMath(document);
- </script>
-
- <script>
- (function () {
- var script = document.createElement('script');
- script.type = 'text/javascript';
- script.src = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
- if (location.protocol !== 'file:' && /^https?:/.test(script.src))
- script.src = script.src.replace(/^https?:/, '');
- document.getElementsByTagName('head')[0].appendChild(script);
- })();
- </script>
- </body>
- </html>
|