Le blog francophone consacré
aux technologies Esri

Conseils & Astuces ArcGIS Online - N°160

N° 160 - Utiliser Arcade et une API tiers pour afficher des pyramides des âges dans vos fenêtres contextuelles

Une question qui m'est souvent posée concerne la possibilité de représenter des données démographiques sous la forme de pyramide des âges. Ce type de diagramme n'est pas encore disponible dans les diagrammes standards des fenêtres contextuelles ArcGIS, mais il est possible d'utiliser une API tiers pour générer ce type particulier de diagramme. 


Pour voir comment procéder, je vous propose d'utiliser la couche d'entités France IRIS disponible via les contenus premium Esri France. Cette dernière contient de nombreux indicateurs socio-démographiques dont les populations Femme/Homme par tranches d'âges.

  1. Connectez-vous tout d'abord sur votre portail puis ouvrez la carte web contenant la couche d'entités France IRIS. Ici dans notre exemple, nous disposons pour chaque IRIS d'attribut contenant la population des femmes et des hommes en 2018 par tranches de 15 ans.

     
  2. Dans la zone de configuration des fenêtres contextuelles la couche de polygones vous pouvez supprimer l'élément "Liste des champs" proposé par défaut puis ajouter un élément de contenu Arcade. Ce dernier nous permettra de réaliser les calculs statistiques nécessaires et configurer un rendu personnalisé (en HTML) de nos informations.


  3. Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes, par l'expression Arcade ci-dessous :
    // On indique les champs nécessaires dans cette expression Arcade
    Expects($feature,"*")
    
    // On crée deux tableaux contenant les attributs à utiliser pour la pyramide des âges F et H
    // L'ordre des champs est importan, ce sera celui du diagramme
    var array_fields_F = ['P18_F75P','P18_F6074','P18_F4559','P18_F3044','P18_F1529','P18_F0014' ]
    var array_fields_H = ['P18_H75P','P18_H6074','P18_H4559','P18_H3044','P18_H1529','P18_H0014' ]
    
    // On initialise un tableau et on le remplit avec les valeurs de population pour les femmes
    var array_data_F = []
    for (var field_name in array_fields_F){
      Push(array_data_F, -1 * $feature[array_fields_F[field_name]])
    }
    // On initialise un tableau et on le remplit avec les valeurs de population pour les hommes
    var array_data_H = []
    for (var field_name in array_fields_H){
      Push(array_data_H, $feature[array_fields_H[field_name]])
    }
    
    // On définit les paramètres du diagramme pour générer l'image à partir de l'API QuickChart
    // Ces paramètres sont basés sur le modèle de diagramme suivant : https://tinyurl.com/y674wv7x
    var params_chart = {
      type: 'horizontalBar',
      data: {
        labels: ['75 et +','60-74 ans','45-59 ans','30-44 ans','15-29 ans','0-14 ans'],
        datasets: [
          {
            label: 'Femme',
            backgroundColor: 'rgb(255, 99, 132)',
            data: array_data_F,
          },
          {
            label: 'Homme',
            backgroundColor: 'rgb(54, 162, 235)',
            data: array_data_H,
          },
        ],
      },
      options: {
        legend: {
          display: true,
          position: 'bottom',
          align: 'center',
          fontSize: 16
        },
        title: {
          display: true,
          text: 'Pyramide des âges (2018)',
          fontSize: 17
        },
        scales: {
          xAxes: [
            {
              stacked: true,
            },
          ],
          yAxes: [
            {
              stacked: true,
            },
          ],
        },
      },
    }
    
    // Construction de l'url complète permettant de générer l'image de la pyramide des âges
    var site_url="https://quickchart.io/chart"
    var chart_url=site_url + "?c=" + URLEncode(Text(params_chart)) 
    
    // On renvoit la chaine HTML fin alisée pour le contenu de la fenêtre contextuelle
    return { 
      type : 'text', 
      text : `<img src='${chart_url}' />`
    }
    On notera l'usage de l'API QuickChart qui permet de générer différents types de diagrammes à partir d'une url et une série de paramètres. Celle-ci est basée sur des librairies Open Source que vous pouvez installer sur votre propre serveur, ou utiliser en ligne de manière gratuite (avec une limite sur le nombre de requêtes). Une version payante permet un accès illimité.

    On notera également l'usage du caractère backtick ( ` et non ') pour utiliser des littéraux et construire la chaîne HTML souhaitée. 
     
  4. Vous pouvez maintenant cliquer sur le bouton "Terminé" pour valider l'expression.

  5. La fenêtre contextuelle s'affiche désormais avec la pyramide des âges.


J'espère que cet exemple vous inspirera et que vous pourrez l'adapter à vos cas d'usage.


Bonne route sur ArcGIS Online !
   
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien

Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article: