Principes de design, Visualisation de données tabulaires

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éponde pas d'un ou plusieurs attributs ne participant pas à la clé*

---
class: center

# 1NF

.tiny[
<div id="htmlwidget-35ae5997057741d9aa8f" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-35ae5997057741d9aa8f">{"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-7d16ed22d15b7bf7d801" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-7d16ed22d15b7bf7d801">{"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-7710c1b942ce14c25e15" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-7710c1b942ce14c25e15">{"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-5c45718bdc87a9dc5efa" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-5c45718bdc87a9dc5efa">{"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-4f354c4de2d28f69385b" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-4f354c4de2d28f69385b">{"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-b2d0896b423a780c4041" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-b2d0896b423a780c4041">{"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-c274bde3f69711341f28" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-c274bde3f69711341f28">{"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-ef87a54d115bff24ae08" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-ef87a54d115bff24ae08">{"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-fa68a2360ed1abef5fe4" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-fa68a2360ed1abef5fe4">{"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*