Combiner R & Observable avec Quarto

Author

N. Lambert, T. Giraud

Published

May 17, 2022

Dans ce notebook “quatro” nous allons tout d’abord préparer des données avec le logiciel R puis nous les representerons avec Observable.

1 Préparation des données et analyse avec R

Import de la couche géographique des pays du monde

Nous utilisons le package sf, package de référence pour le traitement des données spatiales vectorielles dans R.

library("sf")
countries <- st_read("data/countries.gpkg", quiet = T)
plot(st_geometry(countries))

Import du jeu de données

Ce jeu de données contient des données de population et de PIB.

Code
data <- read.csv("data/stat.csv")
head(data)
   id                 name  region      pop          gdp    gdppc year
1 AFG          Afghanistan    Asia 38928341  19807067268   508.81 2020
2 AGO               Angola  Africa 32866268  62306913444  1895.77 2020
3 ALB              Albania  Europe  2837743  14799615097  5215.28 2020
4 AND              Andorra  Europe    77146   3155065488 40897.33 2019
5 ARE United Arab Emirates    Asia  9770526 421142267937 43103.34 2019
6 ARG            Argentina America 45376763 383066977654  8441.92 2020

Jointure entre les données et les géométries

Simple jointure à partir d’un identifiant commun.

Code
world = merge(countries, data, by.x = "ISO3", by.y = "id")

Conversion en geojson et export

Cette étape est indispensable pour pouvoir représenter les données avec observable ensuite.

Code
library(geojsonsf)
geo = sf_geojson(world)
write(geo, "data/world.geojson")

2 Geoviz avec Observable

Nous allons maintenant représenter les données avec Observable

Import des données

Code
world = FileAttachment("data/world.geojson").json()

Chargement des librairies nécessaires

Code
d3 = require("d3@7", "d3-geo-projection@4")
bertin = import('https://cdn.skypack.dev/bertin@0.9.12')

Construction de l’interface

Code
viewof val = Inputs.radio(["pop", "gdp"], {
  label: "Data to be displayed",
  value: "pop"
})
viewof step = Inputs.range([10, 50], {
  label: "step",
  step: 1,
  value: 15
})
viewof k = Inputs.range([5, 30], {
  label: "Radius of the largest circle",
  step: 1,
  value: 15
})
viewof dorling = Inputs.toggle({ label: "Avoid overlap (dorling)" })

Construction et affichage de la carte

Code
bertin.draw({
  params: { projection: d3.geoBertin1953() },
  layers: [
    {
      type: "header",
      text:
        (val == "pop" ? "Population mondiale" : "PIB mondial") + ` (step = ${step})`,
      fill: "#cf429d"
    },
    {
      type: "regularbubble",
      geojson: world,
      step: step,
      values: val,
      k: k,
      fill: "#cf429d",
      tooltip: [
        "$NAMEen",
        "",
        "Valeur pour le pays",
        `$${val}`,
        "",
        "Valeur du point",
        "$___value" // ___value is the name of the computed field with the value of the point
      ],
      dorling: dorling
    },
    { geojson: world, fill: "white", fillOpacity: 0.3, stroke: "none" },
    { type: "graticule" },
    { type: "outline" }
  ]
})

3 Sources

Code source de ce notebook : https://github.com/rCarto/Quarto.
Il s’agit d’un fork de : https://github.com/neocarto/Quarto