13-créer-des-graphiques-et-cartes-pour-le-web.Rmd

# (PART) Dataviz pour le web {-}

# Créer des graphiques et cartes pour le web

## Highcharter

Highcharter(http://jksunk.com.highcharter) est un module qui permet d'exploiter la librairie [Highcharts](http://highcharts.com) en R.

La syntaxe obéi en partie à la même logique que ggplot :

- Définition d'un géom;

- Définition d'une aesthétique.

La différence avec ggplot2 : 

- tout se fait dans une seule fonction (**hchart()**)

- le *%>%* remplace le *+*

La syntaxe de hchart est la suivante : 

```{r eval=F}
hchart(MA_TABLE,"MON_TYPE_DE_GRAPHIQUE",hcaes(MON_AESTHETIC))
```

Quelques graphiques possibles :

Type de graphique|Nom
-----------------|---
Nuage de point|scatter
Diagramme barre|column ou bar
Ligne|line
Aire|area
Camenbert|pie
Treemap|treemap
Radar|polarline

### Exemple type de graphique

Voici un exemple de diagramme barre sur les données de mortalités.

```{r}
highchart<-indicateur311 %>%
  filter(Type_Zone != "Pays",
         Age_group=="All age ranges or no breakdown by age",
         Sex=="Both sexes or no breakdown by sex",
         Location=="Total (national level)"
         ) %>%
  group_by(Country_or_Area_Code) %>%
  filter(Year==max(Year)) %>%
  ungroup


hchart(highchart,"bar",hcaes(x=Country_or_Area_Name,y=Value,color=Country_or_Area_Name)) %>% 
  hc_colors(plasma(n=5)) %>%
  hc_plotOptions(series=list(shadow='true')) %>% 
  hc_title(text="Mortalité maternelle sur quelques zones du globe",
           align = "left",style=list(color = "#2b908f", fontWeight = "bold",fontFamily = 'Courier New')) %>%
  hc_subtitle(text="En 2015",align="left",style=list(color = "#2b908f")) %>%
  hc_xAxis(title=list(text="Zone")) %>%
  hc_yAxis(title=list(text="Taux de mortalité de la mère \n(pour 100 000 naissances)")) %>%
  hc_tooltip(
    pointFormat = '<b>{point.name}</b><br/>{point.y} décès pour 100 000 naissances'
  )
```

Quelques définitions des options utilisées ici :

- ***hc_colors()*** permet de définir les couleurs utlisées. elle prend en paramètre un vecteur de couleur de longueur égal à celui des modalités différentes de la variable utilisée dans l'aesthétique pour la couleur.

- ***hc_plotOptions()*** permet de définir les options globales du graphique.
2 niveaux d'options peuvent être définies avec hcchart :

  - celles s'appliquant à toute les séries de données, doivent être définies dans le paramètre *series*

  - celles s'appliquant aux séries de données d'un type particulier, doivent être définies dans le paramètre correspondant au nom de ce type, exemple, pour un graphique barre *bar=*.

- ***hc_title()*** et ***hc_subtitle()*** permettent de définir le titre et le sous-titre: texte, alignement, marge, style (couleur,police...)

- ***hc_xAxis()*** ***hc_yAxis()*** permet de définir les options de mise en forme des axes : titre des axes, bornes, formats d'affichage, ...

- ***hc_tooltip()*** permet de définir l'infobulle qui s'affiche : activation/désactivation,apparence, contenu. Ici l'option pointFormat nous permet de mieux définir le libellé.

Voici un exemple de graphique en ligne

```{r}
hchart(graphique2,"line",hcaes(x=Year,y=Value,color=Country_or_Area_Name)) %>%
  hc_title(text="Evolution de la mortalité maternelle dans le monde",align = "left") %>%
  hc_subtitle(text="Entre 2000 et 2015",align="left") %>%
  hc_yAxis(title=list(text="Taux de mortalité de la mère \n(pour 100 000 naissances)"),min=0,alternateGridColor='#FDFFD5') %>%
  hc_xAxis(title=list(text="Année")) %>%
  hc_tooltip(
    pointFormat = '<b>{point.name}</b><br/>{point.y} décès pour 100 000 naissances'
  ) %>% 
  hc_colors(plasma(n=5))
```

Les options de highcharter sont extrèmements nombreuses, highcharter étant basée sur highcharts, mais peu documentées. 

Le plus simple est de se référer à la documentation de l'[API Highcharts](https://api.highcharts.com/highcharts/) pour prendre connaissance des options possible et de voir ensuite comment adapter ce code dans highcharter.

### Les facettes

Highcharter permet de réaliser des graphiques à facette à partir d'une liste de graphiques réalisés avec Highcharter.
La fonction permettant cela est la fonction ***hw_grid()***

```{r FacetteHighchart}
#définition de la table de donnée
highchart_liste<-indicateur311 %>%
  filter(Type_Zone != "Pays",
         Age_group=="All age ranges or no breakdown by age",
         Sex=="Both sexes or no breakdown by sex",
         Location=="Total (national level)",
         Year>=2000
  ) 
#Création de la liste des graphiques highcharts
map(unique(highchart_liste$Country_or_Area_Name), function(x){
  highchart_liste %>% 
    filter(Country_or_Area_Name==x) %>% 
    hchart("scatter",hcaes(x=Year,y=Value,color=Country_or_Area_Name),
           showInLegend = FALSE) %>%
    hc_title(text=glue("Evolution de la mortalité maternelle - {x}"),align = "left") %>%
    hc_subtitle(text="Entre 2000 et 2015",align="left") %>%
    hc_yAxis(title=list(text="Taux de mortalité de la mère \n(pour 100 000 naissances)"),min=0,
             max=400) %>%
    hc_xAxis(title=list(text="Année")) %>%
    hc_tooltip(
      pointFormat = '<b>{point.name}</b><br/>{point.y} décès pour 100 000 naissances'
    ) 
}) %>% 
  hw_grid(ncol = 3,rowheight=250)
```

## Les cartes Leaflet

Leaflet est au départ un package de cartographique réalisé en javascript. R permet de produire des cartes en exploitant cette librairie.

Ci-dessous un exemple avancé de carte choroplète avec leaflet.

```{r}

tt<-World %>%
  rename(Country_or_Area_Code=iso_a3) %>%
  left_join(indicateur311 %>%
              filter(Age_group=="All age ranges or no breakdown by age",
                     Sex=="Both sexes or no breakdown by sex",
                     Type_Zone=="Pays",
                     is.na(Value_type)) %>%
              group_by(Country_or_Area_Code) %>%
              filter(!is.na(Value)) %>%
              filter(Year==max(Year)))
# création des quantiles de la variable d'intérêt
bins <-quantile(tt$Value,na.rm=T)
# création d'une palette de couleurs associée
pal <- colorBin("YlOrRd", domain = tt$Value, bins = bins)
#création d'un label ad hoc à afficher en surbrillance au passage de la souris sur la carte.
labels <- sprintf(
  "<strong>%s</strong><br/>%g décès pour 100 000 naissance en 2015",
  tt$name, tt$Value
) %>% lapply(htmltools::HTML)
#transformation de la projection nécessaire pour certaines cartes car Leaflet ne connait que le WGS 84
tt<-st_transform(tt,crs=("+proj=longlat +datum=WGS84 +no_defs"))

leaflet(tt) %>%
  addPolygons(data=tt,
              fillColor=~pal(Value),
              weight = 2,
              opacity = 1,
              color = "white",
              dashArray = "3",
              fillOpacity = 0.7,
              highlight = highlightOptions(
                weight = 5,
                color = "#666",
                dashArray = "",
                fillOpacity = 0.7,
                bringToFront = TRUE),
              label = labels,
              labelOptions = labelOptions(
                style = list("font-weight" = "normal", padding = "3px 8px"),
                textsize = "15px",
                direction = "auto"))


```

Pour réaliser des ronds proportionnel, il va falloir la aussi créer un centroide de nos polygones

```{r}
ttc<-st_centroid(tt)

bins <-quantile(ttc$Value,na.rm=T)
pal <- colorBin("YlOrRd", domain = ttc$Value, bins = bins)

carte_rond_proportionnel<-leaflet(ttc) %>%
  addPolygons(data=tt,
              fillColor = "#ffffff",
                opacity=.2,
              color = "white",
              dashArray = "3",
              fillOpacity = 0.7
  ) %>% 
  addCircles(data=ttc,
              fillColor=~pal(Value),
             radius=~100000*log2(Value),
              weight = 2,
              opacity = 1,
              color = "white",
              dashArray = "3",
              fillOpacity = 0.7,
              highlight = highlightOptions(
                weight = 5,
                color = "#666",
                dashArray = "",
                fillOpacity = 0.7,
                bringToFront = TRUE),
              label = labels,
              labelOptions = labelOptions(
                style = list("font-weight" = "normal", padding = "3px 8px"),
                textsize = "15px",
                direction = "auto")) %>% 
  addLegend("bottomright", pal = pal, values = ~Value,
            title = "Taux de décès des mères à la naissance",
            opacity = 1)
```

## Exporter une sortie html

La foncion `saveWidget` permet d'exporter une sotie d'un html Widget en html.

```{r, eval=F}
saveWidget(widget=carte_rond_proportionnel,file="Taux de décès des mères à la naissance.html")
```



## Exercice 7


Reprendre le nuage de point obtenu à partir des données ODD :taux de mortalité maternelle (Maternal_mortality_ratio) en 
fonction du produit intérieur brut (Gross_Domestic_Product_GDP) (Chapitre 4.1)

Obtenir ce graphique pour le web avec des infos bulles regroupant le nom du continent, de la zone et les données associées

Le résultat attendu : 

```{r eval=T,message=F,warning=F,echo=FALSE}
hchart(graphique1,"scatter",hcaes(x=Gross_Domestic_Product_GDP,
                              y=Maternal_mortality_ratio,
                              color=Continent)) %>%
  hc_plotOptions(series=list(shadow='false')) %>% 
  hc_tooltip(
    pointFormat = '<b>{point.Continent}</b><br/><b>{point.Parent_Zone_libelle}</b><br/>PIB de {point.x} un taux de mortalié maternelle de {point.y} (pour 100 000 naissances)'
  )
```