Visualiser vos données avec BigQuery et l'API Dataset

Ce document fournit une architecture de référence et un exemple de création de visualisations de données cartographiques avec des données de localisation dans Google Cloud Platform BigQuery et l'API Google Maps Platform Datasets, par exemple pour analyser des données municipales ouvertes, créer une carte de couverture des télécommunications ou visualiser les traces de déplacement d'une flotte de véhicules mobiles.

Les visualisations de données cartographiques sont un outil puissant pour engager les utilisateurs et découvrir des insights spatiaux dans les données de localisation. Les données de localisation sont des données qui comportent des éléments de type point, ligne ou polygone. Par exemple, les cartes météo aident les consommateurs à comprendre et à planifier leurs déplacements, et à se préparer aux tempêtes. Les cartes d'intelligence business aident les utilisateurs à dégager des insights de leur analyse de données, et les cartes de télécommunications aident les utilisateurs à comprendre la couverture et la qualité de leurs fournisseurs dans une zone de service donnée.

Cependant, il est difficile pour les développeurs d'applications de créer des visualisations de données cartographiques volumineuses qui soient performantes et offrent une expérience utilisateur exceptionnelle. Les données volumineuses doivent être chargées en mémoire côté client, ce qui ralentit le premier chargement de la carte. Le visuel doit être performant sur tous les appareils, y compris les téléphones mobiles d'entrée de gamme qui présentent des contraintes de mémoire et de GPU. Enfin, les développeurs doivent choisir une bibliothèque de rendu de données volumineuses portable, fiable et performante avec de grandes données.

Architecture de référence

Le développement d'applications avec de grandes visualisations de données nécessite deux composants principaux.

  1. Backend client : toutes les données et tous les services de l'application backend, tels que le traitement et le stockage.
  2. Client client : interface utilisateur de votre application avec un composant de visualisation de carte.

Vous trouverez ci-dessous un schéma du système montrant comment ces deux composants interagissent avec l'utilisateur de l'application, Google Cloud et Google Maps Platform pour créer une grande application de visualisation de données.

schéma de l'architecture

Considérations de conception

Pour créer une visualisation de données performante à l'aide de Google Cloud et de Google Maps Platform, vous devez tenir compte de plusieurs considérations de conception.

  1. Taille et fréquence de mise à jour des données sources
    1. Si les données sources au format GeoJSON sont inférieures à 5 Mo ou qu'elles sont mises à jour très fréquemment (par exemple, une prévision radar météo en temps réel), envisagez de diffuser les données en tant qu'objet GeoJSON côté client dans votre application et d'afficher les données avec une couche deck.gl.
    2. Si vos données font plus de 5 Mo et ne sont pas mises à jour plus d'une fois par heure, consultez l'architecture de l'API Datasets dans ce document.
      1. Les ensembles de données acceptent les fichiers d'une taille maximale de 350 Mo.
      2. Si vos données font plus de 350 Mo, envisagez d'élaguer ou de simplifier les données de géométrie dans le fichier source avant de les transmettre à Datasets (voir "Élagage des données" ci-dessous).
  2. Schéma et format
    1. Assurez-vous que vos données comportent une propriété d'ID unique pour chaque élément géographique. Un ID unique vous permet de sélectionner et de styliser un élément géographique spécifique ou d'associer des données à un élément géographique à visualiser. Par exemple, vous pouvez styliser un élément géographique sélectionné sur l'événement utilisateur "clic".
    2. Formatez vos données au format CSV ou GeoJSON, conformément à la spécification de l'API Datasets, avec des noms de colonnes, des types de données et des types d'objets GeoJSON valides.
    3. Pour créer facilement des ensembles de données à partir de BigQuery, créez une colonne nommée wkt dans votre export CSV SQL. Les ensembles de données permettent d'importer une géométrie à partir d'un fichier CSV au format texte connu (WKT) à partir d'une colonne nommée wkt.
    4. Vérifiez que vos données sont des géométries et des types de données valides. Par exemple, GeoJSON doit être au format du système de coordonnées WGS84, avec l'ordre de déroulement de la géométrie, etc.
    5. Utilisez un outil tel que geojson-validate pour vous assurer que toutes les géométries d'un fichier source sont valides ou ogr2ogr pour convertir un fichier source entre différents formats ou systèmes de coordonnées.
  3. Élagage des données
    1. Réduisez le nombre de propriétés des éléments géographiques. Vous pouvez joindre des propriétés supplémentaires à une fonctionnalité au moment de l'exécution à l'aide d'une clé d'identifiant unique (exemple).
    2. Dans la mesure du possible, utilisez des types de données entiers pour les objets de propriété afin de réduire l'espace de stockage des cartes, tout en conservant des performances de chargement optimales via HTTPS dans une application cliente.
    3. Simplifiez et/ou agrégez les géométries d'éléments très complexes. Envisagez d'utiliser des fonctions BigQuery telles que ST_Simplify sur des géométries de polygones complexes pour réduire la taille du fichier source et améliorer les performances de la carte.
  4. Mise en page en cartes
    1. L'API Google Maps Datasets crée des tuiles de carte à partir de votre fichier de données source pour les utiliser avec un SDK Maps Web ou mobile.
    2. Les tuiles de carte sont un système d'indexation basé sur le zoom qui permet de charger des données dans une application visuelle de manière plus efficace.
    3. Les tuiles de carte peuvent supprimer des éléments denses ou complexes à des niveaux de zoom inférieurs. Lorsque l'utilisateur fait un zoom arrière sur un État ou un pays (par exemple, z5-z12), la carte peut être différente de celle obtenue en zoomant sur une ville ou un quartier (par exemple, z13-z18).

