BigQuery 및 Datasets API를 사용한 데이터 시각화

이 문서에서는 Google Cloud Platform BigQuery 및 Google Maps Platform Datasets API에서 위치 데이터로 지도 데이터 시각화를 만들기 위한 참조 아키텍처와 예를 제공합니다. 예를 들어 공개된 도시 데이터를 분석하거나, 통신 커버리지를 제작하거나, 차량 차량 이동의 흔적을 시각화하는 작업을 예로 들 수 있습니다.

지도 데이터 시각화는 사용자의 참여를 유도하고 위치 데이터에서 공간 정보를 파악할 수 있는 강력한 도구입니다. 위치 데이터는 점, 선 또는 다각형 지형지물이 포함된 데이터입니다. 예를 들어 날씨 지도는 소비자가 여행을 이해하고 계획하며 폭풍에 대비하는 데 도움이 되고, 비즈니스 인텔리전스 지도는 사용자가 데이터 분석에서 유용한 정보를 발견할 수 있도록 도우며, 통신 지도는 사용자가 특정 서비스 지역에서 제공업체의 서비스 지역과 품질을 이해하는 데 도움이 됩니다.

하지만 앱 개발자가 대규모 지도 데이터를 효과적으로 시각화하여 우수한 사용자 환경을 제공하는 것은 쉽지 않습니다. 큰 데이터는 메모리 클라이언트 측에 로드되어야 하므로 첫 번째 지도 로드 시간이 느려집니다. 시각적 요소는 메모리 및 GPU 제약조건이 있는 저가형 휴대전화를 비롯한 모든 기기에서 성능을 발휘해야 합니다. 마지막으로 개발자는 이동성, 안정성, 성능 기준에 부합하는 대규모 데이터 렌더링 라이브러리를 선택해야 합니다.

참조 아키텍처

대규모 데이터 시각화를 사용하여 앱을 개발하려면 두 가지 주요 구성요소가 필요합니다.

  1. 고객 백엔드: 모든 백엔드 앱 데이터 및 서비스(예: 처리 및 저장)
  2. 고객 클라이언트 - 지도 시각화 구성요소가 포함된 앱 사용자 인터페이스입니다.

다음은 이 두 구성요소가 앱 사용자, Google Cloud, Google Maps Platform과 상호작용하여 대규모 데이터 시각화 앱을 만드는 방법을 보여주는 시스템 다이어그램입니다.

아키텍처 다이어그램

⭐ 참고: Maps Datasets API는 GA 이전 제품입니다. 자세한 내용은 서비스 약관을 참고하세요.

디자인 고려사항

