המחשה ויזואלית של נתונים באמצעות הפלטפורמה של מפות Google ו-deck.gl

1. לפני שמתחילים

בשיעור הזה תלמדו איך ליצור ויזואליזציה של נתונים גיאוספציאליים בכמויות גדולות באמצעות ממשק API של JavaScript במפות Google ו-deck.gl, מסגרת קוד פתוח להמחשת נתונים עם האצת WebGL.

דרישות מוקדמות

• ‫Maps JavaScript API
• הפלטפורמה של מפות Google 101: סדנת קוד בנושא JavaScript

הפעולות שתבצעו:

• שילוב של הפלטפורמה של מפות Google עם deck.gl.
• ייבוא מערך נתונים למפה מ-BigQuery.
• מגדירים את נקודות הנתונים במפה.

מה נדרש

• חשבון Google.
• עורך טקסט או סביבת פיתוח משולבת (IDE) לפי בחירתכם
• ידע בסיסי ב-JavaScript, ב-HTML וב-CSS

2. הגדרת הסביבה

תחילת העבודה עם הפלטפורמה של מפות Google

אם לא השתמשתם בעבר בפלטפורמה של מפות Google, פועלים לפי השלבים הבאים:

1. יוצרים חשבון לחיוב.
2. יוצרים פרויקט.
3. מפעילים ממשקי API וערכות SDK של הפלטפורמה של מפות Google.
4. יוצרים מפתח API.

הערה: הקישורים מספקים לכם מסמכים או סרטונים שתוכלו להיעזר בהם כדי להשלים כל שלב.

הורדת Node.js

אם עדיין לא התקנתם אותו, אתם צריכים להיכנס לכתובת https://nodejs.org/ ולהוריד ולהתקין את זמן הריצה של Node.js במחשב.

‫Node.js כולל את npm, מנהל חבילות שצריך להתקין כדי להשתמש ברכיבים התלויים ב-codelab הזה.

הגדרת פרויקט התחלתי

כדי לחסוך לכם זמן, פרויקט המתחילים של ה-codelab הזה כולל את כל קוד ה-boilerplate שצריך כדי ליצור מופע של מפה.

תחילה, מבצעים את הפעולות הבאות:

1. משכפלים או מורידים את המאגר הזה.
2. משורת הפקודה, עוברים אל הספרייה /starter, שמכילה את מבנה הקבצים הבסיסי שצריך כדי להשלים את ה-codelab הזה.
3. כדי להתקין תלויות מ-npm, מריצים את הפקודה הבאה:

npm install

4. כדי להריץ את פרויקט המתחילים בדפדפן באמצעות Webpack Dev Server, מריצים את הפקודה הבאה:

npm start

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

5. פותחים את הפרויקט בסביבת הפיתוח המשולבת ועוברים לספרייה /starter/src.
6. פותחים את הקובץ app.js.

כל הקוד ייכתב בקטע הזה של הקוד בקובץ:

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

לא צריך לעשות כלום עם שאר הקוד בקובץ, שכולל את הטעינה של ממשק API של JavaScript במפות Google והמפה:

