Complex Data Structures এর সাথে D3.js ব্যবহার

D3.js শক্তিশালী একটি ডেটা ভিজ্যুয়ালাইজেশন লাইব্রেরি, যা জটিল ডেটা স্ট্রাকচার বা Complex Data Structures ব্যবহারে অত্যন্ত দক্ষ। D3.js-এ আপনি তালিকা (Lists), অবজেক্ট (Objects), নেস্টেড (Nested) ডেটা, এবং হায়ারার্কিকাল (Hierarchical) ডেটা-সহ বিভিন্ন ধরনের ডেটা সঙ্গঠিত এবং উপস্থাপন করতে পারেন। যখন ডেটা জটিল হয়, তখন D3.js এর শক্তিশালী ডেটা বাইন্ডিং এবং জ্যামিতিক অপারেশন ব্যবহার করে সহজেই ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব।

১. Complex Data Structures এর প্রকার

Complex Data Structures সাধারণত এমন ডেটা কাঠামো যা বিভিন্ন স্তরে বা উপাদানে গঠিত, যেমন:

• নেস্টেড অ্যারে (Nested Arrays): যেখানে একটি অ্যারের ভিতরে আরও অ্যারে থাকতে পারে।
• অবজেক্ট এবং অ্যারে (Objects and Arrays): যেখানে একাধিক ডেটা আইটেম একসাথে একটি অবজেক্টে গঠন করা হয়।
• হায়ারার্কিকাল ডেটা (Hierarchical Data): যেখানে ডেটা একটি গাছের (Tree) মতো স্তরের মধ্যে সংগঠিত থাকে (যেমন, ফোল্ডার স্ট্রাকচার, আর্টিকেল/ক্যাটেগরি মডেল ইত্যাদি)।

D3.js এই ধরনের ডেটা নিয়ে কাজ করার জন্য বেশ কিছু পদ্ধতি এবং মেথড সরবরাহ করে।

২. Nested Data (নেস্টেড ডেটা) এবং D3.js

যখন ডেটা নেস্টেড হয়, তখন একটি অবজেক্ট বা অ্যারের ভিতরে অন্যান্য অবজেক্ট বা অ্যারে থাকে। D3.js-এ d3.nest() মেথড ব্যবহার করে এই ধরনের ডেটা গঠন এবং রেন্ডার করা যায়।

উদাহরণ: Nested Data এর সাথে D3.js ব্যবহার

ধরা যাক, আমাদের কাছে একটি ডেটাসেট আছে যেখানে বিভিন্ন বিভাগ এবং তার অধীনে থাকা কর্মচারীদের তথ্য দেওয়া আছে। আমরা এই ডেটাকে একটি পাইন চার্টে রূপান্তর করতে চাই।

// ডেটা তৈরি করা
const data = [
  { department: 'HR', name: 'John', salary: 5000 },
  { department: 'HR', name: 'Sarah', salary: 6000 },
  { department: 'Engineering', name: 'Alice', salary: 8000 },
  { department: 'Engineering', name: 'Bob', salary: 7000 },
  { department: 'Sales', name: 'Charlie', salary: 5500 },
  { department: 'Sales', name: 'Dave', salary: 4500 }
];

// ডেটাকে নেস্ট করা (department অনুযায়ী)
const nestedData = d3.nest()
                     .key(d => d.department)  // department key হিসেবে নেস্টিং
                     .entries(data);

// SVG এলিমেন্ট তৈরি করা
const width = 500, height = 300;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

// নেস্টেড ডেটা রেন্ডার করা
svg.selectAll("g")
   .data(nestedData)
   .enter()
   .append("g")
   .attr("transform", (d, i) => `translate(0, ${i * 60})`)  // position each department vertically
   .each(function(d) {
       d3.select(this).append("text")
                      .text(d.key)  // department name
                      .attr("x", 10)
                      .attr("y", 20)
                      .style("font-size", "16px");

       d3.select(this).selectAll("circle")
                      .data(d.values)
                      .enter()
                      .append("circle")
                      .attr("cx", (d, i) => 150 + i * 40)
                      .attr("cy", 40)
                      .attr("r", d => d.salary / 1000)  // salary proportional to circle radius
                      .attr("fill", "steelblue");
   });

