ডেনড্রোগ্রাম এবং ট্রি ডায়াগ্রাম

ডেনড্রোগ্রাম (Dendrogram) এবং ট্রি ডায়াগ্রাম (Tree Diagram) হল ডেটা ভিজ্যুয়ালাইজেশনের জনপ্রিয় ধরনের, যা বিশেষত হায়ারার্কিক্যাল (পিরামিডাল বা স্তরভিত্তিক) সম্পর্কগুলো প্রদর্শন করতে ব্যবহৃত হয়। D3.js এ এই ধরনের ডায়াগ্রাম তৈরি করতে সহজ এবং কার্যকরী টুলস প্রদান করে, যা ডেটা গঠন ও সম্পর্ককে গ্রাফিক্যালভাবে উপস্থাপন করতে সাহায্য করে।

ডেনড্রোগ্রাম এবং ট্রি ডায়াগ্রাম সাধারণত একে অপরের সাথে সম্পর্কিত, তবে তাদের ব্যবহারিক উদ্দেশ্য এবং চিত্রণ কিছুটা ভিন্ন হতে পারে।

ডেনড্রোগ্রাম (Dendrogram)

ডেনড্রোগ্রাম একটি বিশেষ ধরনের ট্রি ডায়াগ্রাম যা সাধারণত ক্লাস্টারিং ডেটা বা হায়ারার্কিক্যাল স্ট্রাকচার প্রদর্শন করতে ব্যবহৃত হয়। এটি শাখাগুলির মধ্যে সম্পর্ক এবং সংযুক্তি প্রদর্শন করে। ডেনড্রোগ্রাম মূলত বায়োলজিক্যাল শ্রেণীবিভাগ বা অন্যান্য ক্লাস্টার বিশ্লেষণ করতে ব্যবহৃত হয়।

ডেনড্রোগ্রাম সাধারণত বৈশিষ্ট্যগত/বায়োলজিক্যাল শ্রেণীকরণ (যেমন, প্রজাতির সম্পর্ক) বা হায়ারার্কিক্যাল ডেটা (যেমন, ফোল্ডারের স্ট্রাকচার) এর জন্য ব্যবহৃত হয়।

ট্রি ডায়াগ্রাম (Tree Diagram)

ট্রি ডায়াগ্রাম একটি সাধারণ ডেটা স্ট্রাকচার প্রদর্শনের জন্য ব্যবহৃত হয় যেখানে ডেটার মধ্যে সম্পর্ক বা হায়ারার্কি পরিষ্কারভাবে প্রদর্শিত হয়। এটি সাধারণত হায়ারার্কিক্যাল গাছের মতো একটি গঠনকে চিত্রিত করে, যেখানে একক রুট নোড থেকে অন্যান্য নোডে শাখা বিস্তার লাভ করে। ট্রি ডায়াগ্রামগুলো অনেক ধরনের ডেটা (যেমন, ট্যাক্সোনমিক শ্রেণীবিভাগ, ফোল্ডার স্ট্রাকচার, ইনফরমেশন আর্কিটেকচার) প্রদর্শন করতে ব্যবহৃত হয়।

ডেনড্রোগ্রাম এবং ট্রি ডায়াগ্রাম তৈরি করার জন্য D3.js ব্যবহার

D3.js-এ ডেনড্রোগ্রাম এবং ট্রি ডায়াগ্রাম তৈরি করতে d3.tree() এবং d3.cluster() ফাংশন ব্যবহৃত হয়। d3.tree() মেথডটি ট্রি ডায়াগ্রাম তৈরি করার জন্য এবং d3.cluster() মেথডটি ডেনড্রোগ্রাম তৈরি করার জন্য ব্যবহৃত হয়।

ট্রি ডায়াগ্রাম উদাহরণ

ট্রি ডায়াগ্রাম সাধারণত d3.tree() ফাংশন ব্যবহার করে তৈরি করা হয়। নিচে একটি উদাহরণ দেখানো হলো যেখানে একটি ট্রি ডায়াগ্রাম তৈরি করা হচ্ছে।

উদাহরণ: ট্রি ডায়াগ্রাম

// ডেটা স্ট্রাকচার
const treeData = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        { name: "Child 1.1" },
        { name: "Child 1.2" }
      ]
    },
    {
      name: "Child 2",
      children: [
        { name: "Child 2.1" }
      ]
    }
  ]
};

// SVG তৈরি করা
const width = 500;
const height = 300;

const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g")
              .attr("transform", "translate(40, 40)");

// Tree Layout তৈরি করা
const treeLayout = d3.tree()
                     .size([height - 80, width - 160]);

