Choropleth Map এমন একটি ধরনের মানচিত্র যেখানে ভূগোলগত অঞ্চলের উপর ভিন্ন ভিন্ন রঙ বা শেড ব্যবহার করে ডেটার পার্থক্য প্রদর্শন করা হয়। D3.js ব্যবহার করে Choropleth Map তৈরি করা যেতে পারে যা বিভিন্ন রঙে অঞ্চলগুলোর মান বা পরিসংখ্যান তুলে ধরে। GeoJSON হলো একটি জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন ফর্ম্যাট যা ভৌগোলিক তথ্য স্টোর এবং এক্সচেঞ্জ করার জন্য ব্যবহৃত হয়।
D3.js এর মাধ্যমে GeoJSON ফাইল ব্যবহার করে Choropleth Map তৈরি করা একটি সাধারণ প্রক্রিয়া যা নিম্নলিখিত পর্যায়ে ভাগ করা যেতে পারে:
১. GeoJSON ফাইল এবং D3.js এর প্রস্তুতি
GeoJSON ফাইল একটি ভূগোলগত ডেটা ফাইল যা বিভিন্ন ভৌগোলিক অঞ্চল, যেমন দেশ, রাজ্য বা শহরের সীমানা নির্ধারণ করে। এর মাধ্যমে সেগুলির মধ্যে কোন বিশেষ পরিসংখ্যানের (যেমন জনসংখ্যা, আয়, স্বাস্থ্য) মান ম্যাপ করা যেতে পারে।
১.১ GeoJSON ডেটার উদাহরণ
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Bangladesh",
"value": 40
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[90.0, 23.0],
[92.0, 23.0],
[92.0, 25.0],
[90.0, 25.0],
[90.0, 23.0]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "India",
"value": 60
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[90.5, 23.5],
[92.5, 23.5],
[92.5, 25.5],
[90.5, 25.5],
[90.5, 23.5]
]
]
}
}
]
}
এই ফাইলটিতে দুটি দেশ (বাংলাদেশ এবং ভারত) এবং তাদের মধ্যে একটি value প্রপার্টি রয়েছে, যা প্রতিটি অঞ্চলের জন্য ডেটা মানের প্রতিনিধিত্ব করে।
২. D3.js এর মাধ্যমে Choropleth Map তৈরি
Choropleth Map তৈরি করতে হলে কিছু মৌলিক ধাপ অনুসরণ করতে হয়:
- GeoJSON ফাইল লোড: প্রথমে GeoJSON ফাইলটি লোড করা হয়।
- স্কেল তৈরি: ডেটার মান অনুযায়ী স্কেল তৈরি করতে হয়, যেমন রঙের স্কেল।
- ভূগোলগত সীমানার আঁকার জন্য প্রজেকশন (Projection) ব্যবহার: GeoJSON ফাইলের সীমানাগুলো সঠিকভাবে মানচিত্রে দেখানোর জন্য প্রজেকশন ব্যবহার করতে হয়।
- অঞ্চলগুলোর রঙ বা মান সেট করা: GeoJSON ডেটার
valueপ্রপার্টি অনুযায়ী রঙ বা পরিসংখ্যান সেট করা হয়।
৩. উদাহরণ: Choropleth Map তৈরি
এখানে একটি সাধারণ উদাহরণ দেওয়া হলো, যেখানে value প্রপার্টির মাধ্যমে রঙের ভিত্তিতে মানচিত্রে অঞ্চলগুলির পার্থক্য তুলে ধরা হবে।
৩.১ HTML এবং D3.js কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Choropleth Map Example</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
.region {
stroke: #fff;
stroke-width: 1px;
}
</style>
</head>
<body>
<svg width="600" height="400"></svg>
<script>
const width = 600;
const height = 400;
// SVG নির্বাচন
const svg = d3.select("svg");
// প্রজেকশন সেট করা
const projection = d3.geoMercator()
.scale(100) // স্কেল
.center([91, 24]) // সেন্টার পয়েন্ট
.translate([width / 2, height / 2]);
// Path জেনারেটর তৈরি
const path = d3.geoPath().projection(projection);
// রঙের স্কেল তৈরি
const color = d3.scaleSequential(d3.interpolateBlues)
.domain([0, 100]); // ডেটার মানের সীমা
// GeoJSON ডেটা লোড
d3.json('your_geojson_file.json').then(function(data) {
// GeoJSON ফিচার আঁকা
svg.selectAll(".region")
.data(data.features)
.enter()
.append("path")
.attr("class", "region")
.attr("d", path)
.attr("fill", d => color(d.properties.value)) // value অনুযায়ী রঙ
.on("mouseover", function(event, d) {
d3.select(this)
.attr("fill", "orange"); // হোভার ইফেক্ট
})
.on("mouseout", function(event, d) {
d3.select(this)
.attr("fill", d => color(d.properties.value)); // রঙ ফিরিয়ে আনা
});
});
</script>
</body>
</html>
ব্যাখ্যা:
- প্রজেকশন:
d3.geoMercator()ব্যবহার করে আমরা মানচিত্রের সঠিক স্কেল এবং অবস্থান নির্ধারণ করেছি। - GeoJSON ডেটা লোড করা:
d3.json()মেথডের মাধ্যমে GeoJSON ফাইল লোড করা হচ্ছে। - রঙের স্কেল:
d3.scaleSequential(d3.interpolateBlues)ব্যবহার করে একটি রঙের স্কেল তৈরি করা হয়েছে, যাvalueপ্রপার্টির মান অনুযায়ী রঙ নির্ধারণ করবে। - Path Generator:
d3.geoPath()ব্যবহার করে GeoJSON ফিচারগুলিকে SVG পাথের আকারে রেন্ডার করা হয়েছে।
৪. GeoJSON ডেটার সাথে ইন্টারঅ্যাকশন
Choropleth Map এ ইন্টারঅ্যাকশন (যেমন মাউসওভার বা ক্লিক) যোগ করা যেতে পারে, যাতে ইউজার আরও তথ্য পেতে পারেন বা আঞ্চলিক মান দেখতে পারেন।
৪.১ মাউসওভার ইফেক্ট এবং টুলটিপ
svg.selectAll(".region")
.data(data.features)
.enter()
.append("path")
.attr("class", "region")
.attr("d", path)
.attr("fill", d => color(d.properties.value))
.on("mouseover", function(event, d) {
const tooltip = svg.append("text")
.attr("x", event.pageX + 10)
.attr("y", event.pageY - 10)
.attr("font-size", "14px")
.attr("fill", "black")
.text(d.properties.name + ": " + d.properties.value);
})
.on("mouseout", function() {
svg.select("text").remove(); // টুলটিপ মুছে ফেলা
});
ব্যাখ্যা:
- মাউসওভার: যখন ইউজার কোনও অঞ্চলকে মাউসওভার করবেন, তখন একটি টুলটিপ দেখানো হবে যা
nameএবংvalueপ্রপার্টি দেখাবে। - mouseout: মাউস আউট করার পর টুলটিপ সরিয়ে ফেলা হবে।
D3.js ব্যবহার করে Choropleth Map তৈরি করা সম্ভব যা GeoJSON ফাইলের মাধ্যমে অঞ্চলগুলির উপর ডেটা ম্যাপিং করে। বিভিন্ন ডেটা মান অনুযায়ী রঙের পরিবর্তন, ইন্টারঅ্যাকশন এবং টুলটিপ সহ উন্নত ভিজ্যুয়ালাইজেশন তৈরি করা যায়। GeoJSON ফাইল ব্যবহারের মাধ্যমে আপনার মানচিত্রে ডেটার পরিবর্তন, উন্নতি এবং স্কেলিং সহজ হয়ে যায়, যা আপনার ভিজ্যুয়ালাইজেশনকে আরও কার্যকর এবং ইন্টারঅ্যাকটিভ করে তোলে।
Read more