Exemple : Chemins de fer à Londres

Dans cet exemple, nous allons appliquer l'architecture de référence pour créer une application Web avec GCP et Google Maps qui visualise tous les chemins de fer de Londres à partir de données Open Street Map (OSM).

Prérequis

  1. Accès au bac à sable BigQuery et à la console Cloud
  2. Assurez-vous d'avoir configuré un projet GCP et un compte de facturation.

Étape 1 : Interroger des données dans BigQuery

Accédez à Ensembles de données publics BigQuery. L'ensemble de données "bigquery-public-data" et la table geo_openstreetmap.planet_features contiennent l'ensemble des données Open Street Map (OSM) du monde entier, y compris toutes les entités possibles. Découvrez toutes les fonctionnalités disponibles pour effectuer des requêtes dans le Wiki OSM, y compris amenity, road et landuse.

Utilisez Cloud Shell ou la console Cloud BigQuery(https://console.cloud.google.com) pour interroger la table à l'aide de SQL. L'extrait de code ci-dessous utilise la commande bq query pour interroger tous les chemins de fer filtrés sur Londres uniquement à l'aide d'une zone de délimitation et de la fonction ST_Intersects().

Pour effectuer cette requête à partir de Cloud Shell, exécutez l'extrait de code suivant, en mettant à jour l'ID de projet, l'ensemble de données et le nom de la table de votre environnement.

bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id, 
feature_type,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "name") AS name,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "railway") AS railway,
geometry as wkt
FROM   bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags)) 
    AND ST_Intersects(
    geometry,
ST_MakePolygon(ST_MakeLine(
      [ST_GeogPoint(-0.549370, 51.725346),
      ST_GeogPoint(-0.549370, 51.2529407),
      ST_GeogPoint(0.3110581, 51.25294),
      ST_GeogPoint(0.3110581, 51.725346),
      ST_GeogPoint(-0.549370, 51.725346)]
    ))
   )'

La requête renvoie:

  1. un identifiant unique pour chaque élément osm_id
  2. feature_type (par exemple, points, lignes, etc.)
  3. name de la fonctionnalité (par exemple, Paddington Station)
  4. Type railway (par exemple, principal, tourisme, militaire, etc.)
  5. wkt de l'élément : géométrie de point, de ligne ou de polygone au format WKT. WKT est le format de données standard renvoyé par les colonnes de géographie BigQuery dans une requête.

Remarque : Pour valider visuellement les résultats de vos requêtes avant de créer un ensemble de données, vous pouvez rapidement visualiser vos données dans un tableau de bord de BigQuery à l'aide de Looker Studio.

