Visualisation des données avec BigQuery

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 BigQuery et l'API Datasets de Google Maps Platform, par exemple pour analyser des données municipales ouvertes, créer une carte de couverture de télécommunication 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 susciter l'intérêt des 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éorologiques aident les consommateurs à comprendre et à planifier leurs trajets, et à se préparer aux tempêtes. Les cartes d'informatique décisionnelle 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 de qualité. Les données volumineuses doivent être chargées dans la mémoire côté client, ce qui ralentit le chargement initial 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 qui soit portable, fiable et performante avec des données volumineuses.

Architecture de référence

Le développement d'applications avec des visualisations de données volumineuses 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 : l'interface utilisateur de votre application avec un composant de visualisation de carte.

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

diagramme de l'architecture

Considérations de conception

Vous devez suivre un certain nombre de considérations de conception pour créer une visualisation de données performante à l'aide de Google Cloud et de Google Maps Platform.

  1. Taille des données sources et fréquence de mise à jour.
    1. Si les données sources au format GeoJSON font moins de 5 Mo ou sont mises à jour très fréquemment (par exemple, des prévisions radar météo en direct), envisagez de diffuser les données en tant qu'objet GeoJSON côté client dans votre application et de les afficher avec une couche deck.gl.
    2. Si vos données dépassent 5 Mo et ne sont pas mises à jour plus d'une fois par heure, envisagez d'utiliser l'architecture de l'API Datasets décrite dans ce document.
      1. Les ensembles de données acceptent les fichiers d'une taille maximale de 350 Mo.
      2. Si vos données dépassent 350 Mo, envisagez de les élaguer ou de simplifier les données géométriques 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 disposent d'une propriété d'identifiant unique à l'échelle mondiale pour chaque caractéristique. Un identifiant unique vous permet de sélectionner un élément géographique spécifique et de lui appliquer un style, ou de joindre des données à un élément géographique pour les visualiser (par exemple, appliquer un style à un élément géographique sélectionné lors de l'événement utilisateur "clic").
    2. Mettez en forme 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 exportation SQL CSV. Les ensembles de données permettent d'importer des objets géométriques à partir d'un fichier CSV au format Well-Known Text (WKT) à partir d'une colonne nommée wkt.
    4. Vérifiez que vos données sont des types de données et des géométries valides. Par exemple, le fichier GeoJSON doit être dans le système de coordonnées WGS84, l'ordre d'enroulement 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 transformer un fichier source entre des formats ou des systèmes de coordonnées.
  3. Élagage des données
    1. Réduisez le nombre de propriétés des caractéristiques. Vous pouvez joindre des propriétés supplémentaires à une caractéristique au moment de l'exécution sur 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 tuiles, ce qui permet de les charger efficacement 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 comme ST_Simplify sur les géométries de polygones complexes pour réduire la taille du fichier source et améliorer les performances de la carte.
  4. Mosaïque
    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 plus efficacement des données dans une application visuelle.
    3. Les tuiles de carte peuvent supprimer des éléments denses ou complexes à des niveaux de zoom inférieurs. Lorsqu'un utilisateur effectue un zoom arrière sur un État ou un pays (par exemple, z5-z12), l'affichage peut être différent de celui d'un zoom avant 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 Google Cloud et Google Maps qui visualise toutes les voies ferrées de Londres à partir des 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 Google Cloud et un compte de facturation.

Étape 1 : Interroger les données dans BigQuery

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

Utilisez Cloud Shell ou la console Cloud BigQuery pour interroger la table à l'aide de SQL. L'extrait de code ci-dessous utilise la commande bq query pour interroger toutes les voies ferrées filtrées pour ne conserver que Londres à l'aide d'un cadre 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 du projet, l'ensemble de données et le nom de la table pour 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 caractéristique osm_id
  2. le feature_type (par exemple, des points, des lignes, etc.)
  3. name de la caractéristique, par exemple Paddington Station.
  4. Type de railway (par exemple, principal, tourisme, militaire, etc.)
  5. wkt de l'élément : géométrie de type point, ligne ou polygone au format WKT. WKT est le format de données standard que les colonnes de géographie BigQuery renvoient dans une requête.

Remarque : Pour valider visuellement les résultats de votre requête avant de créer un ensemble de données, vous pouvez visualiser rapidement vos données dans un tableau de bord à partir 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 du résultat de la requête sur 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 sur votre projet Google Cloud et consultez la documentation de l'API. Il existe des bibliothèques clientes Python et Node.js pour appeler l'API Datasets à partir de la logique du backend de votre application. Il existe également une IUG d'ensembles de données permettant de créer manuellement des ensembles de données dans la console Cloud.

Une fois l'importation de votre ensemble de données terminée, vous pouvez le prévisualiser dans l'IUG des ensembles de données.

Aperçu de l'ensemble de données

Étape 4 : Associez 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. C'est également là que vous pouvez appliquer la personnalisation de cartes 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 JS. Initialisez votre objet de carte à l'aide de l'ID de carte associé à votre ensemble de données à l'étape précédente. Définissez ensuite le style et l'interactivité de votre calque d'ensemble de données. Pour en savoir plus, consultez le guide complet sur les styles basés 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 JS. Consultez des exemples dans la documentation. Ci-dessous, nous allons définir une fonction setStyle pour créer le style des éléments géographiques de type point et ligne pour 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,
           }
     }
}

Lorsqu'il est initialisé dans une application Web monopage, le code ci-dessus génère le visuel de données cartographiques suivant :

carte ferroviaire de londres

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

Conclusion

Dans ce document, nous avons abordé 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. Cette architecture de référence vous permet de créer des applications de visualisation de données de localisation à partir de n'importe quelle donnée de Google Cloud BigQuery, qui sont performantes sur n'importe quel appareil grâce à l'API Google Maps Datasets.

Actions suivantes

Autres références :

Contributeurs

Auteurs principaux :

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