const root = d3.hierarchy(treeData);

// Tree Layout প্রয়োগ করা
treeLayout(root);

// লাইন তৈরি করা
svg.selectAll(".link")
   .data(root.links())
   .enter()
   .append("path")
   .attr("class", "link")
   .attr("d", d3.linkVertical()
                .x(d => d.x)
                .y(d => d.y)
   )
   .attr("fill", "none")
   .attr("stroke", "#ccc")
   .attr("stroke-width", 2);

// নোড তৈরি করা
svg.selectAll(".node")
   .data(root.descendants())
   .enter()
   .append("circle")
   .attr("class", "node")
   .attr("cx", d => d.x)
   .attr("cy", d => d.y)
   .attr("r", 10)
   .attr("fill", "steelblue");

// নোডের নাম প্রদর্শন
svg.selectAll(".text")
   .data(root.descendants())
   .enter()
   .append("text")
   .attr("class", "text")
   .attr("x", d => d.x)
   .attr("y", d => d.y - 15)
   .attr("text-anchor", "middle")
   .text(d => d.data.name);

এখানে:

• d3.tree() ফাংশনটি একটি ট্রি ডায়াগ্রাম তৈরি করতে ব্যবহৃত হয়েছে।
• d3.hierarchy() ডেটাকে একটি হায়ারার্কিক্যাল স্ট্রাকচারে রূপান্তরিত করেছে।
• d3.linkVertical() ব্যবহার করে নোডগুলির মধ্যে সম্পর্ক বা লিঙ্ক তৈরি করা হয়েছে।

ডেনড্রোগ্রাম উদাহরণ

ডেনড্রোগ্রাম তৈরি করতে d3.cluster() ব্যবহার করা হয়। এটি ডেটাকে একটি ক্লাস্টার স্ট্রাকচারে রূপান্তরিত করে এবং তারপর ক্লাস্টারগুলির মধ্যে সম্পর্ক প্রদর্শন করে।

উদাহরণ: ডেনড্রোগ্রাম

// ডেটা স্ট্রাকচার
const clusterData = {
  name: "Root",
  children: [
    {
      name: "Group 1",
      children: [
        { name: "Item 1.1" },
        { name: "Item 1.2" }
      ]
    },
    {
      name: "Group 2",
      children: [
        { name: "Item 2.1" },
        { name: "Item 2.2" }
      ]
    }
  ]
};

// SVG তৈরি করা
const width = 500;
const height = 300;

const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g")
              .attr("transform", "translate(40, 40)");

// Cluster Layout তৈরি করা
const clusterLayout = d3.cluster()
                        .size([height - 80, width - 160]);

const root = d3.hierarchy(clusterData);

// Cluster Layout প্রয়োগ করা
clusterLayout(root);

// লাইন তৈরি করা
svg.selectAll(".link")
   .data(root.links())
   .enter()
   .append("path")
   .attr("class", "link")
   .attr("d", d3.linkVertical()
                .x(d => d.x)
                .y(d => d.y)
   )
   .attr("fill", "none")
   .attr("stroke", "#ccc")
   .attr("stroke-width", 2);

// নোড তৈরি করা
svg.selectAll(".node")
   .data(root.descendants())
   .enter()
   .append("circle")
   .attr("class", "node")
   .attr("cx", d => d.x)
   .attr("cy", d => d.y)
   .attr("r", 10)
   .attr("fill", "lightgreen");

// নোডের নাম প্রদর্শন
svg.selectAll(".text")
   .data(root.descendants())
   .enter()
   .append("text")
   .attr("class", "text")
   .attr("x", d => d.x)
   .attr("y", d => d.y - 15)
   .attr("text-anchor", "middle")
   .text(d => d.data.name);

এখানে:

• d3.cluster() ফাংশনটি ডেটাকে একটি ক্লাস্টারে রূপান্তরিত করে, যা ডেনড্রোগ্রাম তৈরি করতে ব্যবহৃত হয়।
• d3.hierarchy() হায়ারার্কিক্যাল ডেটাকে একটি ডেটা স্ট্রাকচারে রূপান্তরিত করে এবং d3.linkVertical() লিঙ্ক তৈরি করতে সহায়ক।

D3.js ব্যবহার করে ডেনড্রোগ্রাম এবং ট্রি ডায়াগ্রাম তৈরি করা খুবই সহজ এবং শক্তিশালী একটি পদ্ধতি। d3.tree() এবং d3.cluster() ফাংশনগুলি হায়ারার্কিক্যাল ডেটাকে গ্রাফিক্যালভাবে উপস্থাপন করতে ব্যবহৃত হয়। এই ধরনের ভিজ্যুয়ালাইজেশনগুলি ডেটার মধ্যে সম্পর্ক এবং স্তরের স্থানান্তর প্রদর্শন করতে বিশেষভাবে কার্যকরী।

