ডেটা সোর্টিং এবং গ্রুপিং

D3.js-এ ডেটা সোর্টিং এবং গ্রুপিং খুবই গুরুত্বপূর্ণ বিষয়, বিশেষ করে যখন আপনি একটি বড় ডেটাসেট ভিজ্যুয়ালাইজ করতে চান। সঠিকভাবে ডেটা সোর্ট এবং গ্রুপিং করার মাধ্যমে আপনি ডেটার মধ্যে প্যাটার্ন এবং ট্রেন্ড সহজেই দেখতে পারেন। D3.js-এ ডেটা সোর্টিং এবং গ্রুপিং করার জন্য আপনি d3.sort(), d3.nest(), এবং d3.group() এর মতো ফাংশন ব্যবহার করতে পারেন।

ডেটা সোর্টিং (Sorting)

ডেটা সোর্টিং মূলত ডেটার মানের উপর ভিত্তি করে তাদের ক্রম নির্ধারণ করে। D3.js এ সোজা এবং প্রভাবশালী উপায়ে ডেটা সোর্ট করা যায়।

১. ডেটা সোর্টিং উদাহরণ

ধরা যাক, আমাদের কাছে একটি অ্যারে আছে যেখানে প্রতিটি উপাদান একটি সংখ্যার মান ধারণ করে, এবং আমরা চাই ডেটাকে অঙ্কের বড় থেকে ছোট (descending) অর্ডারে সাজাতে।

const data = [5, 3, 8, 1, 2];

// ডেটা সোর্টিং (ascending)
const sortedDataAsc = data.sort(d3.ascending);
console.log(sortedDataAsc); // [1, 2, 3, 5, 8]

// ডেটা সোর্টিং (descending)
const sortedDataDesc = data.sort(d3.descending);
console.log(sortedDataDesc); // [8, 5, 3, 2, 1]

এখানে, d3.ascending এবং d3.descending সিডিংয়ের জন্য ব্যবহৃত হয়েছে। d3.ascending ব্যবহার করলে ডেটা ছোট থেকে বড় (ascending) এবং d3.descending ব্যবহার করলে বড় থেকে ছোট (descending) সোর্ট হয়।

২. অবজেক্ট সোর্টিং

যখন আপনার ডেটা একটি অবজেক্টের আকারে থাকে, তখন আপনি একটি বিশেষ কী (যেমন: মান) এর ভিত্তিতে সোর্ট করতে পারেন। নিচে একটি উদাহরণ দেখানো হলো যেখানে অবজেক্টের value কীর উপর সorting করা হয়েছে।

const data = [
  { name: "Alice", value: 30 },
  { name: "Bob", value: 10 },
  { name: "Charlie", value: 20 }
];

// value কীর উপর সোর্টিং (ascending)
const sortedData = data.sort((a, b) => d3.ascending(a.value, b.value));
console.log(sortedData);
// [ { name: "Bob", value: 10 }, { name: "Charlie", value: 20 }, { name: "Alice", value: 30 } ]

এখানে, d3.ascending ব্যবহার করা হয়েছে যাতে value কীর মানের উপর ভিত্তি করে ডেটা সোর্ট হয়।

ডেটা গ্রুপিং (Grouping)

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

১. d3.nest() ব্যবহার করে গ্রুপিং

d3.nest() একটি ডেটা গ্রুপিং টুল যা একটি বা একাধিক কী-এর ভিত্তিতে ডেটাকে গ্রুপ করে। তবে, d3.nest() D3.js v6 এর পর Deprecated হয়ে গেছে এবং এখন d3.group() ব্যবহার করা হয়।

d3.nest() উদাহরণ:

const data = [
  { category: "Fruit", name: "Apple" },
  { category: "Fruit", name: "Banana" },
  { category: "Vegetable", name: "Carrot" },
  { category: "Fruit", name: "Orange" },
  { category: "Vegetable", name: "Broccoli" }
];

// Nest ব্যবহার করে গ্রুপিং
const nestedData = d3.nest()
  .key(d => d.category) // category দিয়ে গ্রুপিং
  .entries(data);

console.log(nestedData);

আউটপুট:

