Rechercher dans le blog

Un mardi, une appli #23 : Utiliser des gros volumes de données dans vos cartes web

Vous n'êtes peut-être pas passés à côté des magnifiques cartes de Terence Fosstodon (@researchremora sur Twitter) qui représentent la densité de population dans différents pays du monde et qui ont beaucoup été repartagées sur les réseaux sociaux. 

Je trouve ces cartes fascinantes, mais mon seul regret est de ne pas pouvoir naviguer dedans. Alors voici le défi de la 23è édition d'un mardi une appli : recoder une de ces cartes avec l'API JavaScript d'ArcGIS pour l'avoir en version interactive disponibles sur le web. 

Beaucoup (trop) de données

La donnée d'entrée provient du Kontur Population Dataset de 2022, une carte agrégeant les données de densité de population à l'échelle mondiale sous forme de polygones d'une résolution de 400 mètres.

La donnée initiale contient au total 32 589 553 enregistrements, et pèse environ 7,82 Go. Une fois réduite à la taille de la France,nous n'avons plus "que" 593 653 entités pour une taille de 332 MB, ce qui reste une volume de données très important, surtout pour un rendu web.

Comment gérer ce gros volume de données dans ma carte web ? 

Nous allons aborder rapidement 3 méthodes classiques à envisager pour mieux gérer ce type données dans le web : le pivot de table, la réduction du nombre d'attributs et la réduction des entités.

1/Pivot de table : Le pivot de table permet de réduire le nombre d'enregistrements dans la table, en transformant des lignes en colonnes. Dans l'exemple ci-dessous, chaque coordonnées XY d'un point comporte plusieurs données de température et de géométrie selon la profondeur. Nous pouvons transformer ces multiples enregistrements en un seul enregistrement contenant plusieurs champs pour les différentes températures et salinités selon la profondeur.

Cela ne réduit pas la taille de la donnée, mais la préparation de toutes les données d'attribut pour chaque géométrie dans une seule ligne permet à l'API JavaScript d'ArcGIS  de mettre à jour les valeurs de données sous-jacentes qui pilotent les propriétés visuelles du moteur de rendu à une vitesse pouvant atteindre 60 images par seconde sans retraiter les géométries sur le GPU. Cela évite les clignotements lorsque le moteur de rendu est mis à jour avec de nouvelles données. Cela peut cependant introduire un autre problème, qui est un nombre d'attributs trop important.

2/Réduction du nombre d'attributs : Les services d'entités dans ArcGIS sont limités à 1024 colonnes. Cela nous laisse beaucoup de marge, mais pensez toujours à supprimer les attributs qui ne seront pas utiles dans votre application finale car cela peut potentiellement beaucoup alléger vos données.

3/Réduction des entités : C'est cette dernière solution que j'ai utilisée pour réduire la taille de mes données. Si vos données sont très denses, vous avez plusieurs possibilités, notamment la sélection d'uniquement certains enregistrements ou l'agrégation des enregistrements. Vous pouvez le faire directement côté client grâce à la propriété FeatureReduction des couches d'entités sur l'API JavaScript d'ArcGIS, ou bien en amont de la publication web avec des outils bureautique.

J'ai pour ma part utilisé l'outil d'agrégation d'ArcGIS Pro qui m'a permis de regrouper les données dans une maille hexagonale de 7 kilomètres avant la publication sur le web, ce qui me permet de ne pas stocker un tros gros volume de données en ligne. J'ai ainsi pu réduire le nombre d'enregistrements à 28 126 pour un espace de stockage de 15MB, tout en gardant une résolution qui me semblait correcte pour mon application.

L'application

Une fois mes données préparées et publiées, j'ai pu obtenir le résultat ci-dessous avec l'API JS d'ArcGIS. N'hésitez pas à aller le consulter en pleine page pour une meilleure expérience.

J'ai essayé au maximum de coller au style graphique proposé par Terence Fosstodon, tout en ajoutant des fonctionnalités d'interactivité (navigation, popups, ...). 

Les densités de population en France sont donc ici représentées avec un regroupement par maille hexagonale de 7km, avec une symbologie dont la couleur et la hauteur varient selon le nombre d'habitants par unité de maille. Il est possible de cliquer sur les hexagones pour connaître le nombre d'habitants à l'intérieur de celui-ci.

Comme sur la carte de Terence, le caractère centralisé de la France est bien mis en avant, avec l'écrasant pic représentant Paris et l'Ile-de-France par rapport au reste du territoire.

Le code

L'intégralité du code est disponible sur mon Github. Le code est assez classique et l'article déjà long, donc je ne vais commenter que certains points saillants.

Pour la symbologie, j'ai appliqué un rendu simple sur lequel j'ai utilisé la propriété visualVariables avec des variables de couleur et de taille sur l'axe de hauteur toutes deux appliqués au champ contenant la population totale de chaque cellule.

//création de la carte "map"    
  popLayer7km.renderer = {
    type: "simple", // autocasts as new SimpleRenderer()
    symbol: {
      // symbol type required for rendering point geometries
      type: "polygon-3d",
      symbolLayers: [
        {
          // renders polygons as volumetric objects
          type: "extrude" // autocasts as new ObjectSymbol3DLayer()
        }
      ]
    },

    visualVariables: [
      {
        type: "color",
        field: "SUM_population", // field containing data sum of population
        stops: [
          { value: 0, color: "#F7E9E9" },
          { value: 75000, color: "#E297B5" },
          { value: 380000, color: "#BB4B6C" },
          { value: 859431, color: "#16041F" }
        ]
      },
      {
        type: "size",
        field: "SUM_population", // field containing data sum of population
        stops: [
          { value: 0, size: 1 },
          { value: 859431, size: 800000 }
        ],
        axis: "height"
      }
    ]
  };

J'ai également ajouté un loader sous la forme d'un gif qui indique à l'utilisateur que l'application est en train de charger. Celui-ci disparait lorsque la scène a fini de charger.

//création de la carte "map"    
  view.watch("updating", function () {
    loader.style.display = "none";
  });
});

Enfin, j'ai utilisé une scène locale pour représenter une scène centrée sur la France. Nous verrons ensemble un tutoriel autour de cette notion dans un article à venir. 

C'est tout pour cette application ! La semaine prochaine a lieu le Dev Summit d'Esri, alors nous nous retrouverons bientôt pour parler des annonces qui y seront faites. N'hésitez pas à consultez cet article pour plus de détails sur cette semaine de conférences.


Aucun commentaire:

Enregistrer un commentaire