ডেটা-চালিত স্টাইলিং সহ আপনার ডেটা রিয়েল টাইমে দেখুন

এই দস্তাবেজটি বর্ণনা করে যে কেন এবং কীভাবে ম্যাপস জাভাস্ক্রিপ্ট API ব্যবহার করে Google বাউন্ডারির ​​গতিশীল ডেটা-চালিত স্টাইলিং প্রয়োগ করা যায়, যা শিল্প এবং বিভাগ জুড়ে বিভিন্ন ব্যবহারের ক্ষেত্রে উপযোগী।

পোস্টাল কোড দ্বারা NYC-তে ট্যাক্সির সংখ্যা
নিউ ইয়র্ক সিটিতে পোস্টাল কোড সীমানা অনুসারে অ্যানিমেটেড ট্যাক্সি গণনা (সিমুলেটেড, টাইম-ল্যাপস):

ডেটা-চালিত স্টাইলিং হল একটি Google মানচিত্র প্ল্যাটফর্ম ক্ষমতা যা আপনাকে Google এর প্রশাসনিক সীমানা বহুভুজ ব্যবহার করতে, আপনার মানচিত্রে প্রদর্শনের জন্য সেই বহুভুজগুলিতে স্টাইলিং প্রয়োগ করতে এবং আপনার নিজস্ব ডেটা একত্রিত করে সমৃদ্ধ, কাস্টমাইজড মানচিত্র তৈরি করতে দেয় যা ভিজ্যুয়াল বিশ্লেষণের জন্য ব্যবহার করা যেতে পারে এবং আপনার ডেটা সম্পর্কে উন্নত বোঝার। এই দস্তাবেজটি এমন কিছু ব্যবহারের ক্ষেত্রে আলোচনা করবে যা ব্যাখ্যা করে যে কেন এবং কীভাবে আপনি গতিশীল ডেটা ফিডগুলিকে একীভূত করে কাছাকাছি রিয়েল-টাইমে একটি মানচিত্রে ডেটা-চালিত স্টাইলিং দিয়ে আপনার ডেটা কল্পনা করতে পারেন৷

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

এখানে ব্যবহারের ক্ষেত্রে কিছু উদাহরণ রয়েছে যা ডেটা-চালিত স্টাইলিং-এ গতিশীল ডেটা আপডেটগুলি প্রদর্শনকারী একটি মানচিত্রে প্রযোজ্য হতে পারে:

• রাইড শেয়ারিং: রিয়েল-টাইম আপডেটগুলি উচ্চ চাহিদার ক্ষেত্রগুলি সনাক্ত করতে ব্যবহার করা যেতে পারে, এই ক্ষেত্রে কিছু প্রদানকারীর মূল্য বৃদ্ধি হতে পারে।
• পরিবহন: রিয়েল-টাইম আপডেটগুলি যানজটের ক্ষেত্রগুলি সনাক্ত করতে ব্যবহার করা যেতে পারে, যা সর্বোত্তম বিকল্প রুট নির্ধারণে সহায়তা করবে।
• নির্বাচন: নির্বাচনের রাতে, রিয়েল-টাইম ডেটা পোলিং ডেটা ব্যবহার করা যেতে পারে ফলাফলগুলিকে কল্পনা করার জন্য।
• কর্মীদের নিরাপত্তা: রিয়েল-টাইম আপডেটগুলি ইভেন্টগুলিকে ট্র্যাক করার জন্য ব্যবহার করা যেতে পারে যখন তারা রিয়েল-টাইমে উন্মোচিত হয়, উচ্চ-ঝুঁকিপূর্ণ এলাকা চিহ্নিত করে এবং ক্ষেত্রের প্রতিক্রিয়াকারীদের পরিস্থিতিগত সচেতনতা প্রদান করে।
• আবহাওয়া: রিয়েল-টাইম আপডেটগুলি ঝড়ের গতিবিধি ট্র্যাক করতে, বর্তমান বিপদ সনাক্ত করতে এবং সতর্কতা এবং সতর্কতা প্রদান করতে ব্যবহার করা যেতে পারে।
• পরিবেশ: রিয়েল-টাইম আপডেটগুলি আগ্নেয়গিরির ছাই এবং অন্যান্য দূষণকারীর গতিবিধি ট্র্যাক করতে, পরিবেশগত অবক্ষয়ের ক্ষেত্রগুলি সনাক্ত করতে এবং মানুষের কার্যকলাপের প্রভাব নিরীক্ষণ করতে ব্যবহার করা যেতে পারে।

এই সমস্ত পরিস্থিতিতে, গ্রাহকরা তাদের রিয়েল-টাইম ডেটা ফিডগুলিকে Google-এর সীমানাগুলির সাথে একত্রিত করে একটি মানচিত্রে তাদের ডেটা দ্রুত এবং সহজে কল্পনা করার জন্য অতিরিক্ত মান আনলক করতে পারেন, যাতে তারা আরও ভাল জ্ঞাত সিদ্ধান্ত নেওয়ার জন্য নিকট-তাত্ক্ষণিক অন্তর্দৃষ্টির সুপার পাওয়ার দেয়৷

