Google মানচিত্র প্ল্যাটফর্ম এবং deck.gl দিয়ে ডেটা ভিজ্যুয়ালাইজ করুন

1. আপনি শুরু করার আগে

এই কোডল্যাব আপনাকে শেখায় কিভাবে মানচিত্র জাভাস্ক্রিপ্ট API এবং deck.gl, একটি ওপেন-সোর্স, WebGL-এক্সিলারেটেড, ডেটা-ভিজ্যুয়ালাইজেশন ফ্রেমওয়ার্ক ব্যবহার করে একটি উচ্চ-ভলিউম ভূ-স্থানিক ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে হয়।

d01802e265548be1.png

পূর্বশর্ত

আপনি কি করবেন

  • deck.gl এর সাথে Google মানচিত্র প্ল্যাটফর্মকে একীভূত করুন।
  • BigQuery থেকে একটি মানচিত্রে একটি ডেটাসেট আমদানি করুন।
  • মানচিত্রে ডেটা পয়েন্ট সংজ্ঞায়িত করুন।

আপনি কি প্রয়োজন হবে

  • একটি Google অ্যাকাউন্ট
  • আপনার পছন্দের একটি পাঠ্য সম্পাদক বা IDE
  • জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর প্রাথমিক জ্ঞান

2. আপনার পরিবেশ সেট আপ করুন

Google Maps প্ল্যাটফর্ম দিয়ে শুরু করুন

আপনি যদি আগে Google মানচিত্র প্ল্যাটফর্ম ব্যবহার না করে থাকেন তবে এই পদক্ষেপগুলি অনুসরণ করুন:

  1. একটি বিলিং অ্যাকাউন্ট তৈরি করুন।
  2. একটি প্রকল্প তৈরি করুন।
  3. Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷
  4. একটি API কী তৈরি করুন।

Node.js ডাউনলোড করুন

যদি আপনার কাছে এটি আগে থেকে না থাকে, তাহলে https://nodejs.org/ এ যান এবং আপনার কম্পিউটারে Node.js রানটাইম ডাউনলোড ও ইনস্টল করুন।

Node.js-এ npm, একটি প্যাকেজ ম্যানেজার রয়েছে যা আপনাকে এই কোডল্যাবের জন্য নির্ভরতা ইনস্টল করতে হবে।

স্টার্টার প্রকল্প সেট আপ করুন

আপনার সময় বাঁচাতে, এই কোডল্যাবের স্টার্টার প্রজেক্টে সমস্ত বয়লারপ্লেট কোড অন্তর্ভুক্ত রয়েছে যা আপনাকে একটি মানচিত্র তৈরি করতে হবে।

শুরু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. এই সংগ্রহস্থলটি ক্লোন বা ডাউনলোড করুন।
  2. কমান্ড লাইন থেকে, /starter ডিরেক্টরিতে নেভিগেট করুন, যেটিতে মৌলিক ফাইল কাঠামো রয়েছে যা এই কোডল্যাবটি সম্পূর্ণ করতে আপনার প্রয়োজন।
  3. নিম্নলিখিত কমান্ডটি চালিয়ে npm থেকে নির্ভরতা ইনস্টল করুন:
npm install
  1. নিম্নলিখিত কমান্ডটি চালিয়ে ওয়েবপ্যাক ডেভ সার্ভারের সাথে আপনার ব্রাউজারে স্টার্টার প্রকল্পটি চালান:
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
}

আপনি ফাইলের বাকি কোডের সাথে কিছু করবেন না, যা মানচিত্র জাভাস্ক্রিপ্ট 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. আপনার প্রকৃত API কী দিয়ে আপনার YOUR API KEY কী প্রতিস্থাপন করুন, যা আপনি আপনার পরিবেশ সেট আপ করার সময় তৈরি করেছিলেন:
const googleMapsAPIKey = 'YOUR API KEY';

3. BigQuery থেকে ডেটা রপ্তানি করুন

BigQuery অনেক পাবলিক ডেটাসেট অফার করে যা আপনি ডেটা বিশ্লেষণ বা পরীক্ষামূলক উদ্দেশ্যে ব্যবহার করতে পারেন।

এই ধাপগুলি অনুসরণ করে একটি সর্বজনীনভাবে উপলব্ধ ডেটাসেট রপ্তানি করতে BigQuery ব্যবহার করুন যাতে নিউ ইয়র্ক সিটির সিটি বাইক, 14,500টি বাইক এবং 900টি অবস্থান সহ একটি বাইকশেয়ার প্রোগ্রামের লোকেশন ডেটা অন্তর্ভুক্ত থাকে:

  1. ক্লাউড কনসোলে যান।
  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 হল একটি ওপেন সোর্স ডেটা-ভিজ্যুয়ালাইজেশন ফ্রেমওয়ার্ক যা অত্যন্ত বড় ডেটাসেটের উচ্চ-রেজোলিউশন 2D এবং 3D রেন্ডারিং তৈরি করতে WebGL ব্যবহার করে। এটি কয়েক হাজার ডেটা পয়েন্ট পরিচালনা করতে পারে এবং, যখন অপ্টিমাইজ করা হয়, এটি এমনকি লক্ষ লক্ষকে পরিচালনা করতে পারে।

