ডেনড্রোগ্রাম হল একটি গ্রাফিক্যাল উপস্থাপনা যা হায়ারার্কিক্যাল ডেটা বা শ্রেণীবদ্ধ ডেটার সম্পর্ক প্রদর্শন করে। এটি সাধারণত গাছের আকৃতিতে চিত্রিত হয়, যেখানে প্রতিটি শাখা একটি সম্পর্ক বা শ্রেণীকে বোঝায় এবং শাখাগুলির মধ্যবর্তী সংযোগগুলি তাদের মধ্যে সম্পর্ক বা হায়ারার্কির স্তর নির্দেশ করে। D3.js ব্যবহার করে আপনি সহজেই ডেটা ভিজ্যুয়ালাইজেশনে ডেনড্রোগ্রাম তৈরি করতে পারেন।
১. ডেনড্রোগ্রাম কী?
ডেনড্রোগ্রাম হল একটি গাছ আকৃতির ভিজ্যুয়াল যা ডেটার হায়ারার্কিক্যাল সম্পর্ক (যেমন, শ্রেণীবিভাগ, পারিবারিক গাছ, বা উত্সের সম্পর্ক) প্রদর্শন করে। এটি মূলত একটি গাছের মতো দেখায়, যেখানে মূল শাখা (root) থেকে শুরু করে বিভিন্ন স্তরের শাখায় ডেটা প্রদর্শিত হয়।
ডেনড্রোগ্রামের মধ্যে সাধারণত দুটি প্রধান উপাদান থাকে:
- নোড (Node): ডেটার প্রতিটি ইউনিট বা উপাদান।
- এজ (Edge): নোডগুলির মধ্যে সম্পর্ক বা সংযোগ।
২. D3.js-এ ডেনড্রোগ্রাম তৈরির জন্য পদক্ষেপ
D3.js ব্যবহার করে ডেনড্রোগ্রাম তৈরি করার জন্য আপনাকে কয়েকটি স্টেপ অনুসরণ করতে হবে:
- ডেটা প্রস্তুতি: ডেটাকে একটি হায়ারার্কিক্যাল ফরম্যাটে (যেমন, JSON বা JavaScript অবজেক্ট) রাখতে হবে।
- D3.js হায়ারার্কি তৈরি করা:
d3.hierarchy()ফাংশন ব্যবহার করে ডেটাকে হায়ারার্কিতে রূপান্তর করতে হবে। - ট্রি লেআউট তৈরি করা:
d3.tree()অথবাd3.cluster()ব্যবহার করে ডেটার ট্রি স্ট্রাকচার তৈরি করতে হবে। - নোড এবং এজ উপস্থাপন: ডেটার নোড এবং এজ গুলি SVG এর মাধ্যমে আঁকতে হবে।
৩. ডেনড্রোগ্রাম তৈরি করার উদাহরণ
নিচে একটি সাধারণ ডেনড্রোগ্রাম তৈরি করার উদাহরণ দেওয়া হলো, যেখানে d3.hierarchy() এবং d3.tree() ব্যবহার করা হয়েছে।
উদাহরণ: একটি সহজ ডেনড্রোগ্রাম
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Dendrogram Example</title>
<style>
.node circle {
fill: #69b3a2;
stroke: #fff;
stroke-width: 1.5px;
}
.node text {
font-size: 12px;
text-anchor: middle;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="500" height="500"></svg>
<script>
// ডেটা (হায়ারার্কিক্যাল ফরম্যাট)
const data = {
"name": "Root",
"children": [
{
"name": "Child 1",
"children": [
{ "name": "Grandchild 1.1" },
{ "name": "Grandchild 1.2" }
]
},
{
"name": "Child 2",
"children": [
{ "name": "Grandchild 2.1" }
]
}
]
};
// SVG এলিমেন্ট তৈরি
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// ট্রী লেআউট
const treeLayout = d3.tree().size([height, width - 160]);
// ডেটাকে হায়ারার্কি ফরম্যাটে রূপান্তর করা
const root = d3.hierarchy(data);
// ট্রী লেআউট প্রয়োগ
treeLayout(root);
// লিংক তৈরি (এজ)
svg.selectAll(".link")
.data(root.links())
.enter()
.append("path")
.attr("class", "link")
.attr("d", d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x)
);
// নোড তৈরি
const node = svg.selectAll(".node")
.data(root.descendants())
.enter()
.append("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y},${d.x})`);
// নোডে সিলিন্ডার (circle) তৈরি
node.append("circle")
.attr("r", 10);
// নোডে টেক্সট তৈরি
node.append("text")
.attr("dy", -15)
.attr("x", 0)
.text(d => d.data.name);
</script>
</body>
</html>
ব্যাখ্যা:
- ডেটা: একটি হায়ারার্কিক্যাল JSON অবজেক্ট যা ডেনড্রোগ্রামের নোড এবং শাখাগুলির তথ্য ধারণ করে।
- d3.hierarchy(): এই ফাংশনটি ডেটাকে হায়ারার্কি (গাছ) আকারে রূপান্তর করে।
- d3.tree(): গাছের কাঠামো তৈরি করে এবং ডেটার মধ্যে সম্পর্ককে দৃশ্যমান করে।
- লিংক (path): শাখার মধ্যে সংযোগ বা সম্পর্ক তৈরি করা হয়েছে।
- নোড (circle): প্রতিটি নোডে একটি সিলিন্ডার (circle) তৈরি করা হয়েছে।
৪. ডেনড্রোগ্রাম কাস্টমাইজেশন
আপনি ডেনড্রোগ্রামের বিভিন্ন অংশ কাস্টমাইজ করতে পারেন যেমন:
- রঙ: নোডের রঙ বা লিংক-এর রঙ পরিবর্তন করা।
- আকার: নোডের আকার এবং শাখার প্রস্থ পরিবর্তন করা।
- স্টাইল: টেক্সটের আকার, ফন্ট, অবস্থান ইত্যাদি কাস্টমাইজ করা।
উদাহরণ: রঙ কাস্টমাইজেশন
node.append("circle")
.attr("r", 10)
.style("fill", d => d.children ? "#ff6347" : "#32cd32"); // parents red, leaves green
৫. হায়ারার্কিক্যাল ডেটা ভিজ্যুয়ালাইজেশন
হায়ারার্কিক্যাল ডেটা ভিজ্যুয়ালাইজেশন হল এমন একটি প্রক্রিয়া যেখানে ডেটার শ্রেণীবদ্ধ তথ্য বা স্তরভিত্তিক সম্পর্ককে গ্রাফিক্যাল আকারে উপস্থাপন করা হয়। ডেনড্রোগ্রাম এই ধরনের ভিজ্যুয়ালাইজেশনের একটি গুরুত্বপূর্ণ অংশ। এর মধ্যে tree এবং cluster লেআউট ব্যবহার করা হয়, যা ডেটার স্তর এবং সম্পর্কের মধ্যে পার্থক্য দেখাতে সাহায্য করে।
D3.js-এ cluster layout এবং tree layout এর মধ্যে পার্থক্য:
- Tree layout সাধারণত একটি একক গাছের মতো সাজানো হয়, যেখানে মূল নোড থেকে শাখাগুলোর বিস্তার ঘটে।
- Cluster layout ডেটাকে একটি ক্লাস্টারের মধ্যে গ্রুপ করে, যা হায়ারার্কির স্তরের উপর ভিত্তি করে সাজানো হয়।
D3.js ব্যবহার করে ডেনড্রোগ্রাম এবং হায়ারার্কিক্যাল ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা খুবই সহজ। d3.hierarchy() এবং d3.tree() ফাংশন ব্যবহার করে আপনি ডেটার গাছের কাঠামো তৈরি করতে পারেন এবং এটি বিভিন্ন স্টাইল এবং কাস্টমাইজেশন দ্বারা আরও আকর্ষণীয় করতে পারেন। ডেনড্রোগ্রাম মূলত ডেটার সম্পর্ক এবং হায়ারার্কি প্রদর্শন করতে ব্যবহৃত হয়, যা গবেষণা, বিশ্লেষণ এবং ডেটা সংগঠনকে সহজ করে তোলে।
Read more
