D3.js এর সাথে Map এবং Geo Visualization

ডি৩জেএস (D3JS) - Web Development

310

D3.js একটি শক্তিশালী লাইব্রেরি, যা Map এবং Geo Visualization তৈরি করতে ব্যবহৃত হয়। গুগল ম্যাপ বা অন্য কোন ম্যাপের মতই, D3.js ব্যবহার করে আপনি ডেটা ভিত্তিক ম্যাপ ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন, যেখানে প্রতিটি জিওগ্রাফিক্যাল এলাকা বা অবস্থান ভিজ্যুয়াল উপাদান (যেমন, বর্ণ বা আকার) দ্বারা চিত্রিত হয়।

Geo visualization মূলত GeoJSON অথবা TopJSON ফরম্যাটে থাকা জিওগ্রাফিক ডেটা (যেমন, দেশ, শহর, নদী, পর্বত ইত্যাদি) দিয়ে কাজ করে। D3.js এর মাধ্যমে এই ধরনের ডেটা ভিজ্যুয়ালাইজ করা সহজ এবং খুবই ফ্লেক্সিবল।

১. GeoJSON ডেটার সাথে কাজ

GeoJSON হচ্ছে জিওগ্রাফিক ডেটা স্টোরেজের একটি জনপ্রিয় ফরম্যাট, যা JSON এর মতো একটি স্ট্রাকচার ব্যবহার করে, কিন্তু এটি ভৌগোলিক অবস্থান ও আকার সংরক্ষণ করে। D3.js এ GeoJSON ডেটা ব্যবহার করে ম্যাপ তৈরি করা হয়।

GeoJSON ডেটার উদাহরণ:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Bangladesh",
        "population": 160000000
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [90.4125, 23.685],
            [92.4125, 24.685],
            [93.4125, 23.685],
            [90.4125, 23.685]
          ]
        ]
      }
    }
  ]
}

এটি একটি সাধারণ GeoJSON অবজেক্ট, যেখানে "Bangladesh" নামক একটি দেশের পলিগনাল সীমা রয়েছে।

২. D3.js এ Map তৈরির জন্য প্রয়োজনীয় টুলস

D3.js এ ম্যাপ তৈরি করতে কয়েকটি মৌলিক কম্পোনেন্ট এবং টুল ব্যবহার করা হয়:

d3.geo(): জিওগ্রাফিক তথ্যের জন্য D3.js এর জিও সাপোর্ট ফাংশন।
d3.geoPath(): GeoJSON ডেটাকে SVG পাথ এ রূপান্তর করে ম্যাপের নকশা তৈরি করতে ব্যবহৃত হয়।
d3.projection(): জিওগ্রাফিক পয়েন্টকে স্কেল এবং মানচিত্রের অন্যান্য উপাদানে রূপান্তর করার জন্য ব্যবহৃত হয়।

৩. ম্যাপ তৈরি করা: D3.js এর সাথে GeoJSON এবং Map Visualization

উদাহরণ: বাংলাদেশ ম্যাপ

HTML এবং SVG এলিমেন্ট প্রস্তুত করা:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Geo Map</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <svg id="map" width="960" height="600"></svg>
</body>
</html>

JavaScript কোড (D3.js দিয়ে ম্যাপ রেন্ডার):

// SVG ডোম নির্বাচন
const svg = d3.select("#map");

// ম্যাপের জন্য সঠিক প্রক্ষেপণ (projection) নির্ধারণ
const projection = d3.geoMercator()  // Mercator projection
  .center([90.4125, 23.685]) // Bangladesh এর কেন্দ্রে
  .scale(600)  // স্কেলিং ফ্যাক্টর
  .translate([960 / 2, 600 / 2]);  // সেন্টার করা

const path = d3.geoPath().projection(projection);  // পাথ তৈরি করা

// GeoJSON ডেটা লোড করা
d3.json("bangladesh.geojson").then(function(geoData) {
  // GeoJSON ডেটা থেকে পলিগন বা পাথ তৈরি করা
  svg.selectAll("path")
    .data(geoData.features)
    .enter()
    .append("path")
    .attr("d", path)
    .style("fill", "lightblue")
    .style("stroke", "black")
    .style("stroke-width", 0.5);
});

এখানে, geoMercator() হচ্ছে একটি গ্লোবাল ম্যাপ প্রক্ষেপণ (projection), যা সঠিকভাবে বাংলাদেশের অবস্থান এবং আকার প্রদর্শন করবে। d3.geoPath() দিয়ে GeoJSON ডেটা SVG পাথে রূপান্তরিত হচ্ছে এবং তারপর path ডোম এলিমেন্ট হিসেবে ম্যাপে আঁকা হচ্ছে।

৪. Interactivity: ম্যাপে ইনফোডিসপ্লে যোগ করা

D3.js দিয়ে ম্যাপে ইন্টারঅ্যাকটিভিটি যোগ করা খুব সহজ। আপনি mouseover বা click ইভেন্ট ব্যবহার করে, ম্যাপে কোনও নির্দিষ্ট এলাকা বা অঞ্চল সম্পর্কে তথ্য প্রদর্শন করতে পারেন।

উদাহরণ: ম্যাপের উপর হোভার ইফেক্ট

// Info box তৈরি
const infoBox = d3.select("body").append("div")
  .attr("class", "info")
  .style("position", "absolute")
  .style("background", "rgba(255, 255, 255, 0.7)")
  .style("padding", "10px")
  .style("visibility", "hidden");