D3.js এ Tree Layout ব্যবহার করে হায়ারার্কিকাল ডেটা (hierarchical data) বা গাছের মতো ডেটার ভিজ্যুয়ালাইজেশন তৈরি করা হয়। এটি সাধারণত ডেটার সম্পর্ককে গাছের শাখার মতো দেখাতে সাহায্য করে, যেখানে প্রতিটি নোড একটি ডেটা পয়েন্ট এবং তার সন্তান (child) নোডগুলির মধ্যে সম্পর্ক প্রদর্শিত হয়। D3.js এ tree() ফাংশন ব্যবহার করে এই ধরনের ভিজ্যুয়ালাইজেশন তৈরি করা যায়।

Tree Layout এর মাধ্যমে আপনি গাছের মতো সম্পর্ক গঠন করতে পারেন, যেখানে প্রতিটি পিতা (parent) নোড তার সন্তানের (child) নোডের সঙ্গে যুক্ত থাকে।

১. Tree Layout এর ধারণা

Tree Layout হল এমন একটি কাঠামো যেখানে একটি মূল (root) নোড থেকে শুরু করে বিভিন্ন স্তরের (levels) সন্তান নোড পর্যন্ত সম্পর্ক তৈরি হয়। এটি একটি গাছের মতো সাজানো হয়, যেখানে প্রতিটি নোডের একটি পিতা নোড থাকে এবং একটি বা একাধিক সন্তান নোড থাকতে পারে।

২. Tree Layout তৈরির জন্য প্রয়োজনীয় ডেটা

Tree Layout তৈরি করার জন্য ডেটাকে সাধারণত হায়ারার্কিকাল ফর্ম্যাট এ সাজানো হয়, যেমন:

const treeData = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        { name: "Grandchild 1.1" },
        { name: "Grandchild 1.2" }
      ]
    },
    {
      name: "Child 2",
      children: [
        { name: "Grandchild 2.1" },
        { name: "Grandchild 2.2" }
      ]
    }
  ]
};

এই ডেটাতে name হচ্ছে নোডের নাম এবং children হচ্ছে সন্তানের নোডের অ্যারে।

৩. D3.js Tree Layout তৈরি করা

Tree Layout তৈরি করতে D3.js এর d3.tree() ফাংশন ব্যবহার করা হয়। এই ফাংশনটি হায়ারার্কিকাল ডেটাকে আর্গুমেন্ট হিসেবে নিয়ে তা থেকে সঠিক x, y পজিশন হিসেব করে দেয়, যা গাছের শাখার জন্য উপযুক্ত।

৩.১ Tree Layout Setup

SVG এলিমেন্ট তৈরি:

const width = 600;
const height = 400;
const margin = { top: 20, right: 120, bottom: 20, left: 120 };

const svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

Tree Layout ফাংশন তৈরি:

const tree = d3.tree()
  .size([height - margin.top - margin.bottom, width - margin.left - margin.right]); // গাছের আকার

৪. Tree Data Transformation

D3.js এ tree() ফাংশনটি ডেটাকে ইনপুট হিসেবে নিয়ে, নোডগুলোর x এবং y পজিশন নির্ধারণ করে। এই পজিশনগুলো দিয়ে পরবর্তী ধাপে গাছের শাখাগুলি (links) এবং নোডগুলি তৈরি করা হয়।

const root = d3.hierarchy(treeData); // ডেটাকে হায়ারার্কিকাল ফর্ম্যাটে রূপান্তর করা
tree(root); // root নোডের জন্য পজিশন গণনা

৫. Tree Layout এর নোড এবং লিঙ্ক (Links) তৈরি

৫.১ নোড (Nodes)

নোডের জন্য <circle> এবং <text> এলিমেন্ট ব্যবহার করা হয়:

// নোড তৈরি
const nodes = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".node")
  .data(root.descendants()) // সমস্ত নোড
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => "translate(" + d.x + "," + d.y + ")");

// নোডগুলিতে বৃত্ত (circle) যোগ করা
nodes.append("circle")
  .attr("r", 10)
  .style("fill", "lightsteelblue")
  .style("stroke", "steelblue")
  .style("stroke-width", "2");

// নোডের নাম যোগ করা
nodes.append("text")
  .attr("dy", 3)
  .attr("x", d => d.children ? -12 : 12) // সন্তান নোড আছে কি না
  .style("text-anchor", "middle")
  .text(d => d.data.name);

