diff --git a/courses/01-dataviz-intro.html b/courses/01-dataviz-intro.html
new file mode 100644
index 0000000..75f2e58
--- /dev/null
+++ b/courses/01-dataviz-intro.html
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+  <head>
+    <title>Introduction à la data visualisation</title>
+    <meta charset="utf-8" />
+    <meta name="author" content="Antoine Neuraz" />
+    <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
+
+### 2019-2020
+
+## Dr. Antoine Neuraz
+
+### AHU Informatique médicale
+#### Hôpital Necker-Enfants malades, &lt;/br&gt; Université de Paris
+
+---
+class: center, middle
+# 2 Objectifs principaux
+
+### **Principes généraux** de visualisation
+--
+
+### **Application** à l'aide de R et ggplot2
+
+---
+class: center, middle
+# Organisation des cours
+
+### 1ère moitié du cours: théorie
+
+### 2ème moitié du cours: mise en pratique
+
+---
+class: center, middle
+# Evaluation par projet en binôme
+
+### Mardi après-midi: description du projet
+
+### Soutenance le **2 décembre**
+
+---
+
+# Visualisation
+
+.pull-left[![:scale 100%](img/visualisation.jpg)]
+
+.pull-right[
+
+#### 1. Action de rendre visible d'une façon matérielle l'action et les effets d'un phénomène.
+
+#### 2. Présentation visuelle sur un écran, sous forme d'image alphanumérique ou graphique, d'un ensemble d'informations traitées par des moyens informatiques.
+]
+
+---
+class: center, middle
+
+# Pourquoi visualiser ?
+
+---
+
+# Pourquoi visualiser graphiquement ?
+
+.pull-left[
+
+#### **Plus riches** : plus d’information en moins d’espace
+
+#### Rend la **structure plus visible**
+
+#### **Plus accessible**
+
+#### **Plus rapide** à appréhender
+
+#### **Plus mémorable**
+
+]
+
+.pull-right[
+
+![](img/bandwidth.png)
+
+]
+
+---
+
+class: left
+
+# Pourquoi mettre un ordinateur dans la boucle ?
+&lt;/br&gt;
+
+## **Passage à l’échelle**
+--
+
+## **Efficience**: réutilisation, diffusion 
+
+--
+## **Qualité** et **précision**
+
+---
+# Pourquoi mettre un humain dans la boucle ?
+
+![:abs 85%, 7%, 26%](img/humanVScomputer.png)
+
+---
+class: center, middle
+
+# Buts d'une visualisation
+
+--
+
+.pull-c1[
+### Enregistrer l'information
+
+]
+
+--
+
+.pull-c2[
+### Analyser
+
+]
+
+--
+
+.pull-c3[
+### Communiquer
+]
+
+
+---
+class: center
+
+# Enregistrer l'information
+
+.pull-left[
+![](img/carte-plan-paris.jpg)
+]
+
+.pull-right[
+![](img/ancien-photo.jpg)
+]
+
+---
+class: center, full
+# Analyser
+
+.pull-left[
+![](img/higlass.png)
+[https://higlass.io/]()
+]
+.pull-right[
+![](img/stratomex_explained.png)
+[https://frama.link/stratomex]()
+]
+
+---
+class: center, full
+# Communiquer
+
+.pull-left[
+![](img/wind-map.png)
+[http://hint.fm/wind/]()
+]
+
+.pull-right[
+![:scale 70%](img/us-dendro.png)
+[https://frama.link/dendro]()
+]
+
+---
+
+class: center, middle
+
+# Définition
+
+### La visualisation est le processus qui **transforme** les données en **représentation graphique** interactive à des fins d’ **exploration**, de **confirmation** ou de **communication**.
+
+
+---
+
+# Pourquoi ne pas se limiter aux statistiques ?
+
+![:abs 80%, 10%, 26%](img/anscombe-stat.png)
+
+---
+
+# Anscombe's quartet 
+
+![:abs 85%, 7%, 20%](img/anscombe-viz.png)
+
+---
+
+# Datasaurus dozen 
+
+![:abs 85%, 7%, 18%](img/datasaurus.png)
+
+---
+
+class: center
+
+## Un peu d'histoire: enregistrer
+
+.pull-left[
+![:scale 90%](img/davinci.png)
+
+Da Vinci (1500)
+]
+
+.pull-right[
+![:scale 90%](img/galilee.png)
+
+Galilée (1616)
+]
+
+---
+class: center
+# Un peu d'histoire: analyser
+
+![:scale 90%](img/playfair.png)
+
+### Playfair(1786)
+
+---
+class: center
+# Un peu d'histoire: trouver des patterns
+
+![:scale 60%](img/snow.png)
+
+### John Snow (1854)
+
+---
+class: center, full
+
+# Communiquer
+
+![:scale 100%](img/minard.png)
+
+### Minard(1869)
+
+---
+# 1 second of internet
+![](img/1second.png)
+[](https://www.internetlivestats.com/one-second/)
+
+---
+class: center
+# London Tube 1927
+
+![:scale 80%](img/tube1927.png)
+
+
+---
+class: center
+# London Tube 1933
+
+![:scale 80%](img/tube1933.png)
+
+
+---
+class: center
+# London Tube today
+
+![:scale 90%](img/tubetoday.png)
+
+---
+class: center, middle, inverse
+
+# Types de datasets 
+
+---
+class: center, middle, full
+
+![](img/dataset_types2.png)
+
+---
+class: center, full
+## Caractéristiques des données de tableau
+
+![:scale 100%](img/donnees_tableau.png)
+---
+
+# Autres caractéristiques des données 
+
+### **Liens** : relation entre 2 entités (observations, noeuds)
+
+--
+
+### **Positions** (données spatiales)
+
+--
+
+### **Grilles** (grids) : stratégie d'échantillonage de données continues
+
+
+---
+class: center, full
+# Types de variables (attributs)
+
+![](img/types_variables1.png)
+
+--
+
+![](img/types_variables2.png)
+
+---
+# Variables quantitatives
+
+
+### **Intervalles** = zéro arbitraire
+
+ex: Dates, positions géographiques 
+
+&amp;rightarrow; pas de comparaison directe (cf °C et °F)
+
+&amp;rightarrow; seulement des différences 
+
+--
+
+### **Ratios** = zero absolu
+
+ex: longueur, masse 
+
+&amp;rightarrow; ratios et proportions
+
+---
+class: center, middle
+
+### Comment peut-on représenter visuellement 2 nombres, par exemple: 
+
+### **4 et 8**
+
+---
+class: center, middle, inverse
+
+# Marques et échelles 
+
+---
+# Marques et échelles
+
+## **Marques** = geometry
+
+### Représente les **observations** (items) ou les liens 
+
+--
+&lt;/br&gt;
+## **Echelles** = scales 
+
+### Change l'**apparence** des marques en fonction de **variables** (attributs)
+
+---
+# Marques pour observations
+
+## Eléments géométriques de base
+
+![](img/marques.png)
+
+--
+## Marques 3D: Volume (rarement utilisé)
+
+---
+class: center, middle, full
+![](img/marques_liens.png)
+
+---
+class: center, full
+# **Echelles** (= variables visuelles)
+
+![:scale 65%](img/echelles.png)
+
+### Contrôle l'apparence proportionnellement ou en fonction de variables
+
+---
+# Utiliser les marques et les échelles 
+
+.pull-left[
+
+![](01-dataviz-intro_files/figure-html/unnamed-chunk-2-1.png)&lt;!-- --&gt;
+]
+
+--
+.pull-right[
+### **Marque**: ligne
+### **Echelles**: longueur et position
+
+### **Variables**
+
+#### 1 variable quantitative
+
+#### 1 variable qualitative
+]
+
+---
+
+# Utiliser les marques et les échelles 
+
+.pull-left[
+
+![](01-dataviz-intro_files/figure-html/unnamed-chunk-3-1.png)&lt;!-- --&gt;
+]
+
+--
+.pull-right[
+### **Marque**: point
+### **Echelles**: position x et position y
+
+### **Variables**
+
+#### **2** variables quantitatives
+
+]
+
+---
+
+# Utiliser les marques et les échelles 
+
+.pull-left[
+
+![](01-dataviz-intro_files/figure-html/unnamed-chunk-4-1.png)&lt;!-- --&gt;
+]
+
+--
+.pull-right[
+### **Marque**: point
+### **Echelles**: position x et position y
+
+### **Variables**
+
+#### 2 variables quantitatives
+#### **1** variable qualitative
+
+]
+
+---
+
+# Utiliser les marques et les échelles 
+
+.pull-left[
+
+![](01-dataviz-intro_files/figure-html/unnamed-chunk-5-1.png)&lt;!-- --&gt;
+]
+
+--
+.pull-right[
+### **Marque**: point
+### **Echelles**: position x et position y
+
+### **Variables**
+
+#### **3** variables quantitatives
+#### 1 variable qualitative
+
+]
+
+---
+class: center
+# Encodage redondant
+
+![](01-dataviz-intro_files/figure-html/unnamed-chunk-6-1.png)&lt;!-- --&gt;
+
+### Longueur, position et Luminosité
+
+---
+class: center
+## Toutes les échelles ne naissent pas égales
+
+.pull-left[
+### **Echelles de magnitudes**
+
+#### Combien ?
+]
+
+--
+.pull-right[
+### **Echelles d'identité**
+
+#### Quoi? Où?
+
+]
+
+---
+class: center
+## Toutes les échelles ne naissent pas égales
+
+.pull-left[
+### **Echelles de magnitudes**
+
+#### Combien ?
+
+Position 
+
+Longueur
+
+Saturation
+
+...
+
+#### **Données quantitatives**
+]
+
+--
+.pull-right[
+### **Echelles d'identité**
+
+#### Quoi? Où?
+
+Forme
+
+Teinte
+
+Région spatiale 
+
+...
+
+#### **Données qualitatives**
+]
+
+---
+class: center, full
+
+## Echelles - efficience
+![:scale 90%](img/echelles_efficience.png)
+    </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;
+  });
+})();</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;  // 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>
diff --git a/courses/01-dataviz-intro.pdf b/courses/01-dataviz-intro.pdf
new file mode 100644
index 0000000..e35018e
Binary files /dev/null and b/courses/01-dataviz-intro.pdf differ
diff --git a/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-2-1.png b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-2-1.png
new file mode 100644
index 0000000..a5528ca
Binary files /dev/null and b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-2-1.png differ
diff --git a/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-3-1.png b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-3-1.png
new file mode 100644
index 0000000..9c69272
Binary files /dev/null and b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-3-1.png differ
diff --git a/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-4-1.png b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-4-1.png
new file mode 100644
index 0000000..9fadccf
Binary files /dev/null and b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-4-1.png differ
diff --git a/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-5-1.png b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-5-1.png
new file mode 100644
index 0000000..82fb826
Binary files /dev/null and b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-5-1.png differ
diff --git a/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-6-1.png b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-6-1.png
new file mode 100644
index 0000000..926770e
Binary files /dev/null and b/courses/01-dataviz-intro_files/figure-html/unnamed-chunk-6-1.png differ
diff --git a/courses/lab01-ggplot-intro.html b/courses/lab01-ggplot-intro.html
new file mode 100644
index 0000000..57592c4
--- /dev/null
+++ b/courses/lab01-ggplot-intro.html
@@ -0,0 +1,417 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+  <head>
+    <title>Introduction ggplot2</title>
+    <meta charset="utf-8" />
+    <meta name="author" content="Antoine Neuraz" />
+    <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">
+
+
+
+
+## ggplot2 implémente la grammaire de la visualisation 
+
+## Les essentiels 
+
+### Data: Données source. 
+--
+
+### Geoms: Marques de la visualisation (points, lignes, ...)
+--
+
+### Scales: Echelles de la visualisation (position, taille, couleur,...)
+
+---
+## ggplot2 implémente la grammaire de la visualisation 
+
+## Les bonus
+
+### Stats: Opérations de modification des données sources (moyenne, ...)
+
+--
+
+### Faceting: Découpe le dataset pour créer des sous-graphes
+
+--
+### Coordinates: système de coordonnées de la visualisation 
+
+---
+class:
+# Architecture d'un graph avec ggplot2
+
+
+```r
+ggplot(data = &lt;DATA.FRAME&gt;, # chargement des données
+       aes(x=&lt;VARIABLE1&gt;,   # définition des aesthetics (aes)
+           y=&lt;VARIABLE2&gt;,   # = échelles
+           ...), # grand nombre d'aesthetics existent
+       ) + 
+  geom_&lt;*&gt;()
+```
+
+---
+# Ressources
+
+
+### Reference: [https://ggplot2.tidyverse.org/reference/]()
+
+### aesthetics: [https://frama.link/tidyverse-aesthetics]()
+
+
+
+---
+
+## La base
+
+.small[
+
+```r
+data("iris")
+
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width))
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-2-1.png)&lt;!-- --&gt;
+]
+---
+
+## Ajouter une geometrie
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width)) + # le plus ajoute un layer
+* geom_point()
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-3-1.png)&lt;!-- --&gt;
+]
+
+---
+## Ajouter une géométrie [2]
+.small[
+
+```r
+ggplot(iris) + 
+* geom_point(aes(x=Sepal.Length,
+*          y=Sepal.Width))
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-4-1.png)&lt;!-- --&gt;
+]
+
+---
+# Ajouter un encodage (aesthetics)
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+*          color = Species)) +
+  geom_point() 
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-5-1.png)&lt;!-- --&gt;
+]
+---
+## Ajouter une 2ème géométrie
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+           color = Species)) +  
+  geom_point() +
+* geom_smooth()
+```
+
+```
+## `geom_smooth()` using method = 'loess' and formula 'y ~ x'
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-6-1.png)&lt;!-- --&gt;
+]
+
+
+
+---
+## Régler les options de la géométrie
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+           color = Species)) +  
+  geom_point() +
+* geom_smooth(method='lm', se=FALSE)
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-7-1.png)&lt;!-- --&gt;
+]
+
+---
+## Ajouter une facette
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+           color = Species)) +  
+  geom_point() +
+  geom_smooth(method='lm', se=FALSE) + 
+* facet_grid(~Species)
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-8-1.png)&lt;!-- --&gt;
+]
+---
+## Régler le thème
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+           color = Species)) +  
+  geom_point() +
+  geom_smooth(method='lm', se=FALSE) + 
+  facet_grid(~Species) +
+* theme_minimal()
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-9-1.png)&lt;!-- --&gt;
+]
+
+---
+## Régler les titres et labels
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+           color = Species)) +  
+  geom_point()+
+  theme_minimal() +
+* labs(title = "Sépales des iris",
+*      subtitle = "Longueur et largeur des sépales* en fonction de l'espèce",
+*      x= "Longueur",
+*      y = "Largeur",
+*      caption = "* Chacune des pièces du calice de la fleur. / source: Iris dataset"
+* )
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-10-1.png)&lt;!-- --&gt;
+]
+
+---
+## Ajuster la légende
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+           color = Species)) +  
+  geom_point()+
+  theme_minimal() +
+  labs(title = "Sépales des iris",
+       subtitle = "Longueur et largeur des sépales* en fonction de l'espèce",
+       x= "Longueur",
+       y = "Largeur",
+       caption = "* Chacune des pièces du calice de la fleur. / source: Iris dataset"
+  ) + 
+* guides(color = guide_legend(title = "Espèce"))
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-11-1.png)&lt;!-- --&gt;
+]
+---
+## Paufiner le thème
+
+.small[
+
+```r
+ggplot(iris, 
+       aes(x=Sepal.Length, 
+           y=Sepal.Width,
+           color = Species)) +  
+  geom_point()+
+  theme_minimal() +
+  labs(title = "Sépales des iris",
+       subtitle = "Longueur et largeur des sépales* en fonction de l'espèce",
+       x= "Longueur",
+       y = "Largeur",
+       caption = "* Chacune des pièces du calice de la fleur. / source: Iris dataset"
+  ) + 
+  guides(color = guide_legend(title = "Espèce")) + 
+* theme(panel.grid.minor = element_blank(),
+*       legend.position = "bottom")
+```
+
+![](lab01-ggplot-intro_files/figure-html/unnamed-chunk-12-1.png)&lt;!-- --&gt;
+]
+---
+# A l'aide !!!
+
+### site du tidyverse: [https://ggplot2.tidyverse.org]()
+
+### R for datascience: [https://r4ds.had.co.nz/]()
+
+### stackoverfow: [https://stackoverflow.com]()
+
+### votre moteur de recherche préféré
+
+---
+# TODO
+
+### Ouvrir le dataset "mtcars"
+
+### représenter le "Gross horsepower" en fonction du nombre de cylindres
+
+### utiliser l'encodage multiple sur le nombre de cylindres
+
+### ajouter l'information du nombre de carburateurs
+
+### Paufiner le plot (axes, titres, thème)
+
+---
+# TODO 2
+
+### représenter la distribution du nombre de miles per gallon en histogramme
+
+### représenter la distribution du nombre de miles per gallon en boxplot
+
+### representer la distribution du nombre de miles per gallon en fonction du nombre de cylindres
+
+### ajouter les points par dessus la distribution 
+
+### paufiner le plot (axes, titres, thème)
+    </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,
+"highlightLines": 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;
+  });
+})();
+// adds .remark-code-has-line-highlighted class to <pre> parent elements
+// of code chunks containing highlighted lines with class .remark-code-line-highlighted
+(function(d) {
+  const hlines = d.querySelectorAll('.remark-code-line-highlighted');
+  const preParents = [];
+  const findPreParent = function(line, p = 0) {
+    if (p > 1) return null; // traverse up no further than grandparent
+    const el = line.parentElement;
+    return el.tagName === "PRE" ? el : findPreParent(el, ++p);
+  };
+
+  for (let line of hlines) {
+    let pre = findPreParent(line);
+    if (pre && !preParents.includes(pre)) preParents.push(pre);
+  }
+  preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted"));
+})(document);</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;  // 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>
diff --git a/courses/lab01-ggplot-intro.pdf b/courses/lab01-ggplot-intro.pdf
new file mode 100644
index 0000000..0b7fbff
Binary files /dev/null and b/courses/lab01-ggplot-intro.pdf differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-10-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-10-1.png
new file mode 100644
index 0000000..2490310
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-10-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-11-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-11-1.png
new file mode 100644
index 0000000..e276eb4
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-11-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-12-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-12-1.png
new file mode 100644
index 0000000..78ff835
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-12-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-2-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-2-1.png
new file mode 100644
index 0000000..bfda1e7
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-2-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-3-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-3-1.png
new file mode 100644
index 0000000..3691348
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-3-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-4-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-4-1.png
new file mode 100644
index 0000000..3691348
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-4-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-5-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-5-1.png
new file mode 100644
index 0000000..f1a85dc
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-5-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-6-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-6-1.png
new file mode 100644
index 0000000..6ec11ee
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-6-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-7-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-7-1.png
new file mode 100644
index 0000000..2ee87a6
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-7-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-8-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-8-1.png
new file mode 100644
index 0000000..0137fbd
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-8-1.png differ
diff --git a/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-9-1.png b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-9-1.png
new file mode 100644
index 0000000..8582600
Binary files /dev/null and b/courses/lab01-ggplot-intro_files/figure-html/unnamed-chunk-9-1.png differ
diff --git a/courses/libs/remark-css-0.0.1/default.css b/courses/libs/remark-css-0.0.1/default.css
new file mode 100644
index 0000000..cb9fc34
--- /dev/null
+++ b/courses/libs/remark-css-0.0.1/default.css
@@ -0,0 +1,72 @@
+a, a > code {
+  color: rgb(249, 38, 114);
+  text-decoration: none;
+}
+.footnote {
+  position: absolute;
+  bottom: 3em;
+  padding-right: 4em;
+  font-size: 90%;
+}
+.remark-code-line-highlighted     { background-color: #ffff88; }
+
+.inverse {
+  background-color: #272822;
+  color: #d6d6d6;
+  text-shadow: 0 0 20px #333;
+}
+.inverse h1, .inverse h2, .inverse h3 {
+  color: #f3f3f3;
+}
+/* Two-column layout */
+.left-column {
+  color: #777;
+  width: 20%;
+  height: 92%;
+  float: left;
+}
+.left-column h2:last-of-type, .left-column h3:last-child {
+  color: #000;
+}
+.right-column {
+  width: 75%;
+  float: right;
+  padding-top: 1em;
+}
+.pull-left {
+  float: left;
+  width: 47%;
+}
+.pull-right {
+  float: right;
+  width: 47%;
+}
+.pull-right ~ * {
+  clear: both;
+}
+img, video, iframe {
+  max-width: 100%;
+}
+blockquote {
+  border-left: solid 5px lightgray;
+  padding-left: 1em;
+}
+.remark-slide table {
+  margin: auto;
+  border-top: 1px solid #666;
+  border-bottom: 1px solid #666;
+}
+.remark-slide table thead th { border-bottom: 1px solid #ddd; }
+th, td { padding: 5px; }
+.remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) { background: #eee }
+
+@page { margin: 0; }
+@media print {
+  .remark-slide-scaler {
+    width: 100% !important;
+    height: 100% !important;
+    transform: scale(1) !important;
+    top: 0 !important;
+    left: 0 !important;
+  }
+}