// ম্যাপের পাথ/নোডে হোভার ইফেক্ট
svg.selectAll("path")
  .on("mouseover", function(event, d) {
    d3.select(this).style("fill", "orange");  // হোভার হলে রঙ পরিবর্তন
    infoBox.style("visibility", "visible")
      .html(d.properties.name + "<br>Population: " + d.properties.population);
  })
  .on("mousemove", function(event) {
    infoBox.style("top", (event.pageY + 10) + "px")
      .style("left", (event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    d3.select(this).style("fill", "lightblue");  // মাউস আউট হলে রঙ পূর্বাবস্থায় ফিরিয়ে আনা
    infoBox.style("visibility", "hidden");
  });

এখানে, mouseover, mousemove, এবং mouseout ইভেন্ট ব্যবহার করে ম্যাপের উপর হোভার ইফেক্ট এবং ইনফোডিসপ্লে তৈরি করা হয়েছে।

৫. Geo Visualization এ Projection ব্যবহার

D3.js এ ম্যাপের প্রক্ষেপণ অত্যন্ত গুরুত্বপূর্ণ। বিভিন্ন projection types ব্যবহার করে আপনি গ্লোবাল ম্যাপের বিভিন্ন দৃষ্টিকোণ থেকে ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন।

geoMercator(): সারা পৃথিবীর ম্যাপ তৈরি করতে ব্যবহার হয়। এটি একটি সাধারণ এবং সোজা প্রক্ষেপণ।
geoAlbersUsa(): মার্কিন যুক্তরাষ্ট্রের জন্য বিশেষভাবে তৈরি প্রক্ষেপণ।
geoOrthographic(): পৃথিবীকে গোলাকারভাবে প্রদর্শন করতে ব্যবহৃত হয়, যেমন একটি বিশ্ব মানচিত্র।

D3.js ব্যবহার করে Geo Visualization বা Map Visualization তৈরি করা একটি শক্তিশালী উপায় ডেটাকে ভৌগোলিকভাবে উপস্থাপন করার। GeoJSON ফরম্যাটে থাকা ডেটা ব্যবহার করে এবং D3.js এর প্রক্ষেপণ ও পাথ ফাংশন ব্যবহার করে সহজেই আপনার ম্যাপ বা ভৌগোলিক ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব। D3.js এ ম্যাপ ইন্টারঅ্যাকটিভিটি যোগ করা যেমন হোভার, ক্লিক ইভেন্টে ইনফোডিসপ্লে এবং বিভিন্ন প্রক্ষেপণ ব্যবহার করে বিভিন্ন ধরণের জিওগ্রাফিক্যাল তথ্য সুন্দরভাবে উপস্থাপন করা যায়।

Content added By

Azizar Rahman Aziz

D3 Geo মডিউল ব্যবহার

245

D3 Geo মডিউলটি D3.js-এর একটি শক্তিশালী অংশ যা আপনাকে জিওগ্রাফিক্যাল ডেটা (যেমন, মানচিত্র, সীমানা, ভূ-অবস্থান) ভিজ্যুয়ালাইজ করতে সাহায্য করে। এই মডিউলটির মাধ্যমে আপনি GeoJSON, TopoJSON, এবং অন্যান্য জিওগ্রাফিক্যাল ডেটা ফরম্যাটের সাথে কাজ করতে পারেন এবং বিভিন্ন ধরনের ম্যাপ, সীমানা, পলিগন, লাইন, পয়েন্ট ইত্যাদি উপস্থাপন করতে পারেন। এটি ব্যবহৃত হয় মানচিত্র (maps), গ্লোবাল ডেটা ভিজ্যুয়ালাইজেশন এবং জিওস্পেশিয়াল ডেটা বিশ্লেষণ করতে।

১. D3 Geo মডিউলের উপাদান

D3 Geo মডিউলের প্রধান উপাদানগুলি হল:

GeoJSON এবং TopoJSON ফরম্যাট সমর্থন।
Geo projection: মানচিত্রের প্রদর্শন জন্য বিভিন্ন প্রজেকশন তৈরি করতে সাহায্য করে (যেমন, Mercator, Orthographic, Albers, ইত্যাদি)।
Path: জিওগ্রাফিক্যাল ডেটা বা ম্যাপের পথ আঁকার জন্য ব্যবহৃত।
Graticule: মানচিত্রে দ্রাঘিমা এবং অক্ষাংশের লাইন আঁকার জন্য ব্যবহৃত।
Point, Line, Polygon: জিওগ্রাফিক্যাল প্রজেকশনগুলোর জন্য পয়েন্ট, লাইন এবং পলিগন আঁকার উপায়।

২. D3 Geo দিয়ে মানচিত্র তৈরি করা

D3 Geo মডিউল ব্যবহার করে আপনি সহজেই GeoJSON ডেটা ব্যবহার করে একটি মানচিত্র (Map) তৈরি করতে পারেন। এর জন্য আপনাকে কয়েকটি গুরুত্বপূর্ণ পদক্ষেপ অনুসরণ করতে হবে:

GeoJSON ফাইল লোড: আপনার মানচিত্রের ডেটা (GeoJSON ফরম্যাটে) লোড করুন।
Geo Projection নির্ধারণ: আপনার মানচিত্রের জন্য উপযুক্ত প্রজেকশন নির্বাচন করুন (যেমন, Mercator, Albers, ইত্যাদি)।
Path তৈরির জন্য D3 ব্যবহার: প্রজেকশনের উপর ভিত্তি করে GeoJSON ডেটাকে পাথ (path) আকারে আঁকুন।

৩. D3 Geo মডিউলের ব্যবহার: উদাহরণ

নিচে একটি উদাহরণ দেওয়া হলো যেখানে D3.js Geo মডিউল ব্যবহার করে একটি GeoJSON ফাইলের মানচিত্র তৈরি করা হয়েছে:

উদাহরণ: GeoJSON ডেটা দিয়ে মানচিত্র তৈরি

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Geo Map Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    svg {
      width: 100%;
      height: 500px;
    }
    .country {
      fill: lightgray;
      stroke: #333;
      stroke-width: 0.5;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  
  <svg id="map"></svg>

  <script>
    // GeoJSON ডেটা লোড করুন
    d3.json('https://raw.githubusercontent.com/d3/d3-geo/master/test/data/world-110m.json').then(function(world) {

      // প্রজেকশন তৈরি করুন (Mercator প্রজেকশন)
      const projection = d3.geoMercator()
                           .scale(150)
                           .translate([window.innerWidth / 2, window.innerHeight / 2]);

      // Path তৈরি করুন
      const path = d3.geoPath().projection(projection);

      // SVG এলিমেন্ট তৈরি
      const svg = d3.select('#map');

      // GeoJSON ডেটা থেকে মানচিত্র আঁকুন
      svg.append('g')
         .selectAll('.country')
         .data(topojson.feature(world, world.objects.countries).features)
         .enter()
         .append('path')
         .attr('class', 'country')
         .attr('d', path);

    });
  </script>
</body>
</html>

ব্যাখ্যা:

d3.json(): GeoJSON ডেটা লোড করতে ব্যবহৃত হয়েছে, যা একটি উন্মুক্ত উৎস মানচিত্রের ডেটা হিসেবে ব্যবহৃত হচ্ছে।
d3.geoMercator(): Mercator প্রজেকশন ব্যবহার করে মানচিত্রের আকার নির্ধারণ করা হয়েছে।
d3.geoPath(): প্রজেকশনের উপর ভিত্তি করে পাথ তৈরি করার জন্য ব্যবহার করা হয়েছে।
path: GeoJSON ডেটাকে SVG পাথ (দৃশ্যমান লাইন বা শেপ) আকারে রেন্ডার করা হয়েছে।

৪. D3 Geo: Graticule এবং Projection

Graticule হল মানচিত্রের জন্য দ্রাঘিমা (longitude) এবং অক্ষাংশ (latitude) লাইনগুলি আঁকার একটি প্রক্রিয়া। D3.js এই ফিচারটি সরবরাহ করে যাতে আপনি সহজেই গ্রিড লাইন বা গ্র্যাটিকিউল তৈরি করতে পারেন।

উদাহরণ: Graticule এবং Projection ব্যবহার করা

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Graticule Example</title>
  <style>
    svg {
      width: 100%;
      height: 500px;
    }
    .graticule {
      fill: none;
      stroke: lightgray;
      stroke-width: 1;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  
  <svg id="graticule"></svg>

  <script>
    // প্রজেকশন তৈরি
    const projection = d3.geoMercator()
                         .scale(200)
                         .translate([window.innerWidth / 2, window.innerHeight / 2]);

    // Path তৈরি
    const path = d3.geoPath().projection(projection);

    // Graticule তৈরি
    const graticule = d3.geoGraticule();

    // SVG এলিমেন্ট তৈরি
    const svg = d3.select('#graticule');

    // গ্র্যাটিকিউল আঁকুন
    svg.append('path')
       .datum(graticule)
       .attr('class', 'graticule')
       .attr('d', path);

  </script>
</body>
</html>

ব্যাখ্যা:

d3.geoGraticule(): গ্র্যাটিকিউল বা গ্রিড লাইন তৈরি করতে ব্যবহৃত হয়েছে।
path: GeoGraticule এর পাথ তৈরি করতে geoPath() ব্যবহার করা হয়েছে, যা এটি SVG পাথ হিসাবে রেন্ডার করবে।

৫. D3 Geo: Interactivity

D3.js-এ Geo মডিউল ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ মানচিত্র তৈরি করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারী একটি দেশ বা অঞ্চলে ক্লিক করলে তার বিস্তারিত তথ্য প্রদর্শন করতে পারেন। এটি সাধারণত Mouse Events (যেমন, mouseover, click, mouseout) ব্যবহার করে করা হয়।

উদাহরণ: ইন্টারঅ্যাকটিভ মানচিত্র

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive D3 Geo Map</title>
  <style>
    svg {
      width: 100%;
      height: 500px;
    }
    .country {
      fill: lightblue;
      stroke: #fff;
      stroke-width: 0.5;
    }
    .highlight {
      fill: orange;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  
  <svg id="interactiveMap"></svg>

  <script>
    d3.json('https://raw.githubusercontent.com/d3/d3-geo/master/test/data/world-110m.json').then(function(world) {
      const projection = d3.geoMercator()
                           .scale(150)
                           .translate([window.innerWidth / 2, window.innerHeight / 2]);

      const path = d3.geoPath().projection(projection);
      const svg = d3.select('#interactiveMap');

      svg.append('g')
         .selectAll('.country')
         .data(topojson.feature(world, world.objects.countries).features)
         .enter()
         .append('path')
         .attr('class', 'country')
         .attr('d', path)
         .on('mouseover', function() {
           d3.select(this).classed('highlight', true); // হাইলাইট করার জন্য CSS ক্লাস যোগ করা
         })
         .

on('mouseout', function() { d3.select(this).classed('highlight', false); // হাইলাইট অপসারণ }); });

ব্যাখ্যা:

mouseover এবং mouseout: যখন ব্যবহারকারী একটি দেশ বা অঞ্চল উপরে মাউস রাখে, তখন তার রঙ পরিবর্তন করা হয়।
highlight: CSS ক্লাস ব্যবহার করে দেশটির রঙ পরিবর্তন করা হয়েছে।

D3.js-এর Geo মডিউল ব্যবহার করে আপনি জিওগ্রাফিক্যাল ডেটা ভিজ্যুয়ালাইজ করতে পারেন, এবং এটি বিশেষত মানচিত্র, সীমানা, পলিগন, এবং স্থানিক তথ্য উপস্থাপনে অত্যন্ত কার্যকর। GeoJSON, TopoJSON, projection, path, এবং graticule এর মতো শক্তিশালী ফিচারের মাধ্যমে আপনি উন্নত মানচিত্র এবং ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। D3.js-এর এই মডিউলটি জিওগ্রাফিক্যাল ডেটা বিশ্লেষণ এবং প্রেজেন্টেশনের জন্য খুবই উপযোগী।

Content added By

Azizar Rahman Aziz

GeoJSON ফাইল থেকে Data লোড করা

290

D3.js ব্যবহার করে GeoJSON ফাইল থেকে ডেটা লোড করা এবং তা ভিজ্যুয়ালাইজ করা একটি শক্তিশালী প্রক্রিয়া। GeoJSON ফাইল হলো একটি স্ট্যান্ডার্ড ফরম্যাট যা ভৌগলিক (geospatial) তথ্য সংরক্ষণ করে, যেমন বিভিন্ন দেশ, শহর, নদী, বা রাস্তা ইত্যাদির তথ্য। D3.js এর মাধ্যমে এই GeoJSON ডেটাকে গ্রাফিক্যালি প্রদর্শন করা সহজ।

এই গাইডে আমরা দেখবো কিভাবে D3.js এর মাধ্যমে GeoJSON ফাইল থেকে ডেটা লোড করা এবং সেটি ভিজ্যুয়ালাইজ করা যায়।

১. GeoJSON ফাইলের ধারণা

GeoJSON ফাইল সাধারণত GeoJSON format এ থাকে, যা জিওস্প্যাশিয়াল ডেটা সংরক্ষণ করে। একটি উদাহরণ GeoJSON ফাইল দেখতে এরকম হতে পারে:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-73.97, 40.77]
      },
      "properties": {
        "name": "Location A"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-74.00, 40.75]
      },
      "properties": {
        "name": "Location B"
      }
    }
  ]
}

এটি দুটি Point ভৌগলিক তথ্য ধারণ করছে: একটি "Location A" এবং অন্যটি "Location B"।

২. GeoJSON ফাইল লোড করা

GeoJSON ফাইল থেকে ডেটা লোড করতে D3.js এর d3.json() মেথড ব্যবহার করা হয়। এখানে, আমরা একটি GeoJSON ফাইল লোড করবো এবং তা একটি SVG ক্যানভাসে পয়েন্ট হিসেবে প্রদর্শন করবো।

D3.js দিয়ে GeoJSON লোড এবং প্রাথমিক সেটআপ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GeoJSON Data with D3.js</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    svg { border: 1px solid black; }
    circle { fill: steelblue; }
  </style>
</head>
<body>
  <svg width="800" height="600"></svg>

  <script>
    // GeoJSON ফাইলের URL (স্থানীয় ফাইলও ব্যবহার করা যেতে পারে)
    const geojsonUrl = 'path/to/your/geojson/file.geojson';

    // SVG ক্যানভাস সিলেক্ট করা
    const svg = d3.select("svg");

    // GeoJSON ডেটা লোড করা
    d3.json(geojsonUrl).then(function(data) {
      console.log(data);  // GeoJSON ডেটা কনসোল লগ

      // GeoJSON ডেটার পয়েন্টস নিয়ে কাজ
      const projection = d3.geoMercator().scale(1000).translate([400, 300]);
      const path = d3.geoPath().projection(projection);

      // GeoJSON ফিচারগুলির উপর পয়েন্ট বা পাথ আঁকা
      svg.selectAll("circle")
        .data(data.features)
        .enter().append("circle")
        .attr("cx", d => projection(d.geometry.coordinates)[0])
        .attr("cy", d => projection(d.geometry.coordinates)[1])
        .attr("r", 5);
    });
  </script>
</body>
</html>

এখানে:

d3.json(geojsonUrl) ব্যবহার করে GeoJSON ফাইলটি লোড করা হয়েছে।
projection একটি Mercator Projection তৈরি করা হয়েছে, যা ভৌগলিক স্থানাঙ্ক (latitude, longitude) কে SVG ক্যানভাসের মধ্যে মানচিত্রিত (map) করে।
d3.geoPath() ব্যবহার করে GeoJSON এর geometry থেকে পাথ তৈরি করা হয়েছে।

৩. GeoJSON ফিচার প্রদর্শন করা

GeoJSON ফাইলের মধ্যে বিভিন্ন ধরনের জিওস্প্যাশিয়াল তথ্য থাকতে পারে, যেমন Point, LineString, Polygon ইত্যাদি। এই তথ্যগুলো D3.js এর মাধ্যমে বিভিন্ন ভাবে ভিজ্যুয়ালাইজ করা যায়। উদাহরণস্বরূপ, পয়েন্ট ডেটার জন্য আমরা একটি circle তৈরি করবো, এবং Polygon বা LineString এর জন্য path ব্যবহার করা হবে।

GeoJSON পয়েন্ট ডেটা ভিজ্যুয়ালাইজ করা

d3.json(geojsonUrl).then(function(data) {
  const projection = d3.geoMercator().scale(1000).translate([400, 300]);
  
  svg.selectAll("circle")
    .data(data.features)
    .enter().append("circle")
    .attr("cx", d => projection(d.geometry.coordinates)[0])
    .attr("cy", d => projection(d.geometry.coordinates)[1])
    .attr("r", 5)
    .style("fill", "steelblue");
});

এখানে, প্রতিটি Point GeoJSON ফিচারের জন্য একটি circle তৈরি করা হয়েছে এবং সেটিকে ক্যানভাসে আঁকা হয়েছে।

GeoJSON পলিগন ডেটা ভিজ্যুয়ালাইজ করা

GeoJSON ফাইলের মধ্যে Polygon ফিচার থাকলে, d3.geoPath() ব্যবহার করে এটি SVG পাথ হিসেবে আঁকা যায়।

d3.json(geojsonUrl).then(function(data) {
  const projection = d3.geoMercator().scale(1000).translate([400, 300]);
  const path = d3.geoPath().projection(projection);

  svg.selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", "lightblue")
    .style("stroke", "black")
    .style("stroke-width", 1);
});

এখানে:

d3.geoPath() ব্যবহার করা হয়েছে পলিগন ডেটা পাথ হিসেবে আঁকার জন্য।
Polygon ফিচারের জন্য path এলিমেন্ট ব্যবহার করা হয়েছে।

GeoJSON লাইন ডেটা ভিজ্যুয়ালাইজ করা

GeoJSON ফাইলের LineString ডেটা ভিজ্যুয়ালাইজ করার জন্য, আমরা path এলিমেন্ট ব্যবহার করতে পারি, যেখানে লাইনটি ক্যানভাসে আঁকা হবে।

d3.json(geojsonUrl).then(function(data) {
  const projection = d3.geoMercator().scale(1000).translate([400, 300]);
  const path = d3.geoPath().projection(projection);

  svg.selectAll("path")
    .data(data.features)
    .enter().append("path")
    .attr("d", path)
    .style("fill", "none")
    .style("stroke", "red")
    .style("stroke-width", 2);
});

এখানে, LineString ফিচারের জন্য লাইন রেড রঙে আঁকা হয়েছে।

৪. বাউন্ডিং বক্স এবং লেয়াউট কাস্টমাইজেশন

GeoJSON ডেটার সঠিক লেআউটের জন্য, আপনার projection এবং scale কাস্টমাইজ করতে হতে পারে। সাধারণত, d3.geoMercator() ব্যবহার করে সঠিক স্কেল এবং স্থানাঙ্ক সমন্বয় করা হয়।

const projection = d3.geoMercator()
  .scale(500)    // স্কেল কাস্টমাইজ করা
  .center([longitude, latitude]) // কেন্দ্র নির্ধারণ
  .translate([width / 2, height / 2]); // ক্যানভাসে স্থানাঙ্ক

এখানে, আপনি center() এবং scale() কাস্টমাইজ করে মানচিত্রের প্রদর্শন পছন্দমত সমন্বয় করতে পারবেন।

D3.js দিয়ে GeoJSON ফাইল থেকে ডেটা লোড এবং তা ভিজ্যুয়ালাইজ করা একটি শক্তিশালী উপায়। এটি আপনাকে ভৌগলিক ডেটা (যেমন পয়েন্ট, লাইন, পলিগন) প্রদর্শন করতে সহায়তা করে। D3.js এর projection ফাংশন ব্যবহার করে আপনি জিওস্প্যাশিয়াল ডেটাকে আপনার SVG ক্যানভাসে মানচিত্রিত (map) করতে পারেন। GeoJSON ফাইলের সাহায্যে আপনি পৃথিবীর বিভিন্ন জায়গার তথ্য ইন্টারঅ্যাকটিভ এবং ভিজ্যুয়ালি উপস্থাপন করতে পারবেন।

Content added By

Azizar Rahman Aziz

World Map তৈরি এবং Custom Map Styling

257

D3.js ব্যবহার করে বিশ্ব মানচিত্র (World Map) তৈরি করা এবং সেই মানচিত্রের কাস্টম স্টাইলিং করা খুবই শক্তিশালী এবং কাস্টমাইজেবল। D3.js-এ GeoJSON ফরম্যাট ব্যবহার করে মানচিত্রের তথ্য লোড করা হয় এবং এর মাধ্যমে বিশ্ব মানচিত্রের বিভিন্ন অঞ্চলের সীমানা, আকার এবং অন্যান্য বৈশিষ্ট্য প্রদর্শন করা যায়। এছাড়া, মানচিত্রের বিভিন্ন অংশে কাস্টম স্টাইল প্রয়োগ করা যায় যেমন রঙ, বর্ডার, সীমানা ইত্যাদি।

১. World Map তৈরি করা

D3.js-এ একটি সাধারণ বিশ্ব মানচিত্র তৈরি করতে প্রথমে আপনাকে GeoJSON ফাইল বা D3 এর মধ্যে অন্তর্নির্মিত বিশ্ব মানচিত্র ব্যবহার করতে হবে। সাধারণত, D3.js এর d3.geoNaturalEarth1() বা d3.geoMercator() মত বিভিন্ন ভিউপোর্ট ব্যবহার করে মানচিত্রের অবস্থান সেট করা হয়।

উদাহরণ: Basic World Map তৈরি

// SVG তৈরি
const width = 960, height = 600;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

// প্রজেকশন (Projection)
const projection = d3.geoNaturalEarth1().scale(200).translate([width / 2, height / 2]);

// পাথ জেনারেটর (Path Generator)
const path = d3.geoPath().projection(projection);

// GeoJSON ডেটা লোড
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then(function(data) {

  // মানচিত্রের প্রতিটি দেশের জন্য পাথ আঁকা
  svg.selectAll("path")
     .data(data.features)
     .enter().append("path")
     .attr("d", path)
     .style("fill", "#69b3a2")
     .style("stroke", "#ffffff")
     .style("stroke-width", 0.5);
});

ব্যাখ্যা:

d3.geoNaturalEarth1(): এটি একটি প্রজেকশন ব্যবহৃত হয়, যা পৃথিবীর মানচিত্রকে একটি গোলাকারভাবে উপস্থাপন করে।
d3.geoPath(): এটি একটি পাথ জেনারেটর যা GeoJSON ডেটাকে SVG পাথের মধ্যে রূপান্তরিত করে।
d3.json(): এটি GeoJSON ফাইল থেকে ডেটা লোড করে এবং মানচিত্র আঁকার জন্য ব্যবহার করে।

২. Custom Map Styling

D3.js-এ মানচিত্রের বিভিন্ন অংশে কাস্টম স্টাইল প্রয়োগ করা যায়। এর মাধ্যমে আপনি মানচিত্রের বিভিন্ন অঞ্চলের রঙ, বর্ডার, ইন্টারঅ্যাকটিভ ফিচার ইত্যাদি কাস্টমাইজ করতে পারেন।

উদাহরণ: Custom Color এবং Hover Effect

// SVG তৈরি
const width = 960, height = 600;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

// প্রজেকশন (Projection)
const projection = d3.geoNaturalEarth1().scale(200).translate([width / 2, height / 2]);

// পাথ জেনারেটর (Path Generator)
const path = d3.geoPath().projection(projection);

// GeoJSON ডেটা লোড
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then(function(data) {

  // মানচিত্রের প্রতিটি দেশের জন্য পাথ আঁকা
  svg.selectAll("path")
     .data(data.features)
     .enter().append("path")
     .attr("d", path)
     .style("fill", "#69b3a2")
     .style("stroke", "#ffffff")
     .style("stroke-width", 0.5)
     .on("mouseover", function(event, d) {
       d3.select(this).style("fill", "#ff6347");  // হোভার ইফেক্ট
     })
     .on("mouseout", function(event, d) {
       d3.select(this).style("fill", "#69b3a2");  // হোভার পর স্টাইল পুনরায়
     });
});

ব্যাখ্যা:

on("mouseover") এবং on("mouseout"): এই ইভেন্ট হ্যান্ডলারগুলো ব্যবহার করে হোভার (mouse hover) ইফেক্ট যোগ করা হয়েছে, যাতে ব্যবহারকারী যখন কোন দেশের উপর কার্সার রাখে তখন সেই দেশের রঙ পরিবর্তিত হয়।
style("fill", "#ff6347"): এটি দেশের রঙ পরিবর্তন করার জন্য ব্যবহৃত হয় (এখানে টমেটো রঙের হোভার ইফেক্ট দেওয়া হয়েছে)।

৩. Custom Map with Data (Interactive Map)

D3.js-এ আরও উন্নত কাস্টম মানচিত্র তৈরি করার জন্য আপনি ডেটা বাইন্ডিং ব্যবহার করতে পারেন। যেমন, আপনি একটি দেশের জনসংখ্যা, আয়তন বা অন্য কোন পরিসংখ্যানের উপর ভিত্তি করে দেশের রঙ পরিবর্তন করতে পারেন।

উদাহরণ: Population-based Color Customization

// SVG তৈরি
const width = 960, height = 600;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

// প্রজেকশন (Projection)
const projection = d3.geoNaturalEarth1().scale(200).translate([width / 2, height / 2]);

// পাথ জেনারেটর (Path Generator)
const path = d3.geoPath().projection(projection);

// GeoJSON ডেটা এবং জনসংখ্যার তথ্য লোড
Promise.all([
  d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
  d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/population.csv")
]).then(function(files) {
  const geoData = files[0];
  const populationData = files[1];

  // জনসংখ্যা ডেটাকে দেশগুলির সাথে একত্রিত করা
  const populationByCountry = {};
  populationData.forEach(d => {
    populationByCountry[d.Country] = +d.Population;
  });

  // মানচিত্রের প্রতিটি দেশের জন্য পাথ আঁকা
  svg.selectAll("path")
     .data(geoData.features)
     .enter().append("path")
     .attr("d", path)
     .style("fill", function(d) {
       const population = populationByCountry[d.properties.name];
       return population ? colorScale(population) : "#ccc"; // জনসংখ্যার উপর ভিত্তি করে রঙ পরিবর্তন
     })
     .style("stroke", "#ffffff")
     .style("stroke-width", 0.5);
});

// রঙ স্কেল তৈরি করা
const colorScale = d3.scaleQuantize()
                    .domain([0, 1400000000]) // সর্বাধিক জনসংখ্যার পরিমাণ
                    .range(d3.schemeBlues[9]);

ব্যাখ্যা:

d3.scaleQuantize(): এটি একটি রঙ স্কেল তৈরি করে, যা একটি ডেটা রেঞ্জের জন্য নির্দিষ্ট রঙ অ্যাসাইন করে।
populationByCountry: একটি অবজেক্ট যা প্রতিটি দেশের জনসংখ্যার মান সংরক্ষণ করে এবং GeoJSON ডেটার সাথে একত্রিত করা হয়।
colorScale(): এই ফাংশনটি দেশের জনসংখ্যার মানের উপর ভিত্তি করে রঙ নির্বাচন করে।

৪. Kustom Projection এবং Zoom

D3.js-এ zoom ফিচার যোগ করা খুব সহজ। আপনি মানচিত্রে জুম ইন/আউট করতে পারবেন এবং এটি ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য একটি শক্তিশালী পদ্ধতি।

উদাহরণ: Zoomable World Map

// SVG তৈরি
const width = 960, height = 600;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

// প্রজেকশন (Projection)
const projection = d3.geoMercator().scale(150).translate([width / 2, height / 2]);

// পাথ জেনারেটর (Path Generator)
const path = d3.geoPath().projection(projection);

// Zoom ফাংশন
const zoom = d3.zoom()
               .scaleExtent([1, 8])  // জুম আউট এবং জুম ইন সীমা
               .on("zoom", zoomed);

svg.call(zoom);

// GeoJSON ডেটা লোড
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then(function(data) {

  // মানচিত্রের প্রতিটি দেশের জন্য পাথ আঁকা
  svg.selectAll("path")
     .data(data.features)
     .enter().append("path")
     .attr("d", path)
     .style("fill", "#69b3a2")
     .style("stroke", "#ffffff")
     .style("stroke-width", 0.5);
});

// Zoom ইভেন্ট হ্যান্ডলার
function zoomed(event) {
  svg.selectAll("path")
     .attr("transform", event.transform);
}

ব্যাখ্যা:

d3.zoom(): এটি জুম ইন এবং আউট ফিচার যোগ করতে ব্যবহৃত হয়, যা মানচিত্রের স্কেল এবং প্যান সমন্বয় করে।
scaleExtent([1, 8]): এই সেটিংটি জুম করার জন্য সর্বনিম্ন এবং সর্বাধিক স্কেল নির্ধারণ করে।

D3.js-এ World Map তৈরি এবং Custom Map Styling করার জন্য GeoJSON ডেটা এবং D3 এর জেনারেটর ব্যবহার করা হয়। আপনি মানচিত্রে বিভিন্ন রঙ, স্টাইল এবং ইন্টারঅ্যাকটিভ ফিচার যোগ করতে পারেন, যেমন Zoom, Hover Effects, এবং Data-driven Coloring। D3.js একটি অত্যন্ত ফ্লেক্সিবল টুল, যা ব্যবহারকারীর ইন্টারঅ্যাকশন এবং কাস্টম ডেটার উপর ভিত্তি করে মানচিত্র তৈরি ও কাস্টমাইজ করতে সাহায্য করে।

Content added By

Azizar Rahman Aziz

D3 এর মাধ্যমে Map Projections এবং Path Generators

227

D3.js দিয়ে Map Projections এবং Path Generators ব্যবহার করে আপনি পৃথিবীর মানচিত্র বা অন্যান্য জ্যামিতিক পাথ সহজে তৈরি করতে পারেন। D3.js এর Geo মডিউল আপনাকে ভূগোলিক ডেটা ম্যানিপুলেট এবং রেন্ডার করার জন্য একটি শক্তিশালী সেট অফ টুলস প্রদান করে।

১. Map Projections কি?

Map Projections হলো এমন একটি প্রযুক্তি যা পৃথিবীর গোলাকার বা ত্রিমাত্রিক অবয়বকে একটি সমতলে (২D প্লেনে) রূপান্তরিত করে। এটি একটি গাণিতিক পদ্ধতি যা পৃষ্ঠের প্রতিটি পয়েন্টের অবস্থান একটি নির্দিষ্ট সমতল পৃষ্ঠে স্থানান্তরিত করতে ব্যবহার করা হয়। D3.js বিভিন্ন ধরনের map projections সমর্থন করে, যা আপনি বিভিন্ন মানচিত্রের জন্য ব্যবহার করতে পারেন।

প্রধান Map Projections Types:

Mercator Projection: একে একটি কম্প্যাক্ট এবং সহজভাবে উপলব্ধ মানচিত্রের প্রক্ষেপণ বলা হয়। এটি পৃথিবীকে একটি সমতল পৃষ্ঠে স্থানান্তর করে, তবে এটি পৃথিবীর আকারের বিকৃতি ঘটায়, বিশেষত দুই মেরুর কাছে।
Albers Equal Area Conic: এটি একটি আঞ্চলিক মানচিত্রের জন্য উপযুক্ত, যেখানে প্রক্ষেপণটি অঞ্চলের আকার ঠিক রাখে।
Orthographic Projection: পৃথিবী বা অন্য কোনো গ্রহের আংশিক দৃশ্য প্রদর্শনের জন্য ব্যবহৃত হয়, সাধারণত গ্রীনল্যান্ড বা অ্যান্টার্কটিকা।
Azimuthal Projection: পৃথিবীর যে কোনও পয়েন্ট থেকে কেন্দ্রিক মানচিত্র তৈরি করে, এটি সাধারণত বায়ু বা পানির পথ নির্ধারণের জন্য ব্যবহৃত হয়।

২. Path Generators

D3.js-এ path generators এমন ফাংশন যা আপনাকে জ্যামিতিক আকার, রেখা বা পলিগন তৈরি করতে সাহায্য করে। Geo Path Generator-এর মাধ্যমে আপনি GeoJSON ডেটাকে সঠিকভাবে প্রক্ষেপিত মানচিত্রে রূপান্তর করতে পারেন।

D3.js-এ path generators ভূগোলিক পাথের জন্য বিশেষভাবে তৈরি করা হয়। d3.geoPath() ফাংশনটি GeoJSON ডেটার উপর প্রক্ষেপণ প্রক্রিয়া প্রয়োগ করে পাথ তৈরি করতে ব্যবহৃত হয়।

৩. D3.js দিয়ে Map Projections এবং Path Generators ব্যবহার করা

এখন, D3.js-এ Map Projection এবং Path Generator কিভাবে ব্যবহার করবেন, তা দেখে নিন।

উদাহরণ: Mercator Projection ব্যবহার করে মানচিত্র তৈরি

// GeoJSON ডেটা লোড করা (এটি আপনার নিজের ডেটা বা API থেকেও আসতে পারে)
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then(function(geoData) {
    
    // SVG এলিমেন্ট তৈরি করা
    const width = 800, height = 600;
    const svg = d3.select("body").append("svg")
                  .attr("width", width)
                  .attr("height", height);
    
    // Mercator Projection ব্যবহার করা
    const projection = d3.geoMercator()
                         .scale(150)  // স্কেল সেট করা
                         .translate([width / 2, height / 2]);  // মানচিত্র কেন্দ্রীভূত করা
    
    // GeoPath Generator তৈরি করা
    const path = d3.geoPath().projection(projection);
    
    // মানচিত্রের শীর্ষের স্টাইল নির্ধারণ করা
    svg.selectAll("path")
       .data(geoData.features)
       .enter()
       .append("path")
       .attr("d", path)
       .attr("fill", "#74b9ff")
       .attr("stroke", "white")
       .attr("stroke-width", 0.5);
});

এখানে:

d3.geoMercator() মেথডটি Mercator Projection তৈরি করে।
d3.geoPath() ব্যবহার করে GeoJSON ডেটাকে রেন্ডার করা হয়, যার মধ্যে projection() পদ্ধতিটি প্রক্ষেপণ প্রয়োগ করে।

উদাহরণ: Albers Equal Area Conic Projection ব্যবহার করা

// GeoJSON ডেটা লোড করা
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then(function(geoData) {
    
    // SVG এলিমেন্ট তৈরি করা
    const width = 800, height = 600;
    const svg = d3.select("body").append("svg")
                  .attr("width", width)
                  .attr("height", height);
    
    // Albers Equal Area Conic Projection ব্যবহার করা
    const projection = d3.geoAlbersUsa()
                         .scale(1000)
                         .translate([width / 2, height / 2]);
    
    // GeoPath Generator তৈরি করা
    const path = d3.geoPath().projection(projection);
    
    // মানচিত্রের শীর্ষের স্টাইল নির্ধারণ করা
    svg.selectAll("path")
       .data(geoData.features)
       .enter()
       .append("path")
       .attr("d", path)
       .attr("fill", "#dff9fb")
       .attr("stroke", "#2d3436")
       .attr("stroke-width", 0.5);
});

এখানে:

d3.geoAlbersUsa() একটি Albers Equal Area Conic Projection তৈরি করে, যা সাধারণত যুক্তরাষ্ট্রের মানচিত্রের জন্য ব্যবহৃত হয়।
d3.geoPath() এর মাধ্যমে এই প্রক্ষেপণ প্রক্রিয়ায় মানচিত্র রেন্ডার করা হয়।

৪. Path Generator (GeoPath) ফাংশন

D3.js-এ d3.geoPath() ফাংশনটি GeoJSON ডেটা রেন্ডার করার জন্য ব্যবহৃত হয়। এটি GeoJSON ডেটাকে নির্দিষ্ট প্রক্ষেপণের সাথে মিলিয়ে রেন্ডার করতে সাহায্য করে।

উদাহরণ: Path Generator ব্যবহার করে পাথ তৈরি করা

// GeoJSON ডেটা
const data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "name": "Dinagat Islands"
      }
    }
  ]
};