একটি ভিজ্যুয়ালাইজেশন তৈরি করার জন্য, আপনার দুটি ক্লাস দরকার— GoogleMapsOverlay এবং deck.gl-এর অনেকগুলি ভিজ্যুয়ালাইজেশন স্তরগুলির মধ্যে একটি৷

শুরু করতে, ScatterplotLayer এর একটি দৃষ্টান্ত তৈরি করুন — যা মানচিত্রের বৃত্ত হিসাবে ডেটা পয়েন্ট রেন্ডার করে:

  1. app.js এর শীর্ষে নিম্নলিখিত যোগ করে app.js এর ScatterplotLayer ক্লাস আমদানি করুন:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. deck.gl-এর scatterplot স্তরের জন্য উপলব্ধ দুই ধরনের বৈশিষ্ট্য থেকে বেছে নিয়ে আপনার স্তর বৈশিষ্ট্যগুলি সেট করুন।

সেটার বৈশিষ্ট্যগুলি তথ্যের সাথে ভিজ্যুয়ালাইজেশন প্রদান করে যা এটিকে রেন্ডার করতে হবে, যেমন ডেটা পয়েন্টের অবস্থান এবং ব্যাসার্ধ। স্টাইলার বৈশিষ্ট্যগুলি আপনাকে ভিজ্যুয়ালাইজেশনের শৈলী কাস্টমাইজ করতে দেয়।

নিম্নলিখিত কোড স্নিপেটে আপনি যে বৈশিষ্ট্যগুলি ব্যবহার করেন তার একটি ব্রেকডাউন এখানে রয়েছে:

  • id রেন্ডারারকে বিভিন্ন কারণে স্তর শনাক্ত করতে দেয়, যেমন পুনরায় রং করা এবং ভিজ্যুয়ালাইজেশনের অন্যান্য আপডেট। সমস্ত deck.gl স্তরগুলির একটি অনন্য আইডি প্রয়োজন, যা আপনি বরাদ্দ করেন৷
  • data ভিজ্যুয়ালাইজেশনের ডেটা উত্স নির্দিষ্ট করে। BigQuery থেকে এক্সপোর্ট করা ডেটাসেট ব্যবহার করতে './stations.j এ সেট করুন।
  • 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
};
  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 দৃষ্টান্ত প্রয়োগ করতে পারেন, যা মানচিত্রের উপরে একটি WebGL প্রসঙ্গ ইনজেক্ট করতে Maps JavaScript API OverlayView API ব্যবহার করে।

একবার এটি হয়ে গেলে, আপনি GoogleMapsOverlay এ deck.gl-এর যে কোনো ভিজ্যুয়ালাইজেশন লেয়ার পাস করতে পারেন, যা লেয়ারটিকে রেন্ডার করে এবং মানচিত্রের সাথে সিঙ্ক করে।

মানচিত্রে আপনার 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);
}

আপনার ব্রাউজারে ফিরে যান, যেখানে আপনি নিউ ইয়র্ক সিটির সমস্ত সিটি বাইক স্টেশনগুলির একটি দুর্দান্ত ডেটা ভিজ্যুয়ালাইজেশন দেখতে পাবেন৷

d01802e265548be1.png

6. অভিনন্দন

অভিনন্দন! আপনি গুগল ম্যাপ প্ল্যাটফর্ম এবং deck.gl এর সাথে নিউ ইয়র্ক সিটির সিটি বাইক ডেটার একটি উচ্চ-ভলিউম ডেটা ভিজ্যুয়ালাইজেশন তৈরি করেছেন।

আরও জানুন

Maps JavaScript API আপনাকে Google মানচিত্র প্ল্যাটফর্ম ওয়েবের জন্য অফার করে এমন সবকিছুতে অ্যাক্সেস দেয়। এই লিঙ্কগুলি চেক করে ওয়েবে Google মানচিত্র প্ল্যাটফর্মের সাথে কাজ করার বিষয়ে আরও জানুন:

deck.gl অসংখ্য ডেটা-ভিজ্যুয়ালাইজেশন স্তর অফার করে যা আপনি আপনার ব্যবহারকারীদের কাছে ডেটা প্রদর্শন করতে ব্যবহার করতে পারেন। এই লিঙ্কগুলি চেক করে মানচিত্র জাভাস্ক্রিপ্ট API এর সাথে deck.gl ব্যবহার সম্পর্কে আরও জানুন: