Chapitre 15 Créer des graphiques et cartes pour le web

15.1 ggiraph

{ggiraph} est un package qui permet de rendre interactif des graphiques ggplot. Il permet notamment d’y ajouter des infobulles,

Ce package rajoute des fonctionnalités à ggplot2 comme par exemple geom_bar_interactive(),geom_line_interactive(), geom_point_interactive(), …

Il existe 3 types d’ajout :

tooltip: l’information à afficher dans les infobulles au survol de la souris
data_id: l’identifiant à associer à l’élément (utilisé pour les actions de survol et de clic)
onclick: fonction JavaScript à exéctuer lorsque des éléments sont cliqués

Le graphique est ensuite produit à l’aide de la fonction girafe() sur un objet ggplot.

15.1.1 Exemple de graphique avec infobulle

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

gg <- ODD_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)",
         is.na(Value_type)
  ) %>%
  filter(Year %in% c(2015)) %>%
  ggplot() +
  geom_col_interactive(aes(x = Country_or_Area_Name,
                           y = Value,
                           fill = Country_or_Area_Name,
                           tooltip = paste(Value, "décès pour 100 000 naissances"))) +
  theme(legend.position = "none",
        title = element_text(size = 8),
        axis.text = element_text(size = 7)) +
  scale_fill_ipsum() +
  coord_flip() +
  labs(title = "Mortalité maternelle sur quelques zones du globe",
       subtitle = "En 2015",
       y = "Taux de mortalité de la mère \n(pour 100 000 naissances)",
       x = "Zone",
       fill = "Zone"
  )

girafe(ggobj = gg, height_svg = 3)

L’infobulle peut contenir plusieurs informations. Il est aussi possible d’en changer l’apparence, grâce à différentes options à spécifier dans opts_tooltip:

offx / offy : pour la position de l’info-bulle par rapport à l’élément
css : pour modifier l’aspect de l’info-bulle.
use_fill=TRUE : pour adapter le fond de l’info-bulle à la couleur de l’élément.

gg <- ggplot(data = ODD_graphique2) +
  geom_line(aes(x = Year, y = Value)) +
  geom_point(aes(x = Year, y = Value)) +
  geom_point_interactive(aes(x = Year, y = Value,
                             tooltip = paste(Year, "\n", Value, "décès pour 100 000 naissances"))) +
  labs(title = "Mortalité maternelle sur quelques zones du globe",
       subtitle = "En 2015",
       y = "Taux de mortalité de la mère \n(pour 100 000 naissances)",
       x = "Zone",
       fill = "Zone"
  ) +
  theme_minimal()

girafe(ggobj = gg, height_svg = 3,
       options = list(
         opts_tooltip(css = "background-color:gray;font-style:italic;border-radius:5px;padding:5px;")))

Les éléments associés à data_id sont animés au survol de la souris. Ces animations sont configurées par les options suivantes:

opts_hover : animation des éléments du graphique
opts_hover_inv : animation sur le reste des éléments du graphique (estomper les autres éléments)
opts_hover_key : animation des éléments de la légende
opts_hover_theme : animation des éléments du thème

gg <- ODD_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)",
    is.na(Value_type)
  ) %>%
  filter(Year %in% c(2015)) %>%
  ggplot() + geom_col_interactive(aes(x = Country_or_Area_Name,
    y = Value, fill = Country_or_Area_Name,
    tooltip = Value,
    data_id = Value)) +
  theme(legend.position = "none",
    title = element_text(size = 8),
    axis.text = element_text(size = 7)) +
  scale_fill_ipsum() +
  coord_flip() +
  labs(title = "Mortalité maternelle sur quelques zones du globe",
    subtitle = "En 2015",
    y = "Taux de mortalité de la mère \n(pour 100 000 naissances)",
    x = "Zone",
    fill = "Zone"
  )

girafe(ggobj = gg, height_svg = 3,
  options = list(opts_hover(css = "cursor:grab;fill:red;stroke:blue;")))

Il existe d’autres options tel que opts_zoom, opts_sizing, …

15.1.2 Les facettes

{ggiraph} est compatible avec la réalisation des graphiques à facette

gg <- ODD_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)",
    is.na(Value_type)
  ) %>%
  filter(Year %in% c(2000, 2005, 2010, 2015)) %>%
  ggplot() +
  geom_col_interactive(aes(x = Country_or_Area_Name, y = Value, fill = Country_or_Area_Name, tooltip = Value)) +
  theme(legend.position = "none",
    title = element_text(size = 8),
    axis.text = element_text(size = 7)) +
  scale_fill_ipsum() +
  coord_flip() +
  labs(title = "Mortalité maternelle sur quelques zones du globe",
    subtitle = "En 2015",
    y = "Taux de mortalité de la mère \n(pour 100 000 naissances)",
    x = "Zone",
    fill = "Zone"
  ) +
  theme(legend.position = "none") +
  facet_wrap("Year")

girafe(ggobj = gg)

15.2 Les cartes Leaflet

Leaflet est au départ un package de cartographie 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.

data("World")

tt <- World %>%
  rename(Country_or_Area_Code = iso_a3) %>%
  left_join(ODD_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)

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 proportionnels, il va falloir là aussi créer un centroïde de nos polygones.

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)

carte_rond_proportionnel

15.3 Exporter une sortie html

La fonction saveWidget() permet d’exporter une sortie d’un html Widget en html.

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

15.4 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 9)

Obtenir ce graphique pour le web avec des infos bulles regroupant le nom du continent, de la zone, le PIB et le taux de mortalité maternelle.
Paramétrer la surbrillance du continent au survol d’élément.

Résultat attendu :