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-এর এই মডিউলটি জিওগ্রাফিক্যাল ডেটা বিশ্লেষণ এবং প্রেজেন্টেশনের জন্য খুবই উপযোগী।
Read more