Pour exporter la table vers un fichier CSV dans un bucket Google Cloud Storage, utilisez la commande bq extract dans Cloud Shell:

bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv

Remarque:Vous pouvez automatiser chaque étape à l'aide de Cloud Scheduler pour mettre à jour vos données régulièrement.

Étape 2 : Créez un ensemble de données à partir de votre fichier CSV

Créez ensuite un ensemble de données Google Maps Platform à partir de la sortie de la requête dans Google Cloud Storage (GCS). L'API Datasets vous permet de créer un ensemble de données, puis d'importer des données dans votre ensemble de données à partir d'un fichier hébergé sur GCS.

Pour commencer, activez l'API Maps Datasets dans votre projet GCP et consultez la documentation de l'API. Des bibliothèques clientes Python et Node.js permettent d'appeler l'API Datasets à partir de la logique du backend de votre application. De plus, une IUG pour les ensembles de données permet de les créer manuellement dans Cloud Console.

Une fois l'importation de votre ensemble de données terminée, vous pouvez en prévisualiser le contenu dans l'IUG "Datasets" (Ensembles de données).

Aperçu de l'ensemble de données

Étape 4 : Associer votre ensemble de données à un ID de carte

Une fois votre ensemble de données créé, vous pouvez créer un ID de carte avec un style de carte associé. Dans l'éditeur de style de carte, vous pouvez associer un mapId et un style à l'ensemble de données. Vous pouvez également y appliquer le style de carte dans Google Cloud pour personnaliser l'apparence de votre carte.

Étape 5 : Créez la visualisation cartographique de votre application cliente

Enfin, vous pouvez ajouter l'ensemble de données à une application de visualisation de données côté client à l'aide de l'API Maps JavaScript. Initialisez votre objet carte à l'aide de l'ID de carte associé à votre ensemble de données de l'étape précédente. Définissez ensuite le style et l'interactivité de votre couche "Dataset" (Ensemble de données). Pour en savoir plus, consultez le guide complet sur le style basé sur les données avec les ensembles de données.

Vous pouvez personnaliser le style, ajouter des gestionnaires d'événements pour modifier le style de manière dynamique et plus encore à l'aide de l'API Maps JavaScript. Consultez les exemples dans la documentation. Vous allez maintenant définir une fonction setStyle pour créer le style des éléments géographiques de type point et ligne de cet exemple en fonction de l'attribut "feature_type".

function setStyle(params) {
  const map.getDatasetFeatureLayer("your-dataset-id");
  const datasetFeature = params.feature;
  const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
           return {
             fillColor: "blue",
             strokeColor: "blue",
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
         } else if (type == "points") {
           return {
             fillColor: "black",
             strokeColor: "black",
             strokeOpacity: 0.5,
             pointRadius: 2,
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
     }
}

Remarque : veillez à toujours ajouter une attribution à votre ensemble de données dans votre application cartographique. Pour ajouter une attribution OSM, suivez l'exemple de code d'attribution dans la documentation en respectant les consignes OSM.

Lorsque ce code ci-dessus est initialisé dans une application Web à une seule page, il génère la visualisation de données cartographiques suivante:

carte des chemins de fer de Londres

Vous pouvez ensuite étendre la visualisation de votre carte dans la fonction setStyle() en ajoutant une logique pour filtrer les éléments géographiques, ajouter un style en fonction de l'interaction de l'utilisateur et interagir avec le reste de votre application.

Conclusion

Dans cet article, nous avons présenté une architecture de référence et un exemple d'implémentation d'une application de visualisation de données volumineuses à l'aide de Google Cloud et de Google Maps Platform. Grâce à cette architecture de référence, vous pouvez créer des applications de visualisation de données de localisation à partir de n'importe quelle donnée de GCP BigQuery qui est performante sur n'importe quel appareil à l'aide de l'API Google Maps Datasets.

Étapes suivantes

Autres références :

Contributeurs

Auteurs principaux:

  • Ryan Baumann, responsable de l'ingénierie des solutions Google Maps Platform