এখনই চেষ্টা করুন: Google ক্লাউড কনসোলে যান এবং Maps JavaScript API সক্ষম করুন৷

সমাধানের জন্য আর্কিটেকচারাল অ্যাপ্রোচ

এখন চলুন গতিশীল ডেটা কল্পনা করতে ডেটা-চালিত স্টাইলিং ব্যবহার করে একটি মানচিত্র তৈরির মাধ্যমে হাঁটুন। পূর্বে চিত্রিত হিসাবে, ব্যবহারের ক্ষেত্রে পোস্টাল কোড দ্বারা ভিজ্যুয়ালাইজ করা NYC ট্যাক্সিগুলির একটি গণনা। এটি ব্যবহারকারীদের বোঝার জন্য সহায়ক হতে পারে যে একটি ট্যাক্সি হাইল করা কতটা সহজ হবে।

স্থাপত্য
এখানে পদ্ধতির একটি অ্যাপ্লিকেশন আর্কিটেকচার ডায়াগ্রাম রয়েছে:

ডায়নামিক ডেটা-চালিত স্টাইলিং সলিউশন

এখন আপনার ডেটাসেটের জন্য একটি ডাইনামিক ডেটা-চালিত স্টাইলিং choropleth মানচিত্র বাস্তবায়নের জন্য প্রয়োজনীয় পদক্ষেপগুলি নিয়ে চলুন।

এই সমাধানটি আপনাকে পোস্টাল কোড দ্বারা নিউ ইয়র্ক সিটির চারপাশে রিয়েল-টাইম ট্যাক্সি ঘনত্বের একটি অনুমানমূলক ডেটাসেট কল্পনা করতে সক্ষম করে। যদিও এটি বাস্তব-বিশ্বের ডেটা নাও হতে পারে, এটিতে বাস্তব-বিশ্বের অ্যাপ্লিকেশন রয়েছে এবং ডেটা-চালিত স্টাইলিং সহ মানচিত্রে গতিশীল ডেটা কীভাবে ভিজ্যুয়ালাইজ করা যেতে পারে তার শক্তি এবং ক্ষমতাগুলির একটি ধারনা আপনাকে প্রদান করে৷

ধাপ 1: ভিজ্যুয়ালাইজ করার জন্য ডেটা বেছে নিন এবং একটি বাউন্ডারি প্লেস আইডিতে যোগ দিন

প্রথম ধাপ হল আপনি যে ডেটা প্রদর্শন করতে চান তা শনাক্ত করা এবং নিশ্চিত করা যে এটি Google-এর সীমানার সাথে মেলে। আপনি প্রতিটি পোস্টালকোডের জন্য findPlaceFromQuery কলব্যাক পদ্ধতিতে কল করে এই ম্যাচিং ক্লায়েন্ট-সাইডটি সম্পাদন করতে পারেন। উল্লেখ্য যে মার্কিন যুক্তরাষ্ট্রে পোস্টাল কোডের আলাদা নাম আছে, কিন্তু অন্যান্য প্রশাসনিক স্তরে তা নেই। অস্পষ্ট ফলাফল হতে পারে এমন ক্ষেত্রে আপনি আপনার প্রশ্নের জন্য সঠিক স্থান আইডি নির্বাচন করেছেন তা নিশ্চিত করতে চাইবেন।

const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

যদি আপনার ডেটাতে অক্ষাংশ এবং দ্রাঘিমাংশের মান থাকে, আপনি স্টাইল করতে আগ্রহী এমন বৈশিষ্ট্য স্তরের জন্য সেই অক্ষাংশ/লন মানগুলিকে প্লেস আইডি মানগুলিতে সমাধান করতে উপাদান ফিল্টারিং সহ জিওকোডিং API ব্যবহার করতে পারেন৷ এই উদাহরণে আপনি POSTAL_CODE বৈশিষ্ট্য স্তরটি স্টাইল করবেন৷

ধাপ 2: রিয়েল-টাইম ডেটার সাথে সংযোগ করুন

ডেটা উত্সগুলির সাথে সংযোগ করার বিভিন্ন উপায় রয়েছে এবং সর্বোত্তম বাস্তবায়ন আপনার নির্দিষ্ট প্রয়োজন এবং প্রযুক্তিগত অবকাঠামোর উপর নির্ভর করবে। এই ক্ষেত্রে, ধরে নেওয়া যাক যে আপনার ডেটা দুটি কলাম সহ একটি BigQuery টেবিলে থাকে: “zip_code” এবং “taxi_count”, এবং আপনি এটি একটি Firebase ক্লাউড ফাংশনের মাধ্যমে জিজ্ঞাসা করবেন।

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