৫.২ লিঙ্ক (Links)

গাছের শাখাগুলির জন্য <path> এলিমেন্ট ব্যবহার করা হয়, যা পিতা নোড থেকে সন্তানের নোডের দিকে একটি লাইন আঁকে।

// লিঙ্ক তৈরি
const links = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".link")
  .data(root.links()) // পিতা-সন্তান সম্পর্ক
  .enter().append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal() // লিঙ্কের জন্য পথ
    .x(d => d.x)
    .y(d => d.y))
  .style("fill", "none")
  .style("stroke", "#ccc")
  .style("stroke-width", "2");

৬. পূর্ণ Tree Layout কোড

const treeData = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        { name: "Grandchild 1.1" },
        { name: "Grandchild 1.2" }
      ]
    },
    {
      name: "Child 2",
      children: [
        { name: "Grandchild 2.1" },
        { name: "Grandchild 2.2" }
      ]
    }
  ]
};

const width = 600;
const height = 400;
const margin = { top: 20, right: 120, bottom: 20, left: 120 };

const svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

const tree = d3.tree()
  .size([height - margin.top - margin.bottom, width - margin.left - margin.right]);

const root = d3.hierarchy(treeData); // ডেটাকে হায়ারার্কিকাল ফর্ম্যাটে রূপান্তর

tree(root); // পজিশন গণনা

// লিঙ্ক তৈরি
const links = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".link")
  .data(root.links())
  .enter().append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal().x(d => d.x).y(d => d.y))
  .style("fill", "none")
  .style("stroke", "#ccc")
  .style("stroke-width", "2");

// নোড তৈরি
const nodes = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .selectAll(".node")
  .data(root.descendants())
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => "translate(" + d.x + "," + d.y + ")");

// নোডগুলিতে বৃত্ত (circle) যোগ করা
nodes.append("circle")
  .attr("r", 10)
  .style("fill", "lightsteelblue")
  .style("stroke", "steelblue")
  .style("stroke-width", "2");

// নোডের নাম যোগ করা
nodes.append("text")
  .attr("dy", 3)
  .attr("x", d => d.children ? -12 : 12)
  .style("text-anchor", "middle")
  .text(d => d.data.name);

D3.js এ Tree Layout ব্যবহার করে হায়ারার্কিকাল ডেটা বা গাছের মতো সম্পর্কের ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব। এখানে ডেটাকে গাছের মতো সাজানো হয়, যেখানে প্রতিটি পিতা নোডের সঙ্গে তার সন্তান নোডের সম্পর্ক দেখানো হয়। D3.js এর tree() ফাংশন এবং hierarchy() ডেটা রূপান্তর ফাংশন ব্যবহার করে এই ধরনের গাছ তৈরি করা হয়, যা ডেটার অন্তর্নিহিত সম্পর্কগুলো খুব সুন্দরভাবে উপস্থাপন করতে সাহায্য করে।

ডেনড্রোগ্রাম হল একটি গ্রাফিক্যাল উপস্থাপনা যা হায়ারার্কিক্যাল ডেটা বা শ্রেণীবদ্ধ ডেটার সম্পর্ক প্রদর্শন করে। এটি সাধারণত গাছের আকৃতিতে চিত্রিত হয়, যেখানে প্রতিটি শাখা একটি সম্পর্ক বা শ্রেণীকে বোঝায় এবং শাখাগুলির মধ্যবর্তী সংযোগগুলি তাদের মধ্যে সম্পর্ক বা হায়ারার্কির স্তর নির্দেশ করে। D3.js ব্যবহার করে আপনি সহজেই ডেটা ভিজ্যুয়ালাইজেশনে ডেনড্রোগ্রাম তৈরি করতে পারেন।

১. ডেনড্রোগ্রাম কী?

ডেনড্রোগ্রাম হল একটি গাছ আকৃতির ভিজ্যুয়াল যা ডেটার হায়ারার্কিক্যাল সম্পর্ক (যেমন, শ্রেণীবিভাগ, পারিবারিক গাছ, বা উত্সের সম্পর্ক) প্রদর্শন করে। এটি মূলত একটি গাছের মতো দেখায়, যেখানে মূল শাখা (root) থেকে শুরু করে বিভিন্ন স্তরের শাখায় ডেটা প্রদর্শিত হয়।

ডেনড্রোগ্রামের মধ্যে সাধারণত দুটি প্রধান উপাদান থাকে:

