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
ব্যাখ্যা:
d3.zoom(): এটি জুম ইন এবং আউট ফিচার যোগ করতে ব্যবহৃত হয়, যা মানচিত্রের স্কেল এবং প্যান সমন্বয় করে।scaleExtent([1, 8]): এই সেটিংটি জুম করার জন্য সর্বনিম্ন এবং সর্বাধিক স্কেল নির্ধারণ করে।
D3.js-এ World Map তৈরি এবং Custom Map Styling করার জন্য GeoJSON ডেটা এবং D3 এর জেনারেটর ব্যবহার করা হয়। আপনি মানচিত্রে বিভিন্ন রঙ, স্টাইল এবং ইন্টারঅ্যাকটিভ ফিচার যোগ করতে পারেন, যেমন Zoom, Hover Effects, এবং Data-driven Coloring। D3.js একটি অত্যন্ত ফ্লেক্সিবল টুল, যা ব্যবহারকারীর ইন্টারঅ্যাকশন এবং কাস্টম ডেটার উপর ভিত্তি করে মানচিত্র তৈরি ও কাস্টমাইজ করতে সাহায্য করে।
Read more
