Google Maps Platform 및 deck.gl을 이용하여 데이터 시각화하기

1. 시작하기 전에

이 Codelab에서는 Maps JavaScript API와 오픈소스 WebGL 가속 데이터 시각화 프레임워크인 deck.gl을 사용하여 대용량 지리공간 데이터 시각화를 만드는 방법을 배울 수 있습니다.

사전 준비 사항

• Maps JavaScript API
• Google Maps Platform 101: 자바스크립트 Codelab

수행할 작업

• Google Maps Platform을 deck.gl과 통합합니다.
• BigQuery에서 지도로 데이터 세트를 가져옵니다.
• 지도에 데이터 포인트를 정의합니다.

필요한 사항

• Google 계정
• 원하는 텍스트 편집기 또는 IDE
• 자바스크립트, HTML 및 CSS에 대한 기본 지식

2. 환경 설정

Google Maps Platform 시작하기

Google Maps Platform을 처음 사용한다면 다음 단계를 따르세요.

1. 결제 계정을 만듭니다.
2. 프로젝트를 하나 만듭니다.
3. Google Maps Platform API와 SDK를 사용 설정합니다.
4. API 키를 생성합니다.

참고: 링크를 클릭하면 각 단계를 완료하기 위해 따라 할 수 있는 문서 또는 동영상을 볼 수 있습니다.

Node.js 다운로드

아직 설치하지 않았다면 https://nodejs.org/로 이동하여 컴퓨터에 Node.js 런타임을 다운로드하고 설치합니다.

Node.js는 이 Codelab의 종속 항목을 설치할 때 필요한 패키지 관리자인 NPM과 함께 제공됩니다.

스타터 프로젝트 설정

이 Codelab의 스타터 프로젝트에는 시간을 절약할 수 있도록 지도를 인스턴스화하는 데 필요한 상용구 코드가 모두 포함되어 있습니다.

시작하려면 아래의 단계를 따르세요.

1. 이 저장소를 클론하거나 다운로드합니다.
2. 명령줄에서 이 Codelab을 완료하는 데 필요한 기본 파일 구조가 포함된 /starter 디렉터리로 이동합니다.
3. 다음 명령어를 실행하여 NPM에서 종속 항목을 설치합니다.

npm install

4. 다음 명령어를 실행하여 Webpack Dev Server로 브라우저에서 스타터 프로젝트를 실행합니다.

npm start

    The starter app opens in your browser and displays a map.

5. IDE에서 프로젝트를 열고 /starter/src 디렉터리로 이동합니다.
6. app.js 파일을 엽니다.

파일 내 코드의 이 섹션에서 모든 코딩을 수행합니다.

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

파일에서 Maps JavaScript API 및 지도를 로드하는 나머지 코드는 수정하지 않고 그대로 둡니다.

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

7. YOUR API KEY를 환경을 설정할 때 생성한 실제 API 키로 바꿉니다.

const googleMapsAPIKey = 'YOUR API KEY';

3. BigQuery에서 데이터 내보내기

BigQuery는 데이터 분석 또는 실험용으로 사용할 수 있는 많은 공개 데이터 세트를 제공합니다.

BigQuery를 사용하여 뉴욕시 Citi Bike(900개 지역에서 14,500대의 자전거를 제공하는 자전거 공유 프로그램)의 위치 데이터가 포함된 공개적으로 사용 가능한 데이터 세트를 내보내려면 다음 단계를 따르세요.

1. Cloud Console로 이동합니다.
2. 탐색 메뉴 > BigQuery를 클릭합니다.
3. 쿼리 편집기에서 다음 쿼리를 입력하고 실행을 클릭합니다.

SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`

4. 쿼리가 완료되면 결과 저장을 클릭한 다음 JSON(로컬 파일)을 선택하여 결과 집합을 내보냅니다. stations.json 파일의 이름을 지정하고 /src 디렉터리에 저장합니다.

이제 데이터를 가져왔으므로 deck.gl로 첫 번째 시각화를 만들 수 있습니다.

4. 시각화 정의

deck.gl은 WebGL을 사용하여 매우 큰 데이터 세트의 고해상도 2D 및 3D 렌더링을 생성하는 오픈소스 데이터 시각화 프레임워크입니다. 수십만 개의 데이터 포인트를 처리할 수 있고, 최적화가 완료되면 수백만 개까지도 처리할 수 있습니다.

시각화를 만들려면 두 개의 클래스(GoogleMapsOverlay 및 deck.gl의 여러 시각화 레이어 중 하나)가 필요합니다.

시작하려면 지도에 데이터 포인트를 원으로 렌더링하는 ScatterplotLayer의 인스턴스를 하나 만듭니다.

1. app.js 상단에 다음을 추가하여 deck.gl의 ScatterplotLayer 클래스를 가져옵니다.

import { ScatterplotLayer } from '@deck.gl/layers';

2. deck.gl의 분산형 차트 레이어에서 사용할 수 있는 두 가지 유형의 속성 중 하나를 선택하여 레이어 속성을 설정합니다.

Setter 속성은 데이터 포인트의 위치와 반경 등 렌더링해야 하는 정보를 시각화에 제공합니다. Styler 속성을 사용하면 시각화의 스타일을 맞춤설정할 수 있습니다.

다음은 아래 코드 스니펫에서 사용하는 속성의 세부정보입니다.

• id를 사용하면 렌더러가 다시 그리기 및 시각화의 기타 업데이트 등 다양한 이유를 기준으로 레이어를 식별할 수 있습니다. 모든 deck.gl 레이어에는 고유 ID가 필요하며, 직접 지정해야 합니다.
• data는 시각화의 데이터 소스를 지정합니다. BigQuery에서 내보낸 데이터 세트를 사용하려면 ‘./stations.json'으로 설정합니다.
• getPosition은 데이터 소스에서 각 객체의 위치를 가져옵니다. 속성의 값이 함수입니다. deck.gl은 이 함수를 사용하여 데이터 세트의 모든 행에 대해 작업을 반복 수행합니다. 이 함수는 각 행에 있는 데이터 포인트의 위도와 경도에 액세스하는 방법을 렌더러에 알려줍니다. 이 데이터 세트에서 각 행의 데이터는 위도 및 경도 속성에 위치가 설정되어 있는 하나의 JSON 객체이므로 getPosition에 제공하는 함수는 d => [parseFloat(d.longitude), parseFloat(d.latitude)]입니다.
• getRadius는 각 객체의 반경을 미터 단위로 정의합니다. 이 경우 반경은 d => parseInt(d.capacity)로 설정되며 각 대여소의 이용 가능한 자전거 수에 따라 데이터 포인트 크기를 설정합니다.
• stroked는 렌더링된 데이터 포인트의 외부 가장자리에 획이 그어져 있는지 여부를 설정합니다.
• getFillColor는 각 데이터 포인트의 채우기 색상을 RGB 색상 코드로 설정합니다.
• getLineColor는 각 데이터 포인트의 획 색상을 RGB 색상 코드로 설정합니다.
• radiusMinPixels는 각 데이터 포인트의 최소 픽셀 너비를 설정합니다. 사용자가 확대/축소하면 deck.gl은 시각화가 지도에 명확히 표시되도록 데이터 포인트의 크기를 자동으로 조절합니다. 이 속성을 사용하여 이 크기 조절의 범위를 제어할 수 있습니다.
• radiusMaxPixels는 각 데이터 포인트의 최대 픽셀 너비를 설정합니다.

const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};

3. 다음과 같이 deck.gl의 ScatterplotLayer 클래스 인스턴스를 생성합니다.

const scatterplotLayer = new ScatterplotLayer(layerOptions);

이 섹션을 완료하면 다음과 같은 코드가 만들어집니다.

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. 지도에 시각화 적용

이제 Maps JavaScript API OverlayView API를 사용하여 지도 상단에 WebGL 컨텍스트를 삽입하는 GoogleMapsOverlay 클래스로 ScatterplotLayer 인스턴스를 지도에 적용할 수 있습니다.

그런 다음에는 레이어를 렌더링하고 지도와 동기화하는 GoogleMapsOverlay에 deck.gl의 시각화 레이어 중 원하는 것을 전달할 수 있습니다.

지도에 ScatterplotLayer를 적용하려면 다음 단계를 따르세요.

1. 다음과 같이 deck.gl의 GoogleMapsOverlay 클래스를 가져옵니다.

import { GoogleMapsOverlay } from '@deck.gl/google-maps';

2. GoogleMapsOverlay 클래스의 인스턴스를 하나 만들고 이전에 객체의 layers 속성에서 만든 scatterplotLayer 인스턴스를 전달합니다.

const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });

3. 오버레이를 지도에 적용합니다.

 googleMapsOverlay.setMap(map);

이 섹션을 완료하면 다음과 같은 코드가 만들어집니다.

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

브라우저로 다시 돌아가면 뉴욕시에 있는 모든 Citi Bike 대여소에 대한 멋진 데이터 시각화를 볼 수 있습니다.

6. 축하합니다

축하합니다. Google Maps Platform과 deck.gl을 사용하여 뉴욕시의 Citi Bike 데이터를 대량으로 시각화하는 작업을 성공적으로 완료하셨습니다.

자세히 알아보기

Maps JavaScript API를 사용하면 Google Maps Platform에서 웹에 제공하는 모든 기능에 액세스할 수 있습니다. 다음 링크를 통해 웹에서 Google Maps Platform을 사용하는 방법을 자세히 알아보세요.

• Maps JavaScript API 문서
• Google Maps Platform 101: 자바스크립트 Codelab

deck.gl은 사용자에게 데이터를 표시하는 데 사용할 수 있는 수많은 데이터 시각화 레이어를 제공합니다. 다음 링크를 확인하여 Maps JavaScript API에서 deck.gl을 사용하는 방법을 자세히 알아보세요.

• GoogleMapsOverlay deck.gl 하위 모듈 문서
• 분산형 차트 레이어 문서
• Google Maps Platform 및 deck.gl의 데모 및 데모의 소스 코드