Google Cloud 및 Google Maps Platform을 사용하여 효율적인 데이터 시각화를 만들려면 여러 가지 설계 고려사항을 따라야 합니다.

  1. 소스 데이터 크기 및 업데이트 빈도.
    1. geojson 형식의 소스 데이터가 5MB 미만이거나 자주 업데이트되는 경우(예: 실시간 기상 레이더 예보) 앱의 클라이언트 측에 데이터를 geojson 객체로서 제공하고 deck.gl 레이어로 렌더링하는 것이 좋습니다.
    2. 데이터 크기가 5MB를 초과하고 업데이트되는 횟수가 시간당 한 번을 넘지 않는 경우 이 문서의 Datasets API 아키텍처를 고려하세요.
      1. 데이터 세트는 최대 350MB의 파일을 지원합니다.
      2. 데이터가 350MB보다 큰 경우 데이터 세트로 전달하기 전에 소스 파일의 도형 데이터를 프루닝하거나 단순화하는 것이 좋습니다 (아래의 데이터 프루닝 참고).
  2. 스키마 및 형식
    1. 데이터에 각 특성에 대해 전역적으로 고유한 ID 속성이 있는지 확인합니다. 고유 ID를 사용하면 특정 지형지물을 선택하고 스타일을 지정하거나 데이터를 지형지물에 결합하여 시각화할 수 있습니다. 예를 들어 '클릭' 사용자 이벤트에서 선택한 지형지물의 스타일을 지정할 수 있습니다.
    2. 유효한 열 이름, 데이터 유형, GeoJSON 객체 유형을 포함하여 Datasets API 사양에 따라 데이터 형식을 CSV 또는 GeoJSON으로 지정합니다.
    3. BigQuery에서 데이터 세트를 쉽게 만들려면 SQL CSV 내보내기에 wkt(이)라는 열을 만듭니다. 데이터 세트는 wkt라는 열에서 Well-Known Text (WKT) 형식의 CSV에서 도형 가져오기를 지원합니다.
    4. 데이터가 유효한 도형 및 데이터 유형인지 확인합니다. 예를 들어 GeoJSON은 WGS84 좌표계, 도형 와인딩 순서 등을 따라야 합니다.
    5. geojson-validate와 같은 도구를 사용하여 소스 파일의 모든 도형이 유효한지 확인하거나 ogr2ogr을 사용하여 소스 파일을 형식 또는 좌표계 간에 변환합니다.
  3. 데이터 프루닝
    1. 특성의 속성 수를 최소화합니다. 런타임 시 고유 식별자 키를 사용하여 추가 속성을 기능에 조인할 수 있습니다 (예).
    2. 가능한 경우 속성 객체에 정수 데이터 유형을 사용하여 타일 저장 공간을 최소화하고 클라이언트 앱에서 HTTPS를 통해 타일이 로드되도록 합니다.
    3. 매우 복잡한 지형지물 도형을 단순화하거나 집계합니다. 복잡한 다각형 도형에 ST_Simplify 등의 BigQuery 함수를 사용하여 소스 파일의 크기를 줄이고 지도 성능을 개선해 보세요.
  4. 타일링
    1. Google Maps Datasets API는 Maps JS API에서 사용할 소스 데이터 파일에서 지도 타일을 만듭니다.
    2. 지도 타일은 데이터를 시각적 앱에 로드하는 더 효율적인 방법을 제공하는 확대/축소 기반 색인 생성 시스템입니다.
    3. 지도 타일은 더 낮은 확대/축소 수준에서 밀도가 높거나 복잡한 지형지물을 떨어뜨릴 수 있습니다. 사용자가 주 또는 국가로 축소하면 (예: z5-z12) 도시나 인근 지역으로 확대했을 때와 다르게 보일 수 있습니다 (예: z13-z18).

예 - 런던의 철도

이 예에서는 참조 아키텍처를 적용하여 GCP 및 Google 지도를 사용하여 개방형 스트리트 지도 (OSM) 데이터를 기반으로 런던의 모든 철도를 시각화하는 웹 애플리케이션을 만듭니다.

기본 요건

  1. BigQuery 샌드박스 및 Cloud Console에 액세스
  2. GCP 프로젝트와 결제 계정이 설정되어 있는지 확인합니다.

1단계 - BigQuery에서 데이터 쿼리

BigQuery 공개 데이터 세트로 이동합니다. 'bigquery-public-data' 데이터 세트와 테이블 geo_openstreetmap.planet_features에는 가능한 모든 지형지물을 포함하여 전 세계 규모의 오픈 스트리트 지도 (OSM) 데이터가 포함되어 있습니다. amenity, road, landuse 등 OSM 위키에서 쿼리할 수 있는 모든 기능을 살펴보세요.

Cloud Shell 또는 BigQuery Cloud 콘솔(https://console.cloud.google.com)을 사용하여 SQL을 사용하여 테이블을 쿼리합니다. 아래 코드 스니펫에서는 bq query 명령어를 사용하여 경계 상자 및 ST_Intersects() 함수를 사용하여 런던으로만 필터링된 모든 철도를 쿼리합니다.

Cloud Shell에서 이 쿼리를 수행하려면 다음 코드 스니펫을 실행하여 환경의 프로젝트 ID, 데이터 세트, 테이블 이름을 업데이트합니다.

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)]
    ))
   )'

쿼리는 다음을 반환합니다.

  1. 각 지형지물의 고유 식별자 osm_id
  2. feature_type(예: 점, 선 등)
  3. 기능의 name입니다(예: Paddington Station).
  4. railway 유형(예: 주요, 관광, 군사 등)
  5. 지형지물의 wkt - WKT 형식의 점, 선 또는 다각형 도형입니다. WKT는 쿼리에서 반환되는 BigQuery 지리 열이 표준 데이터 형식입니다.

