HEGP
/
dataviz

<!DOCTYPE html>
<html lang="" xml:lang="">
  <head>
    <title>Graphes</title>
    <meta charset="utf-8" />
    <meta name="author" content="Maxime Wack" />
    <script src="libs/header-attrs-2.1/header-attrs.js"></script>
    <link href="libs/remark-css-0.0.1/default.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/my_style.css" type="text/css" />
  </head>
  <body>
    <textarea id="source">


class: center, middle, title
# UE Visualisation
### 2020-2021
## Dr. Maxime Wack
### AHU Informatique médicale
#### Hôpital Européen Georges Pompidou, &lt;/br&gt; Université de Paris

---
class: center, middle
# Objectif
## Théorie des graphes
## Créer et manipuler des graphes
## Représenter des graphes

---
# Théorie des graphes

### Étude des graphes et leurs applications
### Topologie des graphes
### Propriétés des graphes
### Développement d'algorithmes
- parcours en largeur/profondeur
- calcul de trajet (A*, Dijkstra)
- détection de sous-graphes
- inférence, effets de réseaux
- résolution de contraintes

---
# Graphes
.pull-left[
## Graphes ou réseaux
*graphs* and *networks*
## Représentation de **relations** entre des **éléments**
]

.pull-right[
![](06-img/graphe.png)
]

---
# Sommets
.pull-left[
### (ou nœuds, ou points)&lt;/br&gt; *vertex (vertices)* en anglais
### Servent à représenter les **éléments**
### Peuvent posséder des **attributs** arbitraires (label, valeurs, etc.)
### Des attributs peuvent être **calculés** (degré, centralité, etc.)
]

.pull-right[
![](06-img/vertices.png)
]


---
# Arêtes
.pull-left[
### (ou liens, ou lignes)&lt;/br&gt; *edges* en anglais
### Servent à représenter les **relations**
### Peuvent également posséder des **attributs** (label, poids, etc.)
]

.pull-right[
![](06-img/edges.png)
]

---
# Graphe dirigé

.pull-left[
### Graphe dont les arêtes ont une **direction**
### Arêtes **bidirectionnelles** possibles
]

.pull-right[
![](06-img/directed.png)
]

---
# Cycles

.pull-left[
### Groupes de sommets formant un **anneau**
### Dans un graphe dirigé, on doit pouvoir tourner
]

.pull-right[
![](06-img/cycle.png)
]


---
# Clique

.pull-left[
### Ensemble de sommets **tous connectés entre eux**
]

.pull-right[
![](06-img/clique.png)
]

---
# Graphe connecté

.pull-left[
### Graphe dont **tous les sommets** forment une **clique**
]

.pull-right[
![](06-img/connected.png)
]

---
# Arbre

.pull-left[
### Graphe ne comportant **pas de cycle**
### Possède une ou plusieurs **racines**
]

.pull-right[
![](06-img/tree.png)
]


---
# Graphe dirigé acyclique

.pull-left[
### Depuis le graphe dirigé précédent
### Quelles arêtes supprimer pour obtenir un DAG ?
]

.pull-right[
![](06-img/directed.png)
]
---
# Graphe dirigé acyclique

.pull-left[
### **DAG** (Directed Acyclic Graph)
### Structure très reconnue
- Réseaux bayésiens
- Arbres généalogiques
- Systèmes de contrôle de version
- Systèmes de workflow
- Graphe de citations
]

.pull-right[
![](06-img/DAG.png)
]

---
# Représentation numérique

.pull-left[
![](06-img/numbered.png)
]

.pull-right[
## Liste de sommets

`(1, 2, 3, 4, 5, 6, 7, 8)`

## Liste d'arêtes

`((2, 1), (3, 1), (4, 1),`&lt;/br&gt;
` (2, 3), (4, 3), (4, 2),`&lt;/br&gt;
` (2, 5), (5, 2), (5, 7),`&lt;/br&gt;
` (6, 5), (6, 7), (7, 4),`&lt;/br&gt;
` (7, 8))`
]

---
# Représentation numérique

.pull-left[
![](06-img/numbered.png)
]

## Matrice d'adjacence


```
##      [,1] [,2] [,3] [,4] [,5] [,6] [,7] [,8]
## [1,]    0    0    0    0    0    0    0    0
## [2,]    1    0    1    0    1    0    0    0
## [3,]    1    0    0    0    0    0    0    0
## [4,]    1    1    1    0    0    0    0    0
## [5,]    0    1    0    0    0    0    1    0
## [6,]    0    0    0    0    1    0    1    0
## [7,]    0    0    0    1    0    0    0    1
## [8,]    0    0    0    0    0    0    0    0
```
---
class: center
# Visualisation
## Cytoscape
## yEd
## ggraph

---
# Outils externes

## Cytoscape

https://cytoscape.org/

Pour l'analyse de réseaux, orienté biologie à l'origine&lt;/br&gt;
Visualisation de réseaux&lt;/br&gt;
Calculs d'indicateurs&lt;/br&gt;
Mapping d'attributs sur des propriété esthétiques

## yEd

https://www.yworks.com/products/yed

Éditeur de graphes, multiples supportés&lt;/br&gt;
Visualisation de réseaux&lt;/br&gt;
Nombreux algorithmes de layout&lt;/br&gt;
Calculs d'indicateurs&lt;/br&gt;
Mapping d'attributs sur des propriété esthétiques&lt;/br&gt;

---
# ggraph

https://ggraph.data-imaginist.com/

### `geom_node_*` → geom pour les sommets
### `geom_edge_*` → geom pour les arêtes
### Propriété `layout` dans `ggraph()`
    </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);
// delete the temporary CSS (for displaying all slides initially) when the user
// starts to view slides
(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;
  });
})();
(function() {
  "use strict"
  // Replace <script> tags in slides area to make them executable
  var scripts = document.querySelectorAll(
    '.remark-slides-area .remark-slide-container script'
  );
  if (!scripts.length) return;
  for (var i = 0; i < scripts.length; i++) {
    var s = document.createElement('script');
    var code = document.createTextNode(scripts[i].textContent);
    s.appendChild(code);
    var scriptAttrs = scripts[i].attributes;
    for (var j = 0; j < scriptAttrs.length; j++) {
      s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
    }
    scripts[i].parentElement.replaceChild(s, scripts[i]);
  }
})();
(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;  // remove <code></code>
        continue;
      }
    }
    i++;
  }
};
slideshow._releaseMath(document);
</script>
<!-- dynamically load mathjax for compatibility with self-contained -->
<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>