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 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 impliquer 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éorologiques aident les consommateurs à comprendre et à planifier leurs voyages, et à se préparer aux tempêtes. Les cartes de business intelligence aident les utilisateurs à découvrir des insights à partir 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 les premiers chargements de cartes. La visualisation doit être performante 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 d'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 système montrant 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.

schéma 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 sont inférieures à 5 Mo ou sont mises à jour très fréquemment (par exemple, des prévisions radar météorologiques en direct), envisagez de diffuser les données en tant qu'objet GeoJSON côté client dans votre application et d'effectuer le rendu avec un calque deck.gl.
    2. Si vos données sont supérieures à 5 Mo et ne sont pas mises à jour plus d'une fois par heure, envisagez l'architecture de l'API Datasets décrite dans ce document.
      1. Les ensembles de données sont compatibles avec les fichiers d'une taille maximale de 350 Mo.
      2. Si vos données sont supérieures à 350 Mo, envisagez de supprimer ou de simplifier les données de géométrie dans le fichier source avant de les transmettre aux ensembles de données (voir Suppression des données ci-dessous).
  2. Schéma et format
    1. Assurez-vous que vos données comportent une propriété d'ID unique au niveau mondial pour chaque élément. Un ID unique vous permet de sélectionner et de styliser un élément spécifique ou de joindre des données à un élément à visualiser, par exemple en stylisant un élément 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 CSV SQL. Les ensembles de données sont compatibles avec l'importation de géométries à partir d'un fichier CSV au format WKT (Well-Known Text) à 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 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 différents formats ou systèmes de coordonnées.
  3. Suppression des données
    1. Réduisez le nombre de propriétés des éléments. Vous pouvez joindre des propriétés supplémentaires à un élément au moment de l'exécution sur une clé d'identifiant unique (exemple).
    2. Utilisez des types de données entiers pour les objets de propriété dans la mesure du possible afin de réduire l'espace de stockage des tuiles, tout en conservant des tuiles performantes à charger 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. Tuilage
    1. L'API Google Maps Datasets crée des tuiles de carte à partir de votre fichier de données source pour une utilisation avec un SDK Maps Web ou mobile.
    2. Les tuiles de carte sont un système d'indexation basé sur le zoom qui offre des moyens plus efficaces de charger 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 : les 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 tous les chemins de fer de Londres à partir des données Open Street Map (OSM).

Prérequis

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

Étape 1 : Interrogez les données dans BigQuery

Accédez aux 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 fonctionnalités possibles. Découvrez toutes les fonctionnalités disponibles à interroger dans le wiki OSM, y compris amenity, road et landuse.

Utilisez Cloud Shell ou la console BigQuery Cloud 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 uniquement sur Londres à l'aide d'un cadre de délimitation et de la fonction ST_Intersects().

Pour exécuter 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 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 les éléments suivants :

  1. un identifiant unique pour chaque élément osm_id ;
  2. le feature_type, par exemple les points, les lignes, etc. ;
  3. le name de l'élément, par exemple Paddington Station ;
  4. le type railway, par exemple principal, touristique, militaire, etc. ;
  5. le 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 BigQuery Geography 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 bq extract commande 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 sur Google Cloud Storage (GCS). À l'aide de l'API Datasets, vous pouvez créer un ensemble de données, puis y importer des données à partir d'un fichier hébergé sur GCS.

Pour commencer, activez l'API Maps Datasets dans votre projet Google Cloud et consultez la documentation de l'API. Des bibliothèques clientes Python et Node.js sont disponibles pour appeler l'API Datasets à partir de la logique de votre backend d'application. En outre, une interface graphique Datasets GUI permet de créer manuellement des ensembles de données dans Cloud Console.

Une fois l'importation de votre ensemble de données terminée, vous pouvez le prévisualiser dans l'interface graphique Datasets.

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. Vous pouvez également appliquer un style de carte basé sur le cloud pour personnaliser l'apparence de votre carte.

Étape 5 : Créez la visualisation de la carte 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 map à l'aide du mapID 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 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 bien 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 d'élément de point et de 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,
           }
     }
}

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

carte du réseau ferroviaire londonien

À 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. À l'aide de cette architecture de référence, vous pouvez créer des applications de visualisation de données de localisation à partir de n'importe quelles données dans Google Cloud BigQuery qui sont performantes sur n'importe quel appareil à l'aide de 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