참고 - 데이터 세트를 만들기 전에 쿼리 결과를 시각적으로 확인하려면 Looker Studio를 사용하여 BigQuery의 대시보드에서 데이터를 빠르게 시각화하면 됩니다.

Google Cloud Storage 버킷의 CSV 파일로 테이블을 내보내려면 Cloud Shell에서 bq extract 명령어를 사용합니다.

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

참고: Cloud Scheduler를 사용하여 각 단계를 자동화하여 데이터를 정기적으로 업데이트할 수 있습니다.

2단계 - CSV 파일에서 데이터 세트 만들기

다음으로 Google Cloud Storage (GCS)의 쿼리 출력에서 Google Maps Platform 데이터 세트를 만듭니다. Datasets API를 사용하면 데이터 세트를 만든 다음 GCS에서 호스팅되는 파일에서 데이터 세트에 데이터를 업로드할 수 있습니다.

시작하려면 GCP 프로젝트에서 Maps Datasets API를 사용 설정하고 API 문서를 검토하세요. 앱 백엔드의 로직에서 Datasets API를 호출하기 위한 Python 및 Node.js 클라이언트 라이브러리가 있습니다. Cloud 콘솔에서 직접 데이터 세트를 만들 수 있는 데이터 세트 GUI도 있습니다.

데이터 세트 업로드가 완료되면 데이터 세트 GUI에서 데이터 세트를 미리 볼 수 있습니다.

데이터 세트 미리보기

4단계 - 데이터 세트를 지도 ID와 연결

데이터 세트를 만들었으면 연결된 지도 스타일을 사용하여 지도 ID를 생성할 수 있습니다. 지도 스타일 편집기에서 지도 ID 및 스타일을 데이터 세트와 연결할 수 있습니다. 여기에서 클라우드 기반 지도 스타일 지정을 적용하여 지도의 디자인과 분위기를 맞춤설정할 수도 있습니다.

5단계 - 클라이언트 앱 맵 시각화 만들기

마지막으로 Maps JS API를 사용하여 클라이언트 측 데이터 시각화 앱에 데이터 세트를 추가할 수 있습니다. 이전 단계의 데이터 세트와 연결된 mapID를 사용하여 지도 객체를 초기화합니다. 그런 다음 데이터 세트 레이어의 스타일과 상호작용을 설정합니다. 자세한 내용은 데이터 세트를 사용한 데이터 기반 스타일 지정 가이드를 참고하세요.

Maps JS API를 사용하여 스타일을 맞춤설정하고 동적으로 스타일을 변경하는 이벤트 핸들러를 추가하는 등의 작업을 할 수 있습니다. docs에서 예를 참고하세요. 아래에서는 'feature_type' 속성을 기반으로 이 예의 점과 선 지형지물 스타일을 생성하도록 setStyle 함수를 정의합니다.

참고 - Maps JS API 구현에 v=beta 채널을 사용해야 합니다.

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,
           }
     }
}

참고 - 항상 지도 앱에 데이터 세트의 저작자 표시를 추가해야 합니다. OSM 저작자 표시를 추가하려면 OSM 가이드라인을 준수하는 문서의 저작자 표시 코드 예를 따르세요.

위의 코드를 단일 페이지 웹 앱에서 초기화하면 다음과 같은 지도 데이터 시각 자료가 생성됩니다.

런던 철도 지도

이제 지형지물을 필터링하는 로직을 추가하고 사용자 상호작용을 기반으로 스타일을 추가하며 애플리케이션의 나머지 부분과 상호작용하여 setStyle() 함수에서 지도 시각화를 확장할 수 있습니다.

결론

이 도움말에서는 참조 아키텍처와 Google Cloud 및 Google Maps Platform을 사용한 대규모 데이터 시각화 애플리케이션의 구현 예를 설명했습니다. 이 참조 아키텍처를 사용하면 Google Maps Datasets API를 사용하여 모든 기기에서 성능이 뛰어난 GCP BigQuery의 데이터에서 위치 데이터 시각화 앱을 만들 수 있습니다.

다음 작업

추가 자료:

기여자

주요 저자: