Google Maps Platform और deck.gl की मदद से डेटा को विज़ुअलाइज़ करना

1. शुरू करने से पहले

इस कोडलैब में, Maps JavaScript API और deck.gl का इस्तेमाल करके, बड़ी मात्रा में जियोस्पेशल डेटा विज़ुअलाइज़ेशन बनाने का तरीका बताया गया है. deck.gl, ओपन-सोर्स, WebGL-ऐक्सलरेटेड, और डेटा-विज़ुअलाइज़ेशन फ़्रेमवर्क है.

d01802e265548be1.png

ज़रूरी शर्तें

आपको क्या करना होगा

  • Google Maps Platform को deck.gl के साथ इंटिग्रेट करें.
  • BigQuery से किसी डेटासेट को मैप में इंपोर्ट करें.
  • मैप पर डेटा पॉइंट तय करें.

आपको किन चीज़ों की ज़रूरत होगी

  • Google खाता
  • अपनी पसंद का टेक्स्ट एडिटर या आईडीई
  • JavaScript, एचटीएमएल, और सीएसएस की बुनियादी जानकारी

2. अपना एनवायरमेंट सेट अप करने का तरीका

Google Maps Platform का इस्तेमाल शुरू करना

अगर आपने पहले कभी Google Maps Platform का इस्तेमाल नहीं किया है, तो यह तरीका अपनाएं:

  1. बिलिंग खाता बनाएं.
  2. प्रोजेक्ट बनाएं.
  3. Google Maps Platform API और एसडीके चालू करें.
  4. एपीआई पासकोड जनरेट करें.

Node.js डाउनलोड करें

अगर आपके पास पहले से यह नहीं है, तो https://nodejs.org/ पर जाएं. इसके बाद, अपने कंप्यूटर पर Node.js runtime डाउनलोड करें और उसे इंस्टॉल करें.

Node.js में npm शामिल है. यह एक पैकेज मैनेजर है. आपको इस कोडलैब के लिए, डिपेंडेंसी इंस्टॉल करने के लिए इसकी ज़रूरत होगी.

स्टार्टर प्रोजेक्ट सेट अप करना

आपका समय बचाने के लिए, इस कोडलैब के स्टार्टर प्रोजेक्ट में वह सभी बॉयलरप्लेट कोड शामिल है जो आपको मैप इंस्टैंशिएट करने के लिए चाहिए.

शुरू करने के लिए यह तरीका अपनाएं:

  1. इस रिपॉज़िटरी को क्लोन करें या डाउनलोड करें.
  2. कमांड लाइन से, /starter डायरेक्ट्री पर जाएं. इसमें वह बेसिक फ़ाइल स्ट्रक्चर मौजूद है जो इस कोडलैब को पूरा करने के लिए ज़रूरी है.
  3. यह कमांड चलाकर, npm से ज़रूरी सॉफ़्टवेयर इंस्टॉल करें:
npm install
  1. नीचे दी गई कमांड चलाकर, Webpack Dev Server की मदद से अपने ब्राउज़र में स्टार्टर प्रोजेक्ट चलाएं:
npm start

    The starter app opens in your browser and displays a map.
  1. अपने आईडीई में प्रोजेक्ट खोलें और /starter/src डायरेक्ट्री पर जाएं.
  2. 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);
}
  1. YOUR API KEY को अपनी उस एपीआई कुंजी से बदलें जिसे आपने एनवायरमेंट सेट अप करते समय जनरेट किया था:
const googleMapsAPIKey = 'YOUR API KEY';

3. BigQuery से डेटा एक्सपोर्ट करना

BigQuery कई सार्वजनिक डेटासेट उपलब्ध कराता है. इनका इस्तेमाल डेटा का विश्लेषण करने या एक्सपेरिमेंट के लिए किया जा सकता है.

BigQuery का इस्तेमाल करके, सार्वजनिक तौर पर उपलब्ध डेटासेट एक्सपोर्ट करें. इसमें न्यूयॉर्क शहर के Citi Bike का लोकेशन डेटा शामिल होता है. Citi Bike, बाइक शेयर करने का एक प्रोग्राम है. इसमें 14,500 बाइक और 900 लोकेशन शामिल हैं. इसके लिए, यह तरीका अपनाएं:

  1. Cloud Console पर जाएं.
  2. नेविगेशन मेन्यू 41e8e87b85b0f93.png > BigQuery पर क्लिक करें.
  3. क्वेरी एडिटर में, यह क्वेरी डालें और चलाएं पर क्लिक करें:
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. क्वेरी पूरी होने के बाद, नतीजे सेव करें पर क्लिक करें. इसके बाद, नतीजों के सेट को एक्सपोर्ट करने के लिए, JSON (लोकल फ़ाइल) चुनें. फ़ाइल को stations.json नाम दें और इसे /src डायरेक्ट्री में सेव करें.

2f4932829f7e1f78.png

डेटा मिलने के बाद, अब deck.gl की मदद से अपना पहला विज़ुअलाइज़ेशन बनाया जा सकता है.

4. विज़ुअलाइज़ेशन तय करना

deck.gl एक ओपन सोर्स डेटा-विज़ुअलाइज़ेशन फ़्रेमवर्क है. यह WebGL का इस्तेमाल करके, बहुत बड़े डेटासेट की हाई-रिज़ॉल्यूशन वाली 2D और 3D रेंडरिंग बनाता है. यह लाखों डेटा पॉइंट को प्रोसेस कर सकता है. ऑप्टिमाइज़ करने पर, यह करोड़ों डेटा पॉइंट को भी प्रोसेस कर सकता है.