[
  {
    "key": "Fruit",
    "values": [
      { "category": "Fruit", "name": "Apple" },
      { "category": "Fruit", "name": "Banana" },
      { "category": "Fruit", "name": "Orange" }
    ]
  },
  {
    "key": "Vegetable",
    "values": [
      { "category": "Vegetable", "name": "Carrot" },
      { "category": "Vegetable", "name": "Broccoli" }
    ]
  }
]

এখানে, d3.nest() ব্যবহার করে ডেটা category কীর ভিত্তিতে গ্রুপ করা হয়েছে।

২. d3.group() ব্যবহার করে গ্রুপিং

d3.group() হল নতুন API যা ডেটাকে গ্রুপ করার জন্য ব্যবহার করা হয়, এবং এটি d3.nest() এর বিকল্প হিসেবে কাজ করে। d3.group() ব্যবহার করলে আপনি একটি Map অবজেক্ট পাবেন যা গ্রুপ করা ডেটার মান ধারণ করবে।

d3.group() উদাহরণ:

const data = [
  { category: "Fruit", name: "Apple" },
  { category: "Fruit", name: "Banana" },
  { category: "Vegetable", name: "Carrot" },
  { category: "Fruit", name: "Orange" },
  { category: "Vegetable", name: "Broccoli" }
];

// group ব্যবহার করে গ্রুপিং
const groupedData = d3.group(data, d => d.category);

console.log(groupedData);

আউটপুট:

Map {
  "Fruit" => [
    { "category": "Fruit", "name": "Apple" },
    { "category": "Fruit", "name": "Banana" },
    { "category": "Fruit", "name": "Orange" }
  ],
  "Vegetable" => [
    { "category": "Vegetable", "name": "Carrot" },
    { "category": "Vegetable", "name": "Broccoli" }
  ]
}

এখানে, d3.group() ব্যবহার করে ডেটা category কীর ভিত্তিতে গ্রুপ করা হয়েছে এবং এটি একটি Map অবজেক্ট হিসেবে আউটপুট দিয়েছে।

ডেটা গ্রুপিং এবং সোর্টিং একসাথে

ডেটা সোর্টিং এবং গ্রুপিং একসাথে করা যেতে পারে, এবং এটি সাধারণত তখন প্রয়োজন হয় যখন আপনি ডেটাকে আগে গ্রুপ করেন এবং তারপর প্রতিটি গ্রুপের মধ্যে সোর্ট করেন।

উদাহরণ:

const data = [
  { category: "Fruit", name: "Apple", value: 30 },
  { category: "Fruit", name: "Banana", value: 10 },
  { category: "Vegetable", name: "Carrot", value: 20 },
  { category: "Fruit", name: "Orange", value: 40 },
  { category: "Vegetable", name: "Broccoli", value: 25 }
];

// গ্রুপিং এবং তারপর সোর্টিং
const groupedAndSortedData = d3.group(data, d => d.category);

groupedAndSortedData.forEach((values, key) => {
  // প্রতিটি গ্রুপের মধ্যে সোর্টিং
  values.sort((a, b) => d3.ascending(a.value, b.value));
});

console.log(groupedAndSortedData);

আউটপুট:

Map {
  "Fruit" => [
    { "category": "Fruit", "name": "Banana", "value": 10 },
    { "category": "Fruit", "name": "Apple", "value": 30 },
    { "category": "Fruit", "name": "Orange", "value": 40 }
  ],
  "Vegetable" => [
    { "category": "Vegetable", "name": "Carrot", "value": 20 },
    { "category": "Vegetable", "name": "Broccoli", "value": 25 }
  ]
}

এখানে, ডেটা প্রথমে category দ্বারা গ্রুপ করা হয়েছে এবং তারপর প্রতিটি গ্রুপের মধ্যে value কীর উপর ভিত্তি করে সোর্ট করা হয়েছে।

D3.js-এ ডেটা সোর্টিং এবং গ্রুপিং খুবই গুরুত্বপূর্ণ টুল। d3.sort(), d3.nest(), এবং d3.group() ব্যবহার করে আপনি ডেটাকে সহজেই সোর্ট এবং গ্রুপ করতে পারেন। এই ফিচারগুলো আপনাকে ডেটার মধ্যে প্যাটার্ন খুঁজে বের করতে এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও অর্থপূর্ণ এবং কার্যকরী করে তুলতে সাহায্য করে।