1. নোড (Node): ডেটার প্রতিটি ইউনিট বা উপাদান।
2. এজ (Edge): নোডগুলির মধ্যে সম্পর্ক বা সংযোগ।

২. D3.js-এ ডেনড্রোগ্রাম তৈরির জন্য পদক্ষেপ

D3.js ব্যবহার করে ডেনড্রোগ্রাম তৈরি করার জন্য আপনাকে কয়েকটি স্টেপ অনুসরণ করতে হবে:

1. ডেটা প্রস্তুতি: ডেটাকে একটি হায়ারার্কিক্যাল ফরম্যাটে (যেমন, JSON বা JavaScript অবজেক্ট) রাখতে হবে।
2. D3.js হায়ারার্কি তৈরি করা: d3.hierarchy() ফাংশন ব্যবহার করে ডেটাকে হায়ারার্কিতে রূপান্তর করতে হবে।
3. ট্রি লেআউট তৈরি করা: d3.tree() অথবা d3.cluster() ব্যবহার করে ডেটার ট্রি স্ট্রাকচার তৈরি করতে হবে।
4. নোড এবং এজ উপস্থাপন: ডেটার নোড এবং এজ গুলি 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() ফাংশন ব্যবহার করে আপনি ডেটার গাছের কাঠামো তৈরি করতে পারেন এবং এটি বিভিন্ন স্টাইল এবং কাস্টমাইজেশন দ্বারা আরও আকর্ষণীয় করতে পারেন। ডেনড্রোগ্রাম মূলত ডেটার সম্পর্ক এবং হায়ারার্কি প্রদর্শন করতে ব্যবহৃত হয়, যা গবেষণা, বিশ্লেষণ এবং ডেটা সংগঠনকে সহজ করে তোলে।

D3.js ব্যবহার করে Tree এবং Cluster Diagram তৈরি করা খুবই সহজ, এবং এগুলোর মাধ্যমে আপনি ডেটার মধ্যে সম্পর্ক এবং আর্কিটেকচার ভিজ্যুয়ালাইজ করতে পারেন। এই ডায়াগ্রামগুলোর মধ্যে Node এবং Link গুলি স্টাইল করা গুরুত্বপূর্ণ, কারণ এটি ডেটার গঠন এবং সম্পর্ককে স্পষ্টভাবে উপস্থাপন করতে সাহায্য করে।

এই গাইডে, আমরা Tree Diagram এবং Cluster Diagram এর জন্য Link এবং Node Styling নিয়ে আলোচনা করবো, যা D3.js দিয়ে তৈরি করা যাবে।

১. প্রাথমিক সেটআপ

প্রথমে, আপনাকে D3.js লাইব্রেরি HTML ফাইলে যুক্ত করতে হবে:

<script src="https://d3js.org/d3.v7.min.js"></script>

এছাড়া, একটি SVG ক্যানভাস তৈরি করতে হবে যেখানে Tree এবং Cluster Diagram দেখানো হবে।

<svg width="800" height="600"></svg>

২. Tree Diagram তৈরি করা

Tree Diagram এ Node গুলি গাছের শাখার মতো সাজানো হয় এবং Link গুলি গাছের ডালপালার মতো কাজ করে। এখানে, আমরা একটি সাধারণ Tree Diagram তৈরি করবো এবং এর Link এবং Node গুলি স্টাইল করবো।

ডেটা প্রস্তুত করা

const treeData = {
  name: "Root",
  children: [
    {
      name: "Child 1",
      children: [
        { name: "Grandchild 1" },
        { name: "Grandchild 2" }
      ]
    },
    {
      name: "Child 2",
      children: [
        { name: "Grandchild 3" },
        { name: "Grandchild 4" }
      ]
    }
  ]
};

Tree Layout সেটআপ করা

Tree Diagram তৈরি করতে D3.js এর d3.tree() ফাংশন ব্যবহার করা হয়। এটি ডেটার ভিত্তিতে সঠিক ভাবে নোড ও লিঙ্ক তৈরি করে।

const margin = { top: 20, right: 120, bottom: 20, left: 120 };
const width = 800 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;

const svg = d3.select("svg").append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const tree = d3.tree().size([height, width]);

// ডেটা পার্স করা
const root = d3.hierarchy(treeData);
tree(root);

Link এবং Node Styling করা

এখন আমরা Tree Diagram এর Links এবং Nodes এর স্টাইলিং করবো।

// লিঙ্ক তৈরি
svg.selectAll(".link")
  .data(root.links())
  .enter().append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal().x(d => d.y).y(d => d.x))
  .style("fill", "none")
  .style("stroke", "#ccc")
  .style("stroke-width", 2);

