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 ফাইলের সাহায্যে আপনি পৃথিবীর বিভিন্ন জায়গার তথ্য ইন্টারঅ্যাকটিভ এবং ভিজ্যুয়ালি উপস্থাপন করতে পারবেন।
Read more
