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

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

इस कोडलैब (कोड बनाना सीखने के लिए ट्यूटोरियल) के बारे में जानकारी

subjectपिछली बार मई 11, 2022 को अपडेट किया गया
account_circleकिसी Googler ने लिखा है

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

इस कोडलैब से आपको Maps JavaScript एपीआई और डेक के साथ-साथ, ज़्यादा वॉल्यूम वाले भौगोलिक डेटा विज़ुअलाइज़ेशन बनाने का तरीका पता चलता है.ध्यान दें कि ओपन सोर्स, WebGL-Accelerated, डेटा-विज़ुअलाइज़ेशन फ़्रेमवर्क.

d01802e265548be1.png

ज़रूरी बातें

आप क्या कर पाएंगे!

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

आपको इनकी ज़रूरत होगी

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

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

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

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

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

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

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

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

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

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

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

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

    The starter app opens in your browser and displays a map.
  1. अपने IDE में प्रोजेक्ट खोलें और /starter/src डायरेक्ट्री पर जाएं.
  2. app.js फ़ाइल खोलें.

आप फ़ाइल के कोड के इस सेक्शन में, सभी कोडिंग करेंगे:

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

आप फ़ाइल में शेष कोड के साथ कुछ भी नहीं कर सकते, जो मैप 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 का इस्तेमाल करें. इसमें न्यूयॉर्क शहर और #39;s Citi बाइक के लिए 14,500 साइकल और 900 जगहों वाली साइकल शेयर करने का प्रोग्राम शामिल है. इसके लिए यह तरीका अपनाएं:

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

2f4932829f7e1f78.png

अब जब आपको अपना डेटा मिल गया है, तो आप index.gl के साथ अपना पहला विज़ुअलाइज़ेशन बना सकते हैं.

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

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

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

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

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

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

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

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

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

एक बार यह&#39 हो जाने पर, आप किसी भी डेक.gl's विज़ुअलाइज़ेशन लेयर को GoogleMapsOverlay में पास कर सकते हैं, जो लेयर को रेंडर करता है और उसे मैप के साथ सिंक करता है.

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

  1. डेक.gl's GoogleMapsOverlay क्लास इंपोर्ट करें:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. GoogleMapsOverlay क्लास का इंस्टेंस बनाएं और किसी ऑब्जेक्ट की layers प्रॉपर्टी में पहले बनाया गया scatterplotLayer इंस्टेंस पास करें:
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. बधाई हो

बधाई हो! आपने न्यूयॉर्क शहर और #39;s Citi बाइक डेटा का Google वॉल्यूम प्लैटफ़ॉर्म और डेक.gl के साथ बहुत ज़्यादा वॉल्यूम वाला डेटा विज़ुअलाइज़ेशन तैयार किया.

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

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

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

bug_report गलती की शिकायत करें