// নোড তৈরি
const node = svg.selectAll(".node")
  .data(root.descendants())
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => "translate(" + d.y + "," + d.x + ")");

// নোডের সার্কেল স্টাইলিং
node.append("circle")
  .attr("r", 10)
  .style("fill", "steelblue")
  .style("stroke", "black")
  .style("stroke-width", 2);

// নোডের টেক্সট
node.append("text")
  .attr("dx", 12)
  .attr("dy", 3)
  .style("font-size", "14px")
  .style("fill", "black")
  .text(d => d.data.name);

এখানে:

• Links এর জন্য path এলিমেন্ট ব্যবহার করা হয়েছে, যা ডেটার সংযোগ নির্দেশ করে। এটি d3.linkHorizontal() দ্বারা তৈরি হয়েছে।
• Nodes এর জন্য circle এলিমেন্ট ব্যবহার করা হয়েছে, এবং এতে স্টাইলিং করা হয়েছে রঙ, সীমানা ইত্যাদি।
• Text এলিমেন্ট ব্যবহার করে নোডের নাম প্রদর্শন করা হয়েছে।

৩. Cluster Diagram তৈরি করা

Cluster Diagram, Tree Diagram এর মতো, তবে এটি সাধারণত প্রতিটি নোডকে একটি ক্লাস্টারে বা গ্রুপে দেখানোর জন্য ব্যবহার করা হয়। এই ডায়াগ্রামে, একই ক্লাস্টারে থাকা নোডগুলি একে অপরের কাছাকাছি অবস্থান করে, যা ডেটার সম্পর্ক পরিষ্কারভাবে প্রকাশ করে।

Cluster Layout সেটআপ করা

Cluster Diagram তৈরি করতে D3.js এর d3.cluster() ফাংশন ব্যবহার করা হয়। এখানে, আমরা একটি Cluster Diagram তৈরি করবো।

const cluster = d3.cluster().size([height, width]);

// ডেটা পার্স করা
const rootCluster = d3.hierarchy(treeData);
cluster(rootCluster);

Link এবং Node Styling করা

এখন, Cluster Diagram এর Links এবং Nodes এর স্টাইলিং করবো।

// লিঙ্ক তৈরি
svg.selectAll(".link")
  .data(rootCluster.links())
  .enter().append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal().x(d => d.y).y(d => d.x))
  .style("fill", "none")
  .style("stroke", "#ccc")
  .style("stroke-width", 2);

// নোড তৈরি
const nodeCluster = svg.selectAll(".node")
  .data(rootCluster.descendants())
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", d => "translate(" + d.y + "," + d.x + ")");

// নোডের সার্কেল স্টাইলিং
nodeCluster.append("circle")
  .attr("r", 10)
  .style("fill", "lightgreen")
  .style("stroke", "black")
  .style("stroke-width", 2);

// নোডের টেক্সট
nodeCluster.append("text")
  .attr("dx", 12)
  .attr("dy", 3)
  .style("font-size", "14px")
  .style("fill", "black")
  .text(d => d.data.name);

এখানে:

• Links এর জন্য path এলিমেন্ট ব্যবহার করা হয়েছে, যা ক্লাস্টারের মধ্যে নোডগুলোর সংযোগ দেখায়।
• Nodes এর জন্য circle এলিমেন্ট ব্যবহার করা হয়েছে, এবং ক্লাস্টারের মধ্যে নোডের স্টাইলিং করা হয়েছে।

৪. ইন্টারঅ্যাকটিভ স্টাইলিং (হোভার ইফেক্ট)

ইন্টারঅ্যাকটিভিটি যোগ করার জন্য, আপনি হোভার ইফেক্ট ব্যবহার করতে পারেন, যাতে ব্যবহারকারীরা যখন কোন নোডের উপর মাউস রাখে, তখন নোডটি বড় হয়ে যায় অথবা তার রঙ পরিবর্তন হয়।

// হোভার ইফেক্ট
node.on("mouseover", function(d) {
    d3.select(this).select("circle")
      .transition()
      .duration(200)
      .attr("r", 15)
      .style("fill", "orange");
})
.on("mouseout", function(d) {
    d3.select(this).select("circle")
      .transition()
      .duration(200)
      .attr("r", 10)
      .style("fill", "steelblue");
});

এখানে, mouseover ইভেন্টে, নোডের রঙ এবং আকার পরিবর্তন করা হচ্ছে, এবং mouseout ইভেন্টে এটি আগের অবস্থায় ফিরে আসবে।

