Skip to main content

Sélections de la rédaction

Explorer la densification urbaine grâce à ArcGIS Maps SDK for JavaScript et Chart.js

Published Date

Un tableau de bord en ligne a été développé pour visualiser l’incidence de diverses politiques de croissance, d’énergie, d’émissions et de transport sur l’habitabilité urbaine à Vancouver, Victoria et Prince George. Ce tableau de bord peut être utilisé pour orienter l’aménagement urbain à long terme.

Vous pouvez consulter de plus amples renseignements sur les scénarios de densification illustrés à l’aide du tableau de bord sur cette page ArcGIS Hub. La principale fonctionnalité du tableau de bord a été développée à l’aide d’ArcGIS Maps SDK for JavaScript et de Chart.js.

Le travail sur le tableau de bord a commencé par plusieurs croquis de prototypes créés dans Balsamiq, ce qui a permis de procéder à des itérations rapides de la conception. Ces prototypes sont présentés dans l’image suivante.

Les maquettes Balsamiq des onglets d’exploration des scénarios et de comparaison de scénarios sont affichées au-dessus des captures d’écran de la version finale de l’application. Il existe de nombreuses similitudes dans la mise en page, la palette de couleurs et la conception générale entre la maquette et la version finale, mais la conception n’a pas été reproduite à l’identique dans l’application.

Une fois les prototypes approuvés par les chercheurs, le travail de mise en œuvre de l’application web a commencé.

Une version précédente du tableau de bord utilisait le cadre Bootstrap pour les éléments de l’interface utilisateur (IU) et pour fournir une mise en page réactive. Esri Inc. a lancé le système de conception Calcite Design System en 2021, à peu près au moment du développement. Il a donc été décidé de remplacer les composants de l’interface utilisateur par Calcite, tout en conservant le comportement réactif et l’interface à onglets de Bootstrap. Les éléments déroulants ont été remplacés par certains composants de Calcite. Des fiches de Calcite ont été utilisées pour chaque scénario dans la vue comparative et des infobulles, qui s’affichent lorsque l’utilisateur pointe la souris sur un élément d’interface, ont été ajoutées à la plupart des éléments pour fournir de l’aide. L’utilisation de la bibliothèque Calcite a permis d’obtenir un aspect cohérent et soigné dans les onglets d’exploration et de comparaison de scénarios.

Les captures d’écran de la version précédente du tableau de bord sont affichées au-dessus de celles de la version actuelle pour montrer que l’on a conservé l’interface à onglets et ajouté des composants Calcite. La conception de l’interface utilisateur de chaque onglet a été considérablement modifiée par rapport à la version précédente.

Captures d’écran du tableau de bord précédemment développé et de la version actuelle.

La bibliothèque JavaScript Chart.js a été utilisée pour tous les diagrammes du tableau de bord. Dans la mise en œuvre finale, des diagrammes en violon, en anneau et à barres ont été utilisés. Trois requêtes statistiques sont effectuées sur le service d’entités des bâtiments d’ArcGIS Online lors du chargement du tableau de bord. Les diagrammes sont initialisés et remplis une fois que les requêtes statistiques sont retournées. L’une des requêtes met à jour le diagramme de la page principale tandis que les autres sont exécutées pour alimenter les diagrammes de la vue comparative.

Le diagramme principal se met rapidement à jour lorsqu’une sélection est effectuée sur un groupe de bâtiments sur la carte, et ce, grâce à l’utilisation de requêtes statistiques côté client. Si vous souhaitez savoir comment utiliser les requêtes côté client dans vos propres applications, vous trouverez davantage de renseignements à ce sujet dans cet exemple de code de la documentation ArcGIS JavaScript. L’exemple montre également comment la bibliothèque Chart.js peut être utilisée avec ArcGIS Maps SDK for JavaScript.

Décisions de conception

Les tests utilisateurs ont été effectués une fois que le tableau de bord possédait tous ses éléments. D’autres modifications ont été apportées à la conception originale de l’application à la suite de ce processus de révision.

Vue comparative

La vue comparative a été conçue comme une grille de trois lignes sur quatre colonnes, les lignes représentant les villes et les colonnes les scénarios. En raison de la quantité de texte, d’images et de diagrammes sur les fiches, il était impossible de réduire la taille de ces dernières pour les appareils mobiles sans nuire à la lisibilité ou la richesse du contenu. Ainsi, lorsque la fenêtre du navigateur était redimensionnée, les fiches débordaient sur la ligne suivante, ce qui rendait difficile la comparaison pour chaque ville, comme le montre l’image ci-dessous.

La conception initiale de la vue comparative est redimensionnée pour montrer la difficulté d’effectuer une comparaison entre les fiches de Prince George.

