Atelier Quarto - Exercice 1

Observable JavaScript avec WidgetHTML : tableau, graphe, carte, inline code

Chargement des librairies

Un premier bloc de code (chunk en anglais) est utilisé pour charger les librairies javascript qui seront utilisées dans les blocs de code suivant.

import { aq, op } from '@uwdata/arquero' // le dplyr ou pandas du javascript
bertin = require("bertin") // le ggplot de la carto en javascript
import {view} from "@neocartocnrs/geoverview"

Chargement d’un json

Le geojson est un classique du web. La librairie bertin est très pratique pour faire des cartes équivalentes à celles de ggplot.

communes_mrn = FileAttachment("data/communes_mrn_crs4326.geojson").json()
// On commence ici par créer le tableau de donnée correspondant aux propriétés du geojson avec une fonction bien pratique de la librairie bertin
communes_mrn_table = bertin.properties.table(communes_mrn)

Affichage d’un tableau

Et voici un affichage sous forme de tableau HTML.

viewof search = Inputs.search(communes_mrn_table)
// le tableau avec les valeurs filtrées
Inputs.table( 
  search,
  {
    height: 800,
    rows: 71,
    layout: "fixed",
    sort: "population",
    reverse: true,
    columns:["nom", "population"] // choix des colonnes à afficher
  }
)

Un premier graphe

La libraire plot d’observable est un peu l’équivalent de ggplot en R. La logique est un peu différente mais, une fois prise en main, elle permet de composer des graphes à façon.

// La librairie plot est intégrée directement
Plot.plot({
  marginLeft: 180,
  x: {axis: "top", grid: true},
  marks: [
    Plot.barX(
      communes_mrn.features.map(d => d.properties), {
        x: "population", 
        y: "nom", 
        tip: "xy",
        sort: {y: "x", reverse: true}
    })
  ]
})

Une première carte pour vérifier les géométries

// la fonction pratique chargée dans les appels de librairie
view(communes_mrn)

Une carte en aplat de couleurs

// La librairie bertin est développé par un géographe français et très bien documentée
bertin.draw({
  params: { projection:"Mercator", margin: 50},
  layers: [
    {
      type: "layer",
      geojson: communes_mrn,
      stroke:"black",
      fill: {
        type: "choro",
        values: "population",
        nbreaks: 5,
        method: "jenks",
        colors: "Reds",
        leg_round: -1,
        leg_title: `Population`,
        leg_x: 10,
        leg_y: 10
      },
      fillOpacity: 0.5,
      tooltip: ["$nom","$population"]
    },
    {
      type:"tiles",
      style:"openstreetmap"
    },
  ]
})

Mélanger texte et résultats avec du inline

pop_rouen = bertin.properties.table(communes_mrn)
    .filter(commune => commune.insee_com === '76540')  // Filtrer par code_insee
    .map(commune => commune.population); // récupérer la propriété population

Rouen compte habitants.
Dans cette phrase, le nombre d’habitants est issus directement du code grace à la syntaxe inline code.