D3.js দিয়ে Tree এবং Cluster Diagram তৈরি করার সময়, Link এবং Node Styling অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি ডেটার গঠন এবং সম্পর্ককে পরিষ্কারভাবে উপস্থাপন করে। D3.js এ আপনি বিভিন্ন রঙ, আকার, এবং হোভার ইফেক্ট ব্যবহার করে এই ডায়াগ্রামগুলিকে আরো ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন।

D3.js একটি শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন তৈরি করার জন্য ব্যবহৃত হয়। এর মাধ্যমে আপনি বিভিন্ন ধরনের ট্রি ডায়াগ্রাম তৈরি করতে পারেন, যার মধ্যে Radial Tree এবং Collapsible Tree অন্যতম। এই দুইটি ডায়াগ্রাম আপনাকে ডেটার হায়ারার্কি বা গঠনগত সম্পর্ক পরিষ্কারভাবে দেখানোর সুযোগ দেয়।

১. Radial Tree Diagram

Radial Tree ডায়াগ্রাম একটি গহ্বর আকৃতির ট্রি যা কেন্দ্রে একটি মূল নোড রেখে তার শাখাগুলিকে বৃত্তাকারভাবে প্রদর্শন করে। এটি সাধারণত ডেটার মধ্যে সম্পর্ক বা হায়ারার্কি দেখাতে ব্যবহৃত হয়, যেমন ফোল্ডার স্ট্রাকচার বা অ্যাসেম্বলির গঠন।

Radial Tree Diagram তৈরির উপাদান:

• d3.tree(): ট্রি লেআউট তৈরি করতে ব্যবহৃত হয়।
• d3.partition(): ডেটাকে পার্টিশন বা শ্রেণীভুক্ত করার জন্য ব্যবহৃত হয়।
• Arc Path: নোডগুলির মধ্যে সংযোগ তৈরি করতে আর্ক ব্যবহার করা হয়।

উদাহরণ: Radial Tree Diagram

// ডেটাসেট
const data = {
  "name": "root",
  "children": [
    { "name": "A", "children": [{ "name": "A1" }, { "name": "A2" }] },
    { "name": "B", "children": [{ "name": "B1" }, { "name": "B2" }] }
  ]
};

// SVG তৈরি
const width = 600, height = 600;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g")
              .attr("transform", `translate(${width / 2}, ${height / 2})`);

// Tree লেআউট এবং রেডিয়াল লেআউট সেটিংস
const tree = d3.tree().size([2 * Math.PI, 250]);

const root = d3.hierarchy(data);
tree(root);

// Path তৈরি
svg.selectAll(".link")
   .data(root.links())
   .enter().append("path")
   .attr("class", "link")
   .attr("d", d3.linkRadial()
                .angle(d => d.x)
                .radius(d => d.y));

// নোড তৈরি
const nodes = svg.selectAll(".node")
                 .data(root.descendants())
                 .enter().append("g")
                 .attr("class", "node")
                 .attr("transform", d => `rotate(${d.x * 180 / Math.PI})translate(${d.y},0)`);

// নোডে টেক্সট যোগ
nodes.append("text")
     .attr("dy", ".31em")
     .attr("x", d => d.x < Math.PI ? 6 : -6)
     .style("text-anchor", d => d.x < Math.PI ? "start" : "end")
     .text(d => d.data.name);

ব্যাখ্যা:

• d3.hierarchy(): হায়ারার্কিক্যাল ডেটা তৈরি করার জন্য ব্যবহৃত হয়।
• d3.tree(): ট্রি লেআউট তৈরি করে, যার মাধ্যমে নোডগুলির অবস্থান নির্ধারণ করা হয়।
• d3.linkRadial(): রেডিয়াল স্টাইলের লিঙ্ক (যোগাযোগ রেখা) তৈরি করতে ব্যবহৃত হয়।
• transform: SVG গঠন এবং স্থানান্তর করতে ব্যবহৃত।

২. Collapsible Tree Diagram

Collapsible Tree ডায়াগ্রাম একটি ট্রি ভিউ যেখানে নোডগুলির শাখাগুলি সঙ্কুচিত বা প্রসারিত (collapse/expand) করা যায়। এটি খুবই কার্যকর যখন আপনার কাছে বিশাল পরিমাণ ডেটা থাকে এবং আপনি ব্যবহারকারীদের শাখাগুলি কোলাপস বা এক্সপ্যান্ড করার সুবিধা দিতে চান।

Collapsible Tree Diagram তৈরির উপাদান:

• d3.tree(): ট্রি লেআউট তৈরি করতে ব্যবহৃত হয়।
• collapse(): নোডের শাখাগুলি সঙ্কুচিত করতে ব্যবহৃত হয়।
• expand(): সঙ্কুচিত শাখাগুলি প্রসারিত করতে ব্যবহৃত হয়।

