D3.js ডেটা ভিজ্যুয়ালাইজেশনে ডেটা ফিল্টারিং (Filtering) এবং সোর্টিং (Sorting) অত্যন্ত গুরুত্বপূর্ণ। যখন আপনার কাছে একটি বড় ডেটাসেট থাকে, তখন শুধুমাত্র কিছু নির্দিষ্ট ডেটা পয়েন্ট বা একটি নির্দিষ্ট ক্রম অনুসারে ডেটা সাজানোর প্রয়োজন হয়। D3.js এই কাজগুলো করার জন্য কাস্টম ফাংশন ব্যবহার করে, যার মাধ্যমে আপনি আপনার ডেটা আরও কার্যকরভাবে বিশ্লেষণ এবং প্রদর্শন করতে পারবেন।
১. Data Filtering
ফিল্টারিং হল একটি প্রক্রিয়া, যার মাধ্যমে একটি ডেটা সেটের মধ্যে নির্দিষ্ট শর্ত পূরণ করা উপাদানগুলো নির্বাচন করা হয়। D3.js এ .filter() মেথড ব্যবহার করে ডেটা ফিল্টার করা হয়, যা একটি কাস্টম শর্ত (যেমন, একটি মান বা সীমার মধ্যে থাকা) অনুযায়ী ডেটা নির্বাচন করতে সহায়তা করে।
উদাহরণ: ডেটা ফিল্টারিং
ধরা যাক, আমাদের একটি ডেটাসেট রয়েছে, এবং আমরা শুধুমাত্র এমন তথ্যগুলো দেখতে চাই যেখানে age ৩০ এর বেশি।
const dataset = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 35 },
{ name: "Charlie", age: 40 },
{ name: "David", age: 28 }
];
// ফিল্টারিং: age 30 এর বেশি হওয়া ইউজারদের নির্বাচন করা
const filteredData = dataset.filter(d => d.age > 30);
console.log(filteredData);
এখানে, .filter() মেথডের মাধ্যমে শুধুমাত্র age > 30 শর্ত পূর্ণকারী ডেটা রিটার্ন করা হবে।
আউটপুট:
[
{ name: "Bob", age: 35 },
{ name: "Charlie", age: 40 }
]
২. Data Sorting
সোর্টিং হল ডেটাকে একটি নির্দিষ্ট ক্রমে সাজানোর প্রক্রিয়া। D3.js এ .sort() মেথড ব্যবহার করে ডেটা সাজানো হয়। সোর্টিংয়ের মাধ্যমে আপনি আলফাবেটিক্যাল বা সংখ্যা অনুযায়ী ডেটা সাজাতে পারবেন।
উদাহরণ: ডেটা সোর্টিং
ধরা যাক, আমাদের একই ডেটাসেট আছে এবং আমরা চাচ্ছি age এর ভিত্তিতে ডেটা সাজাতে।
// ডেটা সোর্টিং: age এর ওপর ভিত্তি করে সত্ত্বা সাজানো
const sortedData = dataset.sort((a, b) => a.age - b.age);
console.log(sortedData);
এখানে, .sort() মেথডটি age এর ওপর ভিত্তি করে ডেটা ছোট থেকে বড় ক্রমে সাজাবে।
আউটপুট:
[
{ name: "Alice", age: 25 },
{ name: "David", age: 28 },
{ name: "Bob", age: 35 },
{ name: "Charlie", age: 40 }
]
যদি আপনি বড় থেকে ছোট ক্রমে সোর্ট করতে চান, তাহলে সোজা b.age - a.age করে দিতে হবে।
// ডেটা সোর্টিং: age এর ওপর ভিত্তি করে বড় থেকে ছোট
const sortedDataDesc = dataset.sort((a, b) => b.age - a.age);
console.log(sortedDataDesc);
আউটপুট:
[
{ name: "Charlie", age: 40 },
{ name: "Bob", age: 35 },
{ name: "David", age: 28 },
{ name: "Alice", age: 25 }
]
৩. Custom Sorting Functions
আপনি চাইলে কাস্টম সোর্টিং ফাংশন তৈরি করতে পারেন, যা কোনো নির্দিষ্ট ক্রমে ডেটাকে সাজাবে। এই ফাংশনগুলো সাধারণত বিভিন্ন প্রকারের তুলনা (comparison) অপারেটর ব্যবহার করে ডেটাকে সাজায়।
উদাহরণ: আলফাবেটিক্যাল সোর্টিং
ধরা যাক, আমাদের কাছে একটি নামের তালিকা রয়েছে, এবং আমরা আলফাবেটিক্যালভাবে সেগুলো সাজাতে চাই।
const nameDataset = [
{ name: "Charlie", age: 40 },
{ name: "Alice", age: 25 },
{ name: "David", age: 28 },
{ name: "Bob", age: 35 }
];
// কাস্টম সোর্টিং ফাংশন: নামের ভিত্তিতে সোজা (A-Z) সাজানো
const sortedByName = nameDataset.sort((a, b) => a.name.localeCompare(b.name));
console.log(sortedByName);
আউটপুট:
[
{ name: "Alice", age: 25 },
{ name: "Bob", age: 35 },
{ name: "Charlie", age: 40 },
{ name: "David", age: 28 }
]
এখানে localeCompare() মেথডটি ব্যবহার করা হয়েছে, যা স্ট্রিংয়ের আলফাবেটিক্যাল অর্ডারে তুলনা করতে সহায়তা করে।
৪. কাস্টম ফিল্টারিং এবং সোর্টিং একত্রে ব্যবহার
অনেক সময়, ডেটাকে একসাথে ফিল্টার এবং সোর্ট করার প্রয়োজন হতে পারে। D3.js এ ফিল্টার এবং সোর্ট একত্রে ব্যবহার করা খুবই সহজ। নিচে একটি উদাহরণ দেওয়া হলো যেখানে আমরা প্রথমে ডেটা ফিল্টার করি এবং তারপর সেই ডেটা সঠিক ক্রমে সাজাই।
উদাহরণ: ফিল্টারিং এবং সোর্টিং একত্রে
const dataset = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 35 },
{ name: "Charlie", age: 40 },
{ name: "David", age: 28 }
];
// ফিল্টারিং (age > 30) এবং তারপর সোর্টিং (age এর ওপর)
const filteredAndSortedData = dataset
.filter(d => d.age > 30)
.sort((a, b) => a.age - b.age);
console.log(filteredAndSortedData);
আউটপুট:
[
{ name: "Bob", age: 35 },
{ name: "Charlie", age: 40 }
]
এখানে, প্রথমে আমরা age > 30 শর্ত দিয়ে ডেটা ফিল্টার করেছি, তারপর সেই ফিল্টার করা ডেটা age এর ওপর ভিত্তি করে ছোট থেকে বড় ক্রমে সাজানো হয়েছে।
D3.js এ ডেটা ফিল্টারিং এবং সোর্টিং করার জন্য কাস্টম ফাংশন ব্যবহার করা খুবই সহজ এবং শক্তিশালী। আপনি .filter() এবং .sort() মেথড ব্যবহার করে ডেটা ফিল্টার এবং সাজাতে পারবেন, এবং কাস্টম শর্ত বা তুলনা ফাংশন ব্যবহার করে খুবই সুনির্দিষ্টভাবে ডেটাকে নিয়ন্ত্রণ করতে পারবেন। এই কৌশলগুলো ব্যবহার করে আপনি আপনার ডেটাকে আরো কার্যকরভাবে বিশ্লেষণ এবং উপস্থাপন করতে পারবেন।
Read more
