Vega-Lite : graphique en courbe

Le graphique en courbe est particulièrement adapté pour représenter une évolution au cours du temps ou comparer plusieurs séries de données sur un même axe. Par exemple, il permet de visualiser le nombre de publications par année selon leur statut Open Access.

Configurer la routine

Dans cet exemple, les données sont préparées à l’aide de la routine pairing-with.

La routine prend en entrée deux champs :

• Champ source : Année de publication.
• Champ cible : Open Access.

Elle produit automatiquement une structure de données contenant trois champs :

{
  "source": "2018",
  "target": "Ouvert",
  "weight": 42
}

• source : les valeurs affichées sur l’axe des abscisses (ici les années de publication).
• target : les différentes séries représentées par une courbe (ici les statuts Open Access).
• weight : le nombre de documents correspondant à chaque couple source/target.

Cette structure est directement exploitable par Vega-Lite pour tracer une courbe par valeur du champ target.

Créer le graphique

Dans les paramètres du champ, sélectionnez le format Graphique – Syntaxe Vega-Lite, activez le Mode avancé, puis remplacez le contenu par le script suivant :

{
  "background": "transparent",
  "padding": 40,
  "width": "container",
  "height": 400,
  "autosize": { "type": "fit", "contains": "padding" },
  "transform": [
    {
      "filter": "datum.source != null && datum.source != '' && datum.target != null && datum.target != '' && datum.weight > 0"
    }
  ],
  "mark": {
    "type": "line",
    "point": { "filled": true, "size": 40 },
    "strokeWidth": 3
  },
  "encoding": {
    "x": {
      "field": "source",
      "type": "ordinal",
      "sort": "ascending",
      "title": "Nom de l'axe des abscisses",
      "axis": { "labelAngle": 0, "labelOverlap": true }
    },
    "y": {
      "aggregate": "sum",
      "field": "weight",
      "type": "quantitative",
      "title": "Nom de l'axe des ordonnées",
      "axis": { "format": "d", "tickMinStep": 1 }
    },
    "color": {
      "field": "target",
      "type": "nominal",
      "title": "Légende"
    },
    "tooltip": [
      { "field": "source", "type": "ordinal", "title": "Axe X" },
      { "field": "target", "type": "nominal", "title": "Courbe / Ressource" },
      {
        "aggregate": "sum",
        "field": "weight",
        "type": "quantitative",
        "title": "Nombre de documents"
      }
    ]
  }
}

Vous obtiendrez ce graphique :

Cette recette est issue d’une proposition d’une utilisatrice de Lodex. Merci à elle pour ce partage.