// SVG তৈরি করা
const width = 500, height = 500;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

// Projection সেট করা
const projection = d3.geoMercator().scale(100).translate([width / 2, height / 2]);

// Path Generator তৈরি করা
const path = d3.geoPath().projection(projection);

// পাথ রেন্ডার করা
svg.selectAll("path")
   .data(data.features)
   .enter()
   .append("path")
   .attr("d", path)
   .attr("fill", "red")
   .attr("stroke", "black")
   .attr("stroke-width", 2);

এখানে:

d3.geoPath() ব্যবহার করে Point টাইপের GeoJSON ডেটাকে রেন্ডার করা হয়েছে।
d3.geoMercator() ব্যবহার করে প্রক্ষেপণ ঠিক করা হয়েছে।

D3.js-এর মাধ্যমে Map Projections এবং Path Generators ব্যবহার করে আপনি পৃথিবী বা অন্যান্য ভৌগলিক স্থানগুলির মানচিত্র তৈরি করতে পারেন। D3.js-এর বিভিন্ন প্রক্ষেপণ এবং GeoPath generator এর সাহায্যে আপনি আপনার প্রয়োজন অনুযায়ী মানচিত্র তৈরি করতে পারেন, যা ডেটা ভিজ্যুয়ালাইজেশনে অত্যন্ত সহায়ক।