/* 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 יש הרבה מערכי נתונים ציבוריים שאפשר להשתמש בהם לניתוח נתונים או למטרות ניסוי.

כדי לייצא מערך נתונים שזמין לכולם וכולל נתוני מיקום של Citi Bike בניו יורק, תוכנית לשיתוף אופניים עם 14,500 אופניים ו-900 מיקומים, צריך לבצע את השלבים הבאים:

1. עוברים אל מסוף Google Cloud.
2. לוחצים על תפריט הניווט > BigQuery.
3. בעורך השאילתות, מזינים את השאילתה הבאה ולוחצים על Run:

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 כדי ליצור עיבודים דו-ממדיים ותלת-ממדיים ברזולוציה גבוהה של מערכי נתונים גדולים במיוחד. הוא יכול להתמודד עם מאות אלפי נקודות נתונים, ואחרי אופטימיזציה הוא יכול להתמודד אפילו עם מיליונים.

כדי ליצור תרשים, צריך שני מחלקות – GoogleMapsOverlay ואחת מתוך שכבות התרשים הרבות של deck.gl.

כדי להתחיל, יוצרים מופע של ScatterplotLayer – שמציג נקודות נתונים כעיגולים במפה:

1. מייבאים את המחלקה ScatterplotLayer של deck.gl על ידי הוספת הקוד הבא לחלק העליון של app.js:

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

2. מגדירים את מאפייני השכבה על ידי בחירה מבין שני סוגי המאפיינים שזמינים לשכבת הפיזור של deck.gl.

מאפייני Setter מספקים לתצוגה החזותית את המידע שהיא צריכה כדי לבצע רינדור, כמו המיקום והרדיוס של נקודות הנתונים. מאפייני Styler מאפשרים להתאים אישית את הסגנון של ההצגה החזותית.

בהמשך מפורטים המאפיינים שבהם משתמשים בקטע הקוד הבא:

• id מאפשרת לרכיב העיבוד לזהות שכבות מסיבות שונות, כמו צביעה מחדש ועדכונים אחרים של הוויזואליזציה. כל השכבות ב-deck.gl דורשות מזהה ייחודי שאתם מקצים.
• התג data מציין את מקור הנתונים של התצוגה החזותית. מגדירים את האפשרות ל-‘./stations.json' כדי להשתמש במערך הנתונים שייצאתם מ-BigQuery.
• ‫getPosition מאחזר את המיקום של כל אובייקט ממקור הנתונים. שימו לב שהערך של המאפיין הוא פונקציה. deck.gl משתמשת בפונקציה כדי לבצע איטרציה על כל שורה במערך הנתונים. הפונקציה מציינת לרכיב ה-renderer איך לגשת לקו הרוחב ולקו האורך של נקודת הנתונים בכל שורה. במערך הנתונים הזה, הנתונים בכל שורה הם אובייקט 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. יוצרים מכונה של המחלקה ScatterplotLayer של deck.gl:

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. החלת ההדמיה על המפה

עכשיו אפשר להחיל את מופע ScatterplotLayer על המפה באמצעות המחלקה GoogleMapsOverlay, שמשתמשת ב-Maps JavaScript API OverlayView API כדי להוסיף הקשר WebGL מעל המפה.

אחרי שמגדירים את זה, אפשר להעביר כל אחד משכבות ההדמיה של deck.gl אל GoogleMapsOverlay, שמבצע רינדור של השכבה ומסנכרן אותה עם המפה.

כדי להחיל את ScatterplotLayer על המפה:

1. מייבאים את המחלקה GoogleMapsOverlay של deck.gl:

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

2. יוצרים מופע של המחלקה GoogleMapsOverlay ומעבירים אליו את המופע scatterplotLayer שיצרתם קודם במאפיין layers של אובייקט:

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. מזל טוב

מעולה! יצרתם ויזואליזציה של נתונים בכמות גדולה של נתוני Citi Bike בניו יורק באמצעות הפלטפורמה של מפות Google ו-deck.gl.

מידע נוסף

ממשק ה-API של JavaScript במפות Google מאפשר לכם לגשת לכל מה שהפלטפורמה של מפות Google מציעה לאינטרנט. בקישורים הבאים אפשר לקרוא מידע נוסף על עבודה עם הפלטפורמה של מפות Google באינטרנט:

• תיעוד של Maps JavaScript API
• הפלטפורמה של מפות Google 101: סדנת קוד בנושא JavaScript

‫deck.gl מציעה שכבות רבות של ויזואליזציה של נתונים שבהן אפשר להשתמש כדי להציג נתונים למשתמשים. בקישורים הבאים אפשר לקרוא מידע נוסף על השימוש ב-deck.gl עם Maps JavaScript API:

• GoogleMapsOverlay מסמכי עזרה בנושא מודול המשנה deck.gl
• מסמכים בנושא שכבת תרשים פיזור
• הדגמות של הפלטפורמה של מפות Google ו-deck.gl וגם קוד המקור של ההדגמות