Représentez vos données de façon innovante !

Je suis ravi de présenter ce premier article concernant la symbologie. Il s’agit des différentes techniques que l’on peut appliquer aux données pour les représenter graphiquement sur une carte. Ici, nous allons voir la densité de points qui est l’un des derniers outils de visualisation disponible dans l’ArcGIS API for JavaScript. La densité de points est une technique cartographique classique qui consiste à dessiner de manière aléatoire des points dans les limites d'un polygone, afin de visualiser la densité d'une population ou d'un autre paramètre quantitatif.

Cette application utilise la classe DotDensityRenderer, une nouveauté de la version 4.11 de l'API qu’il faut charger dans le require.

L'API permettant de créer cette visualisation est assez simple :
Retrouvez tout le code sur mon GitHub.

La propriété renderer pour visualiser vos données

La propriété renderer définit comment visualiser chaque entité de la couche. Elle est de classe « Renderer » (tout comme d’autres propriétés sont de classe « nombre », « chaîne de caractères », etc.). C’est une propriété autocast. L’autocasting est un moyen pratique de définir des propriétés typées sans faire référence à des modules d'API supplémentaires via la fonction require(). Les développeurs peuvent passer les paramètres de constructeur directement à la propriété souhaitée et l'API instancie l'objet avec les paramètres de constructeur fournis en interne, ce qui simplifie le processus pour le développeur.

Selon le type de rendu, les entités peuvent être visualisées avec le même symbole ou avec des symboles variables en fonction des valeurs des champs d'attributs ou des fonctions fournis, comme avec le DotDensityRenderer.

Dans la propriété renderer on définit alors : type: "dot-density".

La propriété attributes vous permet de mapper plusieurs sous-catégories d’un même ensemble comme par exemple la population active. Nous allons utiliser les données hébergées sur le lien suivant et en accès libre https://esrifrance.maps.arcgis.com/home/item.html?id=a256c9833cc2465fbfb707959f1d82b4. Comme montré dans l'article sur l'ajout de couches à votre carte, nous allons ajouter celle-ci à notre carte grâce à l'id de la couche situé dans l'url. Vous pouvez accéder aux champs dans l'onglet données et cliquer sur "Champs" pour accéder aux noms des champs.

Pour visualiser la densité de population en fonction des catégories socio-professionnelles (CSP), vous pouvez simplement inclure des objets JSON qui incluent les noms de champs contenant la population à représenter par densité de points, avec la couleur qu’on souhaite lui donner et le titre pour la légende.


attributes: [{
    field: "CSP_PopActive_Cadres_Actifs",
    label: "Cadres actifs",
    color: "#f23c3f" //blue
  }, {

    field: "CSP_PopActive_Professions_inter",
    label: "Professions intermédiaires Actifs",
    color: "#ff6a00" //orange
  },]

Nous allons représenter dans la population active, les cadres, les ouvriers, les artisans, commerçants et chefs d’entreprises, les employés (secrétaires, vendeurs, pompiers, policiers, militaires…) et les professions intermédiaires (métiers considérés intermédiaires entre le cadre et l'employé). On peut retrouver la définition complète des CSP sur le site de l’INSEE.

Cela crée une carte, que je trouve magnifique, de la densité de population active en France. On voit notamment la « diagonale du vide » en France, qui part du nord-est et traverse le centre et le Massif Central. En zoomant sur Paris, on se rend compte que les cadres sont concentrés sur Paris et dans la banlieue-Ouest. Dans le 19ème et 20ème on retrouve une plus grande diversité. Dans le Sud-Est et Nord-Est de Paris on observe une forte présence des employés et professions intermédiaires actifs.

Gardez à l'esprit que la lecture et interprétation de la carte peut être radicalement différente en fonction des couleurs que vous choisissez pour représenter les données.

Nous verrons plus tard dans l’article comment ajouter une légende à notre interface.

Attention aux échelles et aux performances

Dans la propriété de « renderer », on peut choisir combien de personnes représente un point à une échelle donnée, ainsi lorsqu’on zoomera ou dézoomera, le point s’adaptera à votre niveau de zoom et représentera un nouveau nombre de personnes suivant une relation linéaire basée sur ce qu’on a fixé dans la propriété renderer :


referenceDotValue: 100,  // 1 dot = 1,000 personnes quand le view.scale est de 1:1,000,000
referenceScale: 3000000,  // view.scale

Pour une échelle à 1:3 000 000 un point représentera 100 personnes.

Un navigateur qui permet WebGL est une exigence de l’API ArcGIS pour JavaScript. Il faut donc que le navigateur puisse supporter WebGL pour que l'application fonctionne.

WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d'un client. Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL.

Cela nous permet de visualiser plus de données. Mais cela signifie aussi que les performances d'affichages sont dépendantes de votre ordinateur et de son GPU. N'hésitez pas à faire plusieurs tests de valeurs pour le nombre de personnes représentées par un point et observez l'impact de ces valeurs sur les performances d'affichages à plusieurs échelles. Les performances sont impactées par le nombre d’entités affichées à l'écran et le nombre de champs traités.

Il faut faire attention à choisir une valeur de point qui fonctionne bien. Une valeur de point qui fonctionne bien pour les petites régions ne fonctionnera pas forcément pour les grandes régions, et inversement.

Je vous conseille de définir des restrictions d'échelle de visibilité minimale et maximale pour les couches générées avec une densité de points. MinScale empêchera la vue de rendre des entités trop petites pour une interprétation judicieuse.

Le réglage de maxScale à un niveau approprié empêchera l'utilisateur de faire des déductions incorrectes à partir des données. Par exemple, lorsqu’ils effectuent un zoom trop important, les utilisateurs peuvent commencer à voir des motifs spatiaux dans les points qui n’existent pas réellement (car ils sont dessinés au hasard). Si on zoome fortement et que un point est égal à une unité par exemple une personne, les utilisateurs peuvent également être susceptibles de lire de manière incorrecte les emplacements des points comme étant les emplacements réels du phénomène cartographié, ce qui n’est pas le cas. Par conséquent, la définition de contraintes de vue et / ou de visibilité de couche raisonnables aidera à éviter cela.


const view = new MapView({
  container: "viewDiv",
  map: map,
  constraints: {
    // les utilisateurs ne peuvent pas zoomer au-delà
    maxScale: 35000
  }
})

Le widget Légende

Pour comprendre nos données, nous pouvons ajouter une légende à notre carte. La légende est forcément liée à une vue. En s’aidant de la documentation, on charge la classe « Legend » dans le require. Il suffit alors de renseigner la propriété « layerinfos » pour déterminer pour quelle couche on applique la légende et si on veut donner un titre à la légende. Enfin, on ajoute la légende à l’interface utilisateur de la vue.


var legend = new Legend({
  view: view,
  layerInfos: [{
    layer: PortalItem,
    title: "Légende"
  }]
});
view.ui.add(legend, "bottom-right");

Comme nous tirons parti du GPU pour le rendu de la densité de points, nous verrons dans d’autres articles que nous pouvons ajouter davantage d'interaction à nos visualisations de densité de points. Pour savoir comment, continuez de suivre le blog, les articles sur les thèmes suivants sont prévus !

- Explorer la densité de points avec une légende interactive

- Créer une visualisation animée de la densité de points

- Créer des visualisations bi-variées avec une densité de points

N’hésitez pas à jouer avec les données de la couche avec les autres populations actives ou le taux de chômage par CSP pour visualiser d’autres phénomènes intéressants sur la France !