विज़ुअलाइज़ेशन बनाने के लिए, आपको दो क्लास की ज़रूरत होती है—GoogleMapsOverlay और deck.gl की कई विज़ुअलाइज़ेशन लेयर में से कोई एक.

शुरू करने के लिए, ScatterplotLayer का एक इंस्टेंस बनाएं. इससे मैप पर डेटा पॉइंट, सर्कल के तौर पर रेंडर होते हैं:

  1. app.js में सबसे ऊपर यह कोड जोड़कर, deck.gl की ScatterplotLayer क्लास इंपोर्ट करें:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. deck.gl के स्कैटरप्लॉट लेयर के लिए उपलब्ध दो तरह की प्रॉपर्टी में से कोई एक चुनकर, अपनी लेयर प्रॉपर्टी सेट करें.

सेटर प्रॉपर्टी, विज़ुअलाइज़ेशन को वह जानकारी देती हैं जिसकी ज़रूरत उसे रेंडर करने के लिए होती है. जैसे, डेटा पॉइंट की पोज़िशन और रेडियस. स्टाइलर प्रॉपर्टी की मदद से, विज़ुअलाइज़ेशन की स्टाइल को पसंद के मुताबिक बनाया जा सकता है.

यहां उन प्रॉपर्टी के बारे में जानकारी दी गई है जिनका इस्तेमाल, नीचे दिए गए कोड स्निपेट में किया गया है:

  • id की मदद से रेंडरर, कई वजहों से लेयर की पहचान कर पाता है. जैसे, विज़ुअलाइज़ेशन को फिर से पेंट करना और अन्य अपडेट. deck.gl की सभी लेयर के लिए यूनीक आईडी की ज़रूरत होती है. यह आईडी आपको असाइन करना होता है.
  • data से विज़ुअलाइज़ेशन के डेटा सोर्स के बारे में पता चलता है. इसे ‘./stations.json' पर सेट करें, ताकि BigQuery से एक्सपोर्ट किए गए डेटासेट का इस्तेमाल किया जा सके.
  • getPosition, डेटा सोर्स से हर ऑब्जेक्ट की पोज़िशन को वापस लाता है. ध्यान दें कि प्रॉपर्टी की वैल्यू एक फ़ंक्शन है. deck.gl इस फ़ंक्शन का इस्तेमाल करके, डेटासेट की हर लाइन को दोहराता है. यह फ़ंक्शन, रेंडरर को बताता है कि हर लाइन में मौजूद डेटा पॉइंट के अक्षांश और देशांतर को कैसे ऐक्सेस किया जाए. इस डेटासेट में, हर लाइन में मौजूद डेटा एक JSON ऑब्जेक्ट है. इसमें अक्षांश और देशांतर प्रॉपर्टी में पोज़िशन सेट की गई है. इसलिए, getPosition को दिया गया फ़ंक्शन d => [parseFloat(d.longitude), parseFloat(d.latitude)] है.
  • getRadius हर ऑब्जेक्ट के दायरे को मीटर में तय करता है. इस मामले में, रेडियस को d => parseInt(d.capacity) पर सेट किया गया है. इससे हर स्टेशन की क्षमता के आधार पर, डेटा पॉइंट का साइज़ सेट हो जाता है.
  • stroked यह तय करता है कि रेंडर किए गए डेटा पॉइंट के बाहरी किनारों पर स्ट्रोक है या नहीं.
  • getFillColor हर डेटा पॉइंट के फ़िल कलर को आरजीबी कलर कोड के तौर पर सेट करता है.
  • getLineColor हर डेटा पॉइंट के स्ट्रोक का रंग, आरजीबी कलर कोड के तौर पर सेट करता है.
  • 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
};
  1. 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. विज़ुअलाइज़ेशन को मैप पर लागू करना

अब GoogleMapsOverlay क्लास की मदद से, अपने ScatterplotLayer इंस्टेंस को मैप पर लागू किया जा सकता है. यह क्लास, Maps JavaScript API OverlayView एपीआई का इस्तेमाल करके, मैप के ऊपर WebGL कॉन्टेक्स्ट को इंजेक्ट करता है.

इसके बाद, deck.gl की किसी भी विज़ुअलाइज़ेशन लेयर को GoogleMapsOverlay पर पास किया जा सकता है. इससे लेयर रेंडर हो जाती है और मैप के साथ सिंक हो जाती है.

ScatterplotLayer को मैप पर लागू करने के लिए, यह तरीका अपनाएं:

  1. deck.gl की GoogleMapsOverlay क्लास इंपोर्ट करें:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. GoogleMapsOverlay क्लास का एक इंस्टेंस बनाएं और उसे scatterplotLayer इंस्टेंस पास करें. यह इंस्टेंस, आपने पहले किसी ऑब्जेक्ट की layers प्रॉपर्टी में बनाया था:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. मैप पर ओवरले लागू करें:
 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 स्टेशनों का शानदार डेटा विज़ुअलाइज़ेशन दिखेगा.

d01802e265548be1.png

6. बधाई हो

बधाई हो! आपने Google Maps Platform और deck.gl का इस्तेमाल करके, न्यूयॉर्क शहर के Citi Bike के डेटा का विज़ुअलाइज़ेशन तैयार किया है.

ज़्यादा जानें

Maps JavaScript API की मदद से, आपको Google Maps Platform की उन सभी सुविधाओं का ऐक्सेस मिलता है जो वेब के लिए उपलब्ध हैं. वेब पर Google Maps Platform का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, इन लिंक पर क्लिक करें:

deck.gl में डेटा विज़ुअलाइज़ेशन की कई लेयर होती हैं. इनका इस्तेमाल करके, अपने उपयोगकर्ताओं को डेटा दिखाया जा सकता है. Maps JavaScript API के साथ deck.gl का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, इन लिंक पर जाएं: