Extension:Graph/Tutoriel interactif de Graphe 2

Dans ce tutoriel, nous allons créer un graphe interactif qui affichera les taux de fertilité historiques par pays, avec un curseur pour sélectionner l'année, et une carte pour montrer la distribution des taux partout sur la planète. Le code source de ce graphe est ici. Vous pourriez également être intéressés par la documentation complète de Vega (en anglais).

Ce tutoriel est la suite de la première partie.

Dessiner une carte avec quelques données utiles

Une fois que le curseur est construit (voir la partie 1 de ce tutoriel), nous pouvons ajouter une carte et l'associée au données qui s'affichent. Il nous faudra deux sources de données : la carte au format TopoJSON qui est stockée ici en balisage wiki, et les données de fertilité stockées en format texte CSV dans le balisage wiki, extrait de la WorldBank (license)

Chaque pays est affecté de son code de pays ISO-3. Les données CSV comprennent les colonnes du pays (country) avec son identifiant (id) et les années dans l'intervalle 1960..2013, chacune sur une colonne séparée.

  // augmenter la taille du graphique
  "width": 500,
  "height": 260,
  // dans 'marks', augmenter 'x2' pour le balayage
  "x2": {"value": 500},

  // ajouter la section 'data'
  "data": [
    {
      "name": "highlights",
      "url": "wikiraw:///Extension:Graph/Demo/RawData:FertilityByCountryHistoric-csv",
      "format": {"type": "csv"},
      "transform": [
        {
          "type": "formula",
          "field": "v",
          // convertir currentYear en chaîne et en faire un nom de colonne
          // traiter la chaîne en tant que float
          "expr": "parseFloat(datum[''+currentYear])"
        }
      ]
    },
    {
      "name": "countries",
      "url": "wikiraw:///Extension:Graph/Demo/RawData:WorldMap-iso3-json",
      "format": {"type": "topojson","feature": "countries"},
      "transform": [
        {
          // indiquer que les données doivent être converties en chemins pour la marque 'path'
          "type": "geopath",
          "value": "data",
          "scale": 80,
          "center": [-180,125],
          "translate": [0,0],
          "projection": "equirectangular"
        },
        {
          // pour chaque ID de pays de la carte, chercher l'entrée correspondante dans la table highlights et la lui attacher en tant que valeur zippée
          "type": "lookup",
          "keys": ["id"],
          "on": "highlights",
          "onKey": "id",
          "as": ["zipped"],
          "default": {"v": null, "country":"No data"}
        }
      ]
    }
  ],
  // ajouter une échelle de couleur
    {
      "name": "color",
      "type": "linear",
      "domain": {"data": "countries","field": "zipped.v"},
      "domainMin": 1,
      "zero": false,
      "range":  ["#FFEDBC", "#f83600"]
    }
  // ajouter une marque de dessin de chemin pour afficher la carte
    {
      "name": "map",
      "type": "path",
      "from": {"data": "countries"},
      "properties": {
        "enter": {"path": {"field": "layout_path"}},
        "update": {
          "fill": [
            // la couleur de remplissage doit représenter le taux de fertilité à partir des données du pays converties dans une couleur de l'échelle des couleurs et en gris quand il n'y a pas de données.
            // tester la valeur correspondante et l'utiliser si elle a été trouvée
            // les tests sont du type 'if ... else-if ... else ...'
            {
              "test": "datum.zipped.v !== null",
              "scale": "color",
              "field": "zipped.v"
            },
            {"value": "grey"}
          ]
        },
        "hover": {"fill": {"value": "#989898"}}
      }
    }

Ajouter une légende

Graph fournira plus d'informations si l'utilisateur connait la correspondance des couleurs avec les chiffres. Malheureusement le placement de la légende demande encore à être amélioré dans Vega, mais il semble satisfaisant pour les graphiques non basés sur des cartes.

  // ajouter cette section dans l'objet racine
  "legends": [
    {
      // 'color' est le nom de l'échelle à afficher
      "fill": "color",
      "title": "Fertility",
      "offset": -300,
      "properties": {
        "gradient": {
          "stroke": {"value": "transparent"}
        },
        "title": {
          "fontSize": {"value": 14}
        },
        "legend": {
          "x": {"value": 0},
          "y": {"value": 180}
        }
      }
    }
  ],

Ajouter des statistiques

L'événement 'mouseover' associé à la carte 'map' va afficher dans le coin supérieur droit le pays avec son taux. Noter l'utilisation de \u007b et \u007d au lieu de des accolades { et } . Ceci n'est pas nécessaire si le graphique est inséré directement dans les balises ‎<graph>, mais évitera les problèmes lorsque Graph est utilisé simultanément avec {{ #tag:graph | ...graph definition... | mode=interactive }}.

  // ajouter un signal qui enregistre les positions x et y de la souris avec l'élément de données correspondant qui a été utilisé pour dessiner cet élément spécifique de la carte.
  // Noter que nous n'avons pas à enregistrer x et y, et que nous aurions pu utiliser simplement la valeur de la date.
  // On les garde pour montrer comment il est possible d'utiliser les coordonnées x, y pour afficher une boîte flottante avec les statistiques.
    {
      "name": "tooltipSignal",
      "init": {"expr": "{x: 0, y: 0, datum: {} }"}, 
      "streams": [
        {  
          "type": "@map:mouseover",    
          "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum.zipped}"
        },
        {  
          "type": "@map:mouseout",
          "expr": "{x: 0, y: 0, datum: {} }"
        }
      ] 
    }

    // ajouter cette marque pour afficher la valeur des données spécifiques au pays
    {
      "type": "text",
      "properties": {
        "enter": {
          "x": {"value": 500},
          "y": {"value": 10},  
          "align": {"value": "right"},
          "fontSize": {"value": 17},
          "fill": {"value": "black"}
        },
        "update": {
          // 'template' permet le formatage étendu. Les modèles utilisent la syntaxe {{...}}, et cela entre en conflit avec le balisage du wiki, donc nous le remplaçons par \u007b et \u007d
          "text": {"template": "\u007b{tooltipSignal.datum.country}\u007d \u007b{tooltipSignal.datum.v}\u007d"}
        }
      }
    }