এখানে:

• d3.nest() মেথডটি ডেটাকে department এর ভিত্তিতে নেস্ট করে।
• প্রতিটি বিভাগ (department) অনুযায়ী কর্মচারীদের একটি circle তৈরি করা হয়, যেখানে বৃত্তের আকার কর্মচারীর salary এর ভিত্তিতে নির্ধারিত।

৩. Hierarchical Data (হায়ারার্কিকাল ডেটা) এবং D3.js

Hierarchical Data ডেটার গঠন এমনভাবে হয় যে, এতে parent-child সম্পর্ক থাকে। D3.js এই ধরনের ডেটার জন্য শক্তিশালী মেথড সরবরাহ করে যেমন d3.hierarchy(), যা আপনাকে গাছের (tree) মতো ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে।

উদাহরণ: Hierarchical Data দিয়ে Tree Diagram তৈরি

ধরা যাক, আমাদের একটি গাছের মতো ডেটা আছে যেখানে বিভিন্ন বিভাগের অধীনে সাব-ডিভিশন বা সাব-ক্যাটেগরি রয়েছে। আমরা এই ডেটাকে একটি Tree Diagram হিসেবে প্রদর্শন করতে চাই।

// হায়ারার্কিকাল ডেটা
const treeData = {
  name: "Company",
  children: [
    { name: "HR", children: [{ name: "Recruitment" }, { name: "Payroll" }] },
    { name: "Engineering", children: [{ name: "Development" }, { name: "QA" }] },
    { name: "Sales", children: [{ name: "Domestic" }, { name: "International" }] }
  ]
};

// SVG এলিমেন্ট তৈরি করা
const width = 500, height = 300;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

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

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

// লাইন (links) আঁকা
svg.selectAll(".link")
   .data(root.links())
   .enter()
   .append("line")
   .attr("class", "link")
   .attr("x1", d => d.source.x)
   .attr("y1", d => d.source.y)
   .attr("x2", d => d.target.x)
   .attr("y2", d => d.target.y)
   .attr("stroke", "#ccc")
   .attr("stroke-width", 2);

// Nodes আঁকা
svg.selectAll(".node")
   .data(root.descendants())
   .enter()
   .append("circle")
   .attr("class", "node")
   .attr("cx", d => d.x)
   .attr("cy", d => d.y)
   .attr("r", 5)
   .attr("fill", "steelblue");

// টেক্সট যোগ করা
svg.selectAll(".node-text")
   .data(root.descendants())
   .enter()
   .append("text")
   .attr("class", "node-text")
   .attr("x", d => d.x + 10)
   .attr("y", d => d.y)
   .text(d => d.data.name)
   .style("font-size", "12px")
   .style("fill", "black");

এখানে:

• d3.hierarchy() মেথডটি হায়ারার্কিকাল ডেটা গ্রহণ করে এবং গাছের মতো কাঠামো তৈরি করে।
• d3.tree() ব্যবহার করে সেই গাছের পদ্ধতিতে ডেটাকে ভিজ্যুয়ালাইজ করা হয়।

// ডেটা
let data = [10, 20, 30, 40, 50];

// SVG এলিমেন্ট তৈরি করা
const width = 500, height = 200;
const svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);

// ডেটার ওপর লাইন চার্ট তৈরি করা
const line = d3.line()
               .x((d, i) => i * 100)
               .y(d => height - d);

// লাইন তৈরি করা
const path = svg.append("path")
                .data([data])
                .attr("fill", "none")
                .attr("stroke", "steelblue")
                .attr("stroke-width", 2)
                .attr("d", line);

// ডেটা পরিবর্তন
data = [50, 40, 30, 20, 10];  // নতুন ডেটা

// ডেটার সঙ্গে লাইন আপডেট করা
path.data([data])
    .transition()
    .duration(1000)
    .attr("d", line);