উদাহরণ: Collapsible Tree Diagram

// ডেটাসেট
const data = {
  "name": "root",
  "children": [
    { "name": "A", "children": [{ "name": "A1" }, { "name": "A2" }] },
    { "name": "B", "children": [{ "name": "B1" }, { "name": "B2" }] }
  ]
};

// SVG তৈরি
const width = 600, height = 600;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g")
              .attr("transform", `translate(50,50)`);

// Tree লেআউট সেটিংস
const tree = d3.tree().size([height, width - 100]);

const root = d3.hierarchy(data);
tree(root);

// Path তৈরি
svg.selectAll(".link")
   .data(root.links())
   .enter().append("path")
   .attr("class", "link")
   .attr("d", d3.linkVertical()
                .x(d => d.y)
                .y(d => d.x));

// নোড তৈরি
const nodes = svg.selectAll(".node")
                 .data(root.descendants())
                 .enter().append("g")
                 .attr("class", "node")
                 .attr("transform", d => `translate(${d.y},${d.x})`);

// নোডে টেক্সট যোগ
nodes.append("circle")
     .attr("r", 10)
     .style("fill", "#ff5722")
     .on("click", click);

nodes.append("text")
     .attr("dy", ".35em")
     .attr("x", d => d.children ? -13 : 13)
     .style("text-anchor", d => d.children ? "end" : "start")
     .text(d => d.data.name);

// কলাপস এবং এক্সপ্যান্ড ফাংশন
function click(event, d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }

  update(d);
}

function update(source) {
  const nodes = svg.selectAll(".node")
                   .data(root.descendants(), d => d.id || (d.id = ++i));

  nodes.transition()
       .duration(750)
       .attr("transform", d => `translate(${d.y},${d.x})`);

  const links = svg.selectAll(".link")
                   .data(root.links(), d => d.target.id);

  links.transition()
       .duration(750)
       .attr("d", d3.linkVertical()
                    .x(d => d.y)
                    .y(d => d.x));
}

ব্যাখ্যা:

• d3.hierarchy(): ডেটাকে হায়ারার্কিক্যাল আকারে রূপান্তরিত করে।
• click(): কলাপস বা এক্সপ্যান্ড করার জন্য ক্লিক ইভেন্ট হ্যান্ডলার। যখন কোনো নোডে ক্লিক করা হয়, তখন তার শাখাগুলি সঙ্কুচিত বা প্রসারিত হয়।
• update(): ট্রি রেন্ডার করার পরবর্তী ধাপ, যেখানে নোড এবং লিঙ্কের অবস্থান আপডেট হয়।

৩. কাস্টমাইজেশন এবং উন্নয়ন

D3.js দিয়ে Radial এবং Collapsible Tree ডায়াগ্রাম তৈরির সময় আপনি চাইলে নিচের ফিচারগুলো কাস্টমাইজ করতে পারেন:

• নোডের শেপ এবং রঙ: নোডের স্টাইল এবং রঙ কাস্টমাইজ করা যায়, যাতে প্রতিটি নোড আলাদা দেখতে পারে।
• শাখার ধরণ: শাখার আকার এবং রঙ কাস্টমাইজ করা যায়।
• টেক্সট স্টাইল: নোডের টেক্সটের ফন্ট, সাইজ এবং অবস্থান পরিবর্তন করা যায়।
• ট্রানজিশন ইফেক্টস: নোড এবং লিঙ্কের জন্য অ্যানিমেশন এবং ট্রানজিশন ইফেক্ট ব্যবহার করা যেতে পারে, যাতে ইউজার ইন্টারঅ্যাকশন আরও স্মুথ হয়।

Radial এবং Collapsible Tree ডায়াগ্রাম D3.js এর মাধ্যমে তৈরি করা খুবই সহজ এবং কার্যকর। Radial Tree ডায়াগ্রামটি একটি বৃত্তাকার গঠন তৈরি করে, যেখানে ডেটার হায়ারার্কি সহজে বোঝা যায়, এবং Collapsible Tree ডায়াগ্রামটি শাখাগুলিকে সঙ্কুচিত বা প্রসারিত করার সুবিধা প্রদান করে, যা বিশাল ডেট

াসেটের জন্য উপযুক্ত। D3.js-এ এই ধরনের ডায়াগ্রাম তৈরি করার জন্য কাস্টমাইজেশন এবং ইন্টারঅ্যাকটিভ ফিচারগুলির সাথে কাজ করা যায়।