Il a été décidé de supprimer ce comportement de débordement et de faire en sorte qu’il soit possible de faire défiler la grille de trois par quatre lorsque la taille de l’écran est trop petite pour afficher toutes les fiches. Lorsque la fenêtre du navigateur est si petite qu’elle ne permet d’afficher qu’une seule fiche sur la largeur, les fiches débordent sur une seule colonne. Cela rend l’application plus facile à utiliser sur un téléphone intelligent, puisque les scénarios peuvent être explorés en faisant défiler une seule colonne de fiches.

Diagramme en violon

Le diagramme en violon du tableau de bord est intéressant. Il montre la distance entre les bâtiments et les espaces ouverts, les commerces, les espaces publics, les pistes cyclables et les transports en commun. Dans la conception originale, un diagramme de dispersion était utilisé avec des cercles semi-transparents qui représentaient chaque bâtiment. Lorsque plusieurs cercles transparents se chevauchaient, la couleur était plus intense sur le diagramme, ce qui indiquait un plus grand nombre de bâtiments à la distance en question. Cependant, cette méthode de visualisation des données rendait difficile la compréhension de la distribution des points, car il fallait distinguer les variations d’intensité. Dans un diagramme en violon, le nombre de bâtiments à une certaine distance est représenté par la largeur de la forme, ce qui montre plus clairement la distribution des valeurs.

Le diagramme de dispersion est comparé côte à côte avec le diagramme en violon de la version actuelle du tableau de bord pour montrer comment la distribution des données peut être visualisée plus clairement dans cette dernière.

Le diagramme de dispersion comparé au diagramme en violon

Cohérence

Plusieurs commentaires formulés lors de l’examen portaient sur la difficulté de comparer les scénarios en raison d’incohérences dans la présentation des données entre les diagrammes et la carte.

Les couleurs utilisées sur la carte pour symboliser les bâtiments ont été mises à jour pour mieux correspondre aux teintes utilisées dans les diagrammes d’accompagnement.

Dans la version initiale, la sélection des bâtiments était annulée lorsqu’on changeait de thème. Cette sélection est désormais maintenue pour permettre de comparer les mesures relatives aux bâtiments sélectionnés avec différents thèmes.

Les diagrammes qui comportent des étiquettes d’utilisation du sol sur l’axe des x ont été mis à jour pour toujours afficher ces catégories, même lorsqu’elles sont associées à une valeur nulle. L’ordre des catégories d’utilisation du sol est également cohérent avec l’ordre de la légende et est le même pour tous les diagrammes. Ces modifications ont facilité la comparaison des données, car les catégories d’utilisation du sol ne changent plus et ne disparaissent plus lorsque le scénario est modifié.

Dans la conception initiale, des diagrammes à barres horizontales et verticales étaient utilisés en fonction du thème choisi. La conception finale est plus cohérente et ne comporte que des diagrammes à barres verticales.

Découvrabilité

Quelques commentaires laissaient paraître une incertitude quant à la fonctionnalité du tableau de bord en raison de l’emplacement des éléments ou d’un manque de documentation et d’indications visuelles.

Les boutons de réinitialisation de l’affichage et d’annulation de la sélection ont été déplacés dans le coin supérieur droit de la carte, afin de les rendre plus facilement visibles lors de la manipulation de la vue, car il s’agit d’actions qui sont effectuées sur la carte.

Lorsque l’utilisateur sélectionne le bouton de vue 3D, la caméra est maintenant inclinée vers le bas pour montrer les bâtiments en vue oblique. Cette mise à jour a été effectuée parce que la version précédente ne faisait que permettre d’incliner la caméra lorsque l’on cliquait sur le bouton et n’indiquait pas à l’utilisateur que la rotation de la caméra était possible en modifiant la carte.

La sélection des bâtiments n’était pas facile à découvrir, car elle nécessite l’utilisation de la touche ALT. Ainsi, une fenêtre contextuelle a été ajoutée à l’ouverture du tableau de bord, pour expliquer comment sélectionner des groupes de bâtiments.

La combinaison de la visualisation 3D et des requêtes statistiques à l’aide d’ArcGIS Maps SDK for JavaScript ainsi que des capacités de création de diagrammes de Chart.js a fourni une base solide pour créer un tableau de bord permettant d’explorer et d’agréger des statistiques sur des milliers d’entités de bâtiments. Les bibliothèques JavaScript ont contribué à accélérer le développement, ce qui a permis de consacrer du temps à l’amélioration de la convivialité de l’application sur la base des tests effectués par les utilisateurs. Nous remercions tous ceux qui ont essayé l’application et nous ont fait part de leurs commentaires pendant la phase de test. Vous pouvez essayer le tableau de bord par vous-même ici.