এরপরে আপনি নিশ্চিত করতে চাইবেন যে আপনি ডেটা তাজা রাখবেন। এটি করার একটি উপায় হল একটি ওয়েব ওয়ার্কার ব্যবহার করে উপরের ক্যোয়ারীটি কল করা এবং setInterval ফাংশন ব্যবহার করে আপনার ডেটা রিফ্রেশ করার জন্য একটি টাইমার সেট করা। আপনি একটি উপযুক্ত মান নির্ধারণ করতে পারেন, যেমন প্রতি 15 সেকেন্ডে মানচিত্র রিফ্রেশ করা। প্রতিবার ব্যবধানের সময় পেরিয়ে গেলে, ওয়েব কর্মী পোস্টালকোড প্রতি আপডেট করা ট্যাক্সি কাউন্ট মানগুলির জন্য অনুরোধ করবে।

এখন যেহেতু আমরা ডেটা অনুসন্ধান করতে এবং রিফ্রেশ করতে পারি, আসুন মানচিত্র বহুভুজগুলির উপস্থিতি এই পরিবর্তনগুলিকে প্রতিফলিত করে তা নিশ্চিত করি।

ধাপ 3: ডেটা-চালিত স্টাইলিং দিয়ে আপনার মানচিত্রকে স্টাইল করুন

এখন আপনার কাছে আপনার মানচিত্র জাভাস্ক্রিপ্ট ইনস্ট্যান্সে একটি JSON অবজেক্ট হিসাবে পোস্টাল কোডের সীমানায় একটি ভিজ্যুয়াল স্টাইল তৈরি এবং প্রয়োগ করার জন্য প্রয়োজনীয় গতিশীল ডেটা মান রয়েছে, এটি একটি choropleth মানচিত্র হিসাবে কিছু স্টাইল দেওয়ার সময়।

এই উদাহরণে আপনি প্রতিটি পোস্টাল কোডে ট্যাক্সির সংখ্যার উপর ভিত্তি করে মানচিত্রটিকে স্টাইল করবেন, আপনার ব্যবহারকারীদের তাদের এলাকায় ট্যাক্সির ঘনত্ব এবং প্রাপ্যতার ধারণা দেবে। স্টাইল ট্যাক্সি গণনা মান উপর নির্ভর করে পরিবর্তিত হবে. সবচেয়ে কম ট্যাক্সি আছে এমন এলাকায় একটি বেগুনি স্টাইলিং প্রয়োগ করা হবে, এবং রঙের গ্রেডিয়েন্ট লাল, কমলা, এবং সর্বোচ্চ ঘনত্বের এলাকার জন্য NYC ট্যাক্সি হলুদে শেষ হবে। এই রঙের স্কিমের জন্য আপনি এই রঙের মানগুলি fillColor এবং strokeColor এ প্রয়োগ করবেন। ফিলঅপ্যাসিটি 0.5 এ সেট করা আপনার ব্যবহারকারীদের অন্তর্নিহিত মানচিত্র দেখতে দেয় এবং স্ট্রোকঅপ্যাসিটি 1.0 তে সেট করা তাদের একই রঙের বহুভুজের সীমানার মধ্যে পার্থক্য করতে দেয়:

const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};
 

উপসংহার

Google সীমানার জন্য ডেটা-চালিত স্টাইলিং শিল্প এবং বিভাগ জুড়ে বিভিন্ন বাস্তবায়নের জন্য আপনার মানচিত্রের স্টাইল করতে আপনার ডেটা ব্যবহার করার ক্ষমতা আনলক করে। রিয়েল-টাইম ডেটার সাথে সংযোগ করা আপনাকে কী ঘটছে, কোথায় ঘটছে এবং যেমন ঘটছে তা যোগাযোগ করতে সক্ষম করে। এই ক্ষমতা আপনার রিয়েল-টাইম ডেটার মান আনলক করার এবং আপনার ব্যবহারকারীদের রিয়েল-টাইমে, বাস্তব জগতে এটি আরও ভালভাবে বুঝতে সাহায্য করার সম্ভাবনা রয়েছে।

পরবর্তী অ্যাকশন

• Google মানচিত্রের সীমানা ওয়েবিনার স্টাইল করতে ডেটা-চালিত স্টাইলিং কীভাবে ব্যবহার করবেন তা দেখুন।
• ডেটা-চালিত স্টাইলিংয়ের জন্য ক্লিক ইভেন্টগুলির সাথে আপনার ভিজ্যুয়ালাইজেশনকে আরও এক ধাপ এগিয়ে নিয়ে যান।
• আপনার মানচিত্রে উন্নত মার্কার যোগ করার কথা বিবেচনা করুন।

অবদানকারী

প্রধান লেখক:

জিম লেফ্লার | গুগল ম্যাপ প্ল্যাটফর্ম সলিউশন ইঞ্জিনিয়ার