Content added By

Azizar Rahman Aziz

D3.js পরিচিতি D3.js সেটআপ এবং ইনস্টলেশন সিলেকশন এবং ডেটা বাইন্ডিং SVG এলিমেন্ট তৈরি এবং ম্যানিপুলেশন ডেটা স্কেল এবং এক্সেস ফাংশন

D3.js এর সাথে Map এবং Geo Visualization

১. GeoJSON ডেটার সাথে কাজ

২. D3.js এ Map তৈরির জন্য প্রয়োজনীয় টুলস

৩. ম্যাপ তৈরি করা: D3.js এর সাথে GeoJSON এবং Map Visualization

৪. Interactivity: ম্যাপে ইনফোডিসপ্লে যোগ করা

উদাহরণ: ম্যাপের উপর হোভার ইফেক্ট

৫. Geo Visualization এ Projection ব্যবহার

D3 Geo মডিউল ব্যবহার

১. D3 Geo মডিউলের উপাদান

২. D3 Geo দিয়ে মানচিত্র তৈরি করা

৩. D3 Geo মডিউলের ব্যবহার: উদাহরণ

উদাহরণ: GeoJSON ডেটা দিয়ে মানচিত্র তৈরি

ব্যাখ্যা:

৪. D3 Geo: Graticule এবং Projection

উদাহরণ: Graticule এবং Projection ব্যবহার করা

ব্যাখ্যা:

৫. D3 Geo: Interactivity

উদাহরণ: ইন্টারঅ্যাকটিভ মানচিত্র

ব্যাখ্যা:

GeoJSON ফাইল থেকে Data লোড করা

১. GeoJSON ফাইলের ধারণা

২. GeoJSON ফাইল লোড করা

D3.js দিয়ে GeoJSON লোড এবং প্রাথমিক সেটআপ

৩. GeoJSON ফিচার প্রদর্শন করা

GeoJSON পয়েন্ট ডেটা ভিজ্যুয়ালাইজ করা

GeoJSON পলিগন ডেটা ভিজ্যুয়ালাইজ করা

GeoJSON লাইন ডেটা ভিজ্যুয়ালাইজ করা

৪. বাউন্ডিং বক্স এবং লেয়াউট কাস্টমাইজেশন

World Map তৈরি এবং Custom Map Styling

১. World Map তৈরি করা

উদাহরণ: Basic World Map তৈরি

ব্যাখ্যা:

২. Custom Map Styling

উদাহরণ: Custom Color এবং Hover Effect

ব্যাখ্যা:

৩. Custom Map with Data (Interactive Map)

উদাহরণ: Population-based Color Customization

ব্যাখ্যা:

৪. Kustom Projection এবং Zoom

উদাহরণ: Zoomable World Map

ব্যাখ্যা:

D3 এর মাধ্যমে Map Projections এবং Path Generators

১. Map Projections কি?

প্রধান Map Projections Types:

২. Path Generators

৩. D3.js দিয়ে Map Projections এবং Path Generators ব্যবহার করা

উদাহরণ: Mercator Projection ব্যবহার করে মানচিত্র তৈরি

উদাহরণ: Albers Equal Area Conic Projection ব্যবহার করা

৪. Path Generator (GeoPath) ফাংশন

উদাহরণ: Path Generator ব্যবহার করে পাথ তৈরি করা

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!