ডেটা ফিল্টারিং এবং সোর্টিং

ডেটা ফিল্টারিং এবং সোর্টিং হল এমন গুরুত্বপূর্ণ প্রক্রিয়া যা ডেটাকে আরও প্রাসঙ্গিক ও পরিচালনাযোগ্য করে তোলে। D3.js ডেটার উপর কার্যকর ফিল্টার এবং সোর্টিং অপারেশন চালানোর জন্য শক্তিশালী টুল সরবরাহ করে, যা ভিজ্যুয়ালাইজেশন তৈরি করার সময় ডেটাকে সহজে পরিচালনা করতে সাহায্য করে।

১. ডেটা ফিল্টারিং (Data Filtering)

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

D3.js এ ডেটা ফিল্টারিং

D3.js-এ filter() মেথড ব্যবহার করে ডেটা ফিল্টার করা যায়। এটি একটি কন্ডিশন বা ফাংশন নেয়, এবং কন্ডিশন পূর্ণ হলে সেসব ডেটা রেখে দেয়।

উদাহরণ: ডেটা ফিল্টারিং

// ডেটা সেট
const data = [
  {name: "A", value: 30},
  {name: "B", value: 80},
  {name: "C", value: 45},
  {name: "D", value: 60},
  {name: "E", value: 20}
];

// ডেটা ফিল্টার করা (value 50 এর বেশি)
const filteredData = data.filter(d => d.value > 50);

console.log(filteredData);

ব্যাখ্যা:

• filter() মেথড ব্যবহার করে value ৫০ এর বেশি এমন ডেটা নির্বাচন করা হয়েছে।
• ফলস্বরূপ, B, D এবং C নামক অবজেক্টগুলো নির্বাচিত হবে, যাদের value ৫০ এর বেশি।

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

ডেটা সোর্টিং হল একটি প্রক্রিয়া যেখানে ডেটাকে একটি নির্দিষ্ট ক্রমে সাজানো হয়, যেমন বড় থেকে ছোট বা ছোট থেকে বড়। D3.js এ sort() মেথড ব্যবহৃত হয় ডেটাকে নির্দিষ্ট ক্রমে সাজাতে।

D3.js এ ডেটা সোর্টিং

D3.js-এ sort() মেথড ব্যবহার করা হয় যা ডেটার মধ্যে একটি ক্রম অনুসারে সাজাতে সহায়তা করে।

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

// ডেটা সেট
const data = [
  {name: "A", value: 30},
  {name: "B", value: 80},
  {name: "C", value: 45},
  {name: "D", value: 60},
  {name: "E", value: 20}
];

// ডেটা সোজা ক্রমে সোর্ট করা (value অনুযায়ী)
const sortedDataAsc = data.sort((a, b) => a.value - b.value);

// ডেটা উল্টো ক্রমে সোর্ট করা (value অনুযায়ী)
const sortedDataDesc = data.sort((a, b) => b.value - a.value);

console.log("Ascending Order:", sortedDataAsc);
console.log("Descending Order:", sortedDataDesc);

ব্যাখ্যা:

• sort() মেথডের মধ্যে দুটি অবজেক্টের তুলনা করার জন্য একটি তুলনা ফাংশন দেওয়া হয়েছে।
• ascending order (ছোট থেকে বড়) এবং descending order (বড় থেকে ছোট) উভয় ক্ষেত্রেই সঠিকভাবে ডেটা সাজানো হয়েছে।

৩. ডেটা ফিল্টারিং এবং সোর্টিং একত্রে ব্যবহার

আপনি একই সময়ে ডেটা ফিল্টার এবং সোর্টিং একসাথে ব্যবহার করতে পারেন, যা ডেটার মান এবং শর্ত অনুসারে আরও স্পষ্ট এবং কার্যকরী ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক।

উদাহরণ: ফিল্টারিং এবং সোর্টিং একসাথে

// ডেটা সেট
const data = [
  {name: "A", value: 30},
  {name: "B", value: 80},
  {name: "C", value: 45},
  {name: "D", value: 60},
  {name: "E", value: 20}
];

// ডেটা ফিল্টার এবং সোর্ট করা
const filteredAndSortedData = data
  .filter(d => d.value > 30)  // value 30 এর বেশি
  .sort((a, b) => a.value - b.value);  // ascending order

console.log(filteredAndSortedData);

ব্যাখ্যা:

• প্রথমে filter() মেথড ব্যবহার করে value ৩০ এর বেশি এমন ডেটা নির্বাচন করা হয়েছে।
• তারপর sort() মেথড ব্যবহার করে নির্বাচিত ডেটাকে সোজা ক্রমে সাজানো হয়েছে।

ফলস্বরূপ, A, C, এবং D ডেটাগুলো থাকবে, যেগুলি সোজা ক্রমে সাজানো হবে।

৪. D3.js এ ডেটা সিলেকশন এবং ফিল্টারিং

D3.js-এ selection ও data binding এর মাধ্যমে সরাসরি DOM এ ডেটা ফিল্টারিং এবং সোর্টিং কার্যকরভাবে করা যায়। আপনি ডেটার উপর ফিল্টার প্রয়োগ করে, সেই অনুযায়ী DOM এলিমেন্টগুলোর পরিবর্তন করতে পারেন।

উদাহরণ: DOM এ ফিল্টার এবং সোর্টিং

// ডেটা সেট
const data = [
  {name: "A", value: 30},
  {name: "B", value: 80},
  {name: "C", value: 45},
  {name: "D", value: 60},
  {name: "E", value: 20}
];

// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
  .attr("width", 300)
  .attr("height", 200);

// ডেটা ফিল্টার এবং সোর্ট করা
const filteredSortedData = data
  .filter(d => d.value > 30)
  .sort((a, b) => a.value - b.value);

// সিলেকশন এবং DOM এ ডেটা রেন্ডার করা
svg.selectAll("circle")
  .data(filteredSortedData)
  .enter().append("circle")
  .attr("cx", (d, i) => (i + 1) * 60)
  .attr("cy", 100)
  .attr("r", d => d.value / 2)
  .attr("fill", "teal");

ব্যাখ্যা:

1. SVG ক্যানভাসে সিলেকশন করা হয়েছে, যেখানে ডেটা অ্যারে থেকে value ৩০ এর বেশি এবং ascending order অনুযায়ী সিলেক্ট করা ডেটা ব্যবহার করা হয়েছে।
2. circle এলিমেন্টের মাধ্যমে ডেটার মানের ভিত্তিতে সাইজ এবং পজিশন নির্ধারণ করা হয়েছে।

ডেটা ফিল্টারিং এবং ডেটা সোর্টিং D3.js এ খুবই শক্তিশালী পদ্ধতি, যা ডেটা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশনের ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে। filter() এবং sort() মেথডগুলি সহজে ডেটা প্রস্তুত করতে সাহায্য করে এবং DOM বা SVG উপাদানগুলির মাধ্যমে সেগুলি প্রদর্শন করা যায়। এই প্রক্রিয়াগুলি ফিল্টার করা ডেটার ওপর ভিত্তি করে ইন্টারঅ্যাকটিভ ও সঠিক ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক।

D3.js ব্যবহার করে আপনি খুব সহজেই ডেটা ফিল্টার করতে পারেন এবং এটি আপনার ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং কাস্টমাইজযোগ্য করতে সাহায্য করে। ডেটা ফিল্টার করার মাধ্যমে আপনি নির্দিষ্ট ডেটা পয়েন্টগুলোকে সিলেক্ট করতে পারেন, যেমন কোন নির্দিষ্ট শর্তের ভিত্তিতে ডেটা দেখানো বা সরিয়ে ফেলা। এখানে আমরা D3.js-এ ডেটা ফিল্টার করার প্রক্রিয়া এবং বিভিন্ন পদ্ধতি আলোচনা করবো।

১. ডেটা ফিল্টারিং কি?

ডেটা ফিল্টারিং হল একটি প্রক্রিয়া যেখানে নির্দিষ্ট শর্তের ভিত্তিতে ডেটা বাছাই করা হয়। উদাহরণস্বরূপ, আপনি এমন ডেটা দেখতে পারেন যেগুলোর মান একটি নির্দিষ্ট রেঞ্জের মধ্যে থাকে বা কোনো বিশেষ শর্ত পূর্ণ করে। D3.js এ filter() মেথড ব্যবহার করে খুব সহজে ডেটা ফিল্টার করা যায়।

২. D3.js দিয়ে ডেটা ফিল্টার করার মূল পদ্ধতি

D3.js-এ ডেটা ফিল্টার করার জন্য সাধারণত filter() মেথড ব্যবহার করা হয়। এই মেথডটি ডেটা সেটের উপর একটি শর্ত প্রয়োগ করে এবং সেই শর্ত পূর্ণকারী ডেটা পয়েন্টগুলোকে নির্বাচন করে।

২.১ filter() মেথডের ব্যবহার

filter() মেথডটি একটি ফাংশন নেয় যা প্রতিটি ডেটা পয়েন্টের জন্য শর্ত পরীক্ষা করে এবং শুধুমাত্র শর্ত পূর্ণ করা পয়েন্টগুলোকে ফিল্টার করে রাখে।

let data = [
  { name: "John", age: 28 },
  { name: "Jane", age: 35 },
  { name: "Jim", age: 22 },
  { name: "Jill", age: 29 }
];

// age 30 এর কম এমন ডেটা ফিল্টার করা
let filteredData = data.filter(d => d.age < 30);
console.log(filteredData);

এই উদাহরণে, filter() মেথড age 30 এর কম এমন ডেটা নির্বাচন করবে, এবং filteredData-এ সেগুলোর তথ্য থাকবে।

৩. D3.js এ ডেটা ফিল্টারিং এবং ভিজ্যুয়ালাইজেশন

D3.js এ ডেটা ফিল্টার করার মাধ্যমে আপনি ভিজ্যুয়ালাইজেশনগুলোকে আরও কাস্টমাইজ করতে পারেন, যেমন বিভিন্ন শর্তের ভিত্তিতে চার্টের কিছু এলিমেন্ট প্রদর্শন বা সরানো।

৩.১ উদাহরণ: বার চার্টে ডেটা ফিল্টার করা

এখানে একটি সাধারণ উদাহরণ দেখানো হচ্ছে যেখানে D3.js দিয়ে একটি বার চার্টে ডেটা ফিল্টার করা হয়েছে। এখানে, age এর ভিত্তিতে আমরা বারগুলোকে ফিল্টার করবো।

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

// প্রাথমিক ডেটা
let data = [
  { name: "John", age: 28 },
  { name: "Jane", age: 35 },
  { name: "Jim", age: 22 },
  { name: "Jill", age: 29 }
];

// x এবং y স্কেল তৈরি
const xScale = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([0, 500])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.age)])
  .range([300, 0]);

// ফিল্টার করা ডেটা (age < 30)
let filteredData = data.filter(d => d.age < 30);

// বার চার্ট তৈরি করা
svg.selectAll("rect")
  .data(filteredData)
  .enter().append("rect")
  .attr("x", d => xScale(d.name))
  .attr("y", d => yScale(d.age))
  .attr("width", xScale.bandwidth())
  .attr("height", d => 300 - yScale(d.age))
  .attr("fill", "steelblue");

// x এবং y অক্ষ তৈরি করা
svg.append("g")
  .attr("transform", "translate(0,300)")
  .call(d3.axisBottom(xScale));

svg.append("g")
  .call(d3.axisLeft(yScale));

এখানে, আমরা data.filter(d => d.age < 30) দিয়ে age 30 এর কম এমন ডেটা ফিল্টার করেছি এবং সেগুলো দিয়ে বার চার্ট তৈরি করেছি।

৪. ইন্টারঅ্যাকটিভ ফিল্টারিং

D3.js-এ আপনি ইন্টারঅ্যাকটিভ ফিল্টারিংও করতে পারেন, যেমন একটি বাটন ক্লিক করে ডেটা ফিল্টার করা বা অন্য কোনো ইভেন্টের মাধ্যমে ডেটা পরিবর্তন করা। এটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক।

৪.১ উদাহরণ: বাটন ক্লিক করে ডেটা ফিল্টার করা

// বাটন তৈরি
const button = d3.select("body").append("button")
  .text("Show Age < 30");

// বাটনে ক্লিক করলে ডেটা ফিল্টার এবং আপডেট করা
button.on("click", function() {
  let filteredData = data.filter(d => d.age < 30);

  // SVG-এর পুরনো বার মুছে ফেলা
  svg.selectAll("rect").remove();

  // নতুন ফিল্টার করা ডেটা দিয়ে বার চার্ট আপডেট করা
  svg.selectAll("rect")
    .data(filteredData)
    .enter().append("rect")
    .attr("x", d => xScale(d.name))
    .attr("y", d => yScale(d.age))
    .attr("width", xScale.bandwidth())
    .attr("height", d => 300 - yScale(d.age))
    .attr("fill", "steelblue");
});

এখানে, যখন ইউজার "Show Age < 30" বাটনে ক্লিক করবেন, তখন বার চার্ট আপডেট হয়ে কেবল age ৩০ এর কম ডেটা দেখাবে।

৫. বিভিন্ন শর্তের উপর ভিত্তি করে ডেটা ফিল্টার করা

D3.js-এ আপনি একাধিক শর্তের ভিত্তিতে ডেটা ফিল্টার করতে পারেন। উদাহরণস্বরূপ, যদি আপনি চান যে শুধুমাত্র age ৩০ এর নিচে এবং name "John" না হওয়া ডেটাগুলো দেখানো হোক, তাহলে আপনি দুটি শর্ত দিয়ে ডেটা ফিল্টার করতে পারেন:

// একাধিক শর্তে ডেটা ফিল্টার করা
let filteredData = data.filter(d => d.age < 30 && d.name !== "John");
console.log(filteredData);

এটি age ৩০ এর নিচে এবং name "John" না হওয়ার ডেটাগুলো ফিল্টার করবে।

D3.js-এ ডেটা ফিল্টারিং একটি গুরুত্বপূর্ণ এবং শক্তিশালী টুল যা আপনাকে ভিজ্যুয়ালাইজেশনে ইন্টারঅ্যাকটিভিটি এবং কাস্টমাইজেশন যোগ করতে সহায়ক। আপনি filter() মেথড ব্যবহার করে ডেটা সহজেই ফিল্টার করতে পারেন, এবং multiple conditions বা interactive filtering এর মাধ্যমে আরও উন্নত ফিল্টারিং ব্যবস্থা তৈরি করতে পারেন। D3.js আপনাকে ডেটা ভিজ্যুয়ালাইজেশনকে আরও মজবুত এবং ব্যবহারকারী-বান্ধব করতে সাহায্য করে।

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() ব্যবহার করে আপনি ডেটাকে সহজেই সোর্ট এবং গ্রুপ করতে পারেন। এই ফিচারগুলো আপনাকে ডেটার মধ্যে প্যাটার্ন খুঁজে বের করতে এবং ডেটা ভিজ্যুয়ালাইজেশনকে আরও অর্থপূর্ণ এবং কার্যকরী করে তুলতে সাহায্য করে।

D3.js একটি শক্তিশালী টুল যা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে ডেটা পরিবর্তন এবং ভিজ্যুয়ালাইজেশন ডাইনামিকভাবে আপডেট করার সুযোগ প্রদান করে। এর মাধ্যমে ব্যবহারকারীরা বিভিন্ন ইনপুট, যেমন মাউস কন্ট্রোল, কিবোর্ড, বা স্লাইডার ব্যবহার করে ডেটা পরিবর্তন করতে পারে এবং সেই পরিবর্তনগুলি ভিজ্যুয়ালাইজেশনেও প্রতিফলিত হয়। D3.js এই ধরণের ইন্টারঅ্যাকশনের জন্য দুর্দান্ত ফিচার প্রদান করে, যেমন drag, click, mouseover, keydown ইত্যাদি ইভেন্ট হ্যান্ডলিং।

১. User Interaction এর ধরন

D3.js এর মাধ্যমে বিভিন্ন ধরনের ইন্টারঅ্যাকশন তৈরি করা যেতে পারে, যা ডেটা পরিবর্তন এবং ভিজ্যুয়ালাইজেশন পরিবর্তন করতে সহায়ক হয়। এর মধ্যে কয়েকটি সাধারণ ইন্টারঅ্যাকশন হলো:

• Click Interaction: কোন একটি এলিমেন্ট বা বাটনে ক্লিক করলে ডেটা পরিবর্তন বা আপডেট হয়।
• Mouseover Interaction: কোন একটি এলিমেন্টে মাউস হোভার করলে তার মান বা ভিজ্যুয়াল উপস্থাপন আপডেট হয়।
• Slider Interaction: স্লাইডারের মাধ্যমে ডেটার মান পরিবর্তন করা হয় এবং তা ভিজ্যুয়ালাইজেশনে প্রতিফলিত হয়।
• Drag Interaction: ব্যবহারকারী কিছু এলিমেন্ট ড্র্যাগ করে এক স্থান থেকে অন্য স্থানে নিয়ে যেতে পারে এবং সেই অনুযায়ী ডেটা পরিবর্তিত হয়।

২. Click Interaction দিয়ে ডেটা পরিবর্তন

উদাহরণ হিসেবে একটি বার চার্ট ব্যবহার করে দেখানো যাক, যেখানে ক্লিকের মাধ্যমে ডেটার মান পরিবর্তিত হবে।

২.১ Click Interaction উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Interaction in D3.js</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
</head>
<body>

    <svg width="500" height="300"></svg>

    <script>
        const svg = d3.select("svg");
        const data = [30, 80, 45, 60, 20];

        const width = 500;
        const height = 300;

        const xScale = d3.scaleBand()
            .domain(d3.range(data.length))
            .range([0, width])
            .padding(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => xScale(i))
            .attr("y", d => yScale(d))
            .attr("width", xScale.bandwidth())
            .attr("height", d => height - yScale(d))
            .on("click", function(event, d) {
                // Click করার পর ডেটার মান পরিবর্তন
                const newData = Math.random() * 100;
                const i = d3.select(this).data()[0]; // যেই বারের উপর ক্লিক করা হয়েছে
                data[i] = newData;  // ডেটার মান আপডেট

                // বার আপডেট করা
                d3.select(this)
                    .transition()
                    .duration(500)
                    .attr("y", yScale(newData))
                    .attr("height", height - yScale(newData));  // নতুন উচ্চতা

                // yScale আপডেট করা
                yScale.domain([0, d3.max(data)]);

                // বার চার্ট পুনরায় আঁকা
                svg.selectAll("rect")
                    .data(data)
                    .transition()
                    .duration(500)
                    .attr("y", d => yScale(d))
                    .attr("height", d => height - yScale(d));
            });
    </script>

</body>
</html>

ব্যাখ্যা:

• যখন ব্যবহারকারী একটি বার (rect) তে ক্লিক করবে, তখন ঐ বারটির ডেটা একটি র্যান্ডম মান দিয়ে আপডেট হবে।
• on("click", function(event, d)) ইভেন্ট হ্যান্ডলার দিয়ে ক্লিক ইন্টারঅ্যাকশন ট্রিগার করা হয়েছে।
• আপডেট হওয়া ডেটা এবং ভিজ্যুয়াল প্রতিফলনটি স্মুথ ট্রানজিশনের মাধ্যমে করা হয়েছে।

৩. Mouseover Interaction দিয়ে ডেটা পরিবর্তন

mouseover ইভেন্ট ব্যবহার করে, ব্যবহারকারী যখন কোন এলিমেন্টের উপর মাউস রাখবে, তখন তার ডেটা বা ভিজ্যুয়াল রিপ্রেজেন্টেশন পরিবর্তিত হবে। এই ধরনের ইন্টারঅ্যাকশন সাধারণত টুলটিপ বা হাইলাইট করার জন্য ব্যবহৃত হয়।

৩.১ Mouseover Interaction উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouseover Interaction in D3.js</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
        .highlight {
            fill: orange;
        }
    </style>
</head>
<body>

    <svg width="500" height="300"></svg>

    <script>
        const svg = d3.select("svg");
        const data = [30, 80, 45, 60, 20];

        const width = 500;
        const height = 300;

        const xScale = d3.scaleBand()
            .domain(d3.range(data.length))
            .range([0, width])
            .padding(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

        svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => xScale(i))
            .attr("y", d => yScale(d))
            .attr("width", xScale.bandwidth())
            .attr("height", d => height - yScale(d))
            .on("mouseover", function(event, d) {
                d3.select(this)
                    .attr("class", "highlight");  // হাইলাইট করা
            })
            .on("mouseout", function(event, d) {
                d3.select(this)
                    .attr("class", "bar");  // মূল রঙে ফিরিয়ে আনা
            });
    </script>

</body>
</html>

ব্যাখ্যা:

• যখন মাউস একটি বার এলিমেন্টে আসে, তখন তার রঙ পরিবর্তিত হয়ে highlight ক্লাসে চলে যায়, এবং মাউস আউট হলে মূল রঙে ফিরে আসে।

৪. Slider Interaction দিয়ে ডেটা পরিবর্তন

input[type="range"] (Slider) ব্যবহার করে ডেটা পরিবর্তন করা যেতে পারে এবং সেই পরিবর্তনগুলি ভিজ্যুয়ালাইজেশনকে আপডেট করা যায়।

৪.১ Slider Interaction উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Interaction in D3.js</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .bar {
            fill: steelblue;
        }
    </style>
</head>
<body>

    <svg width="500" height="300"></svg>
    <input type="range" id="slider" min="10" max="100" value="30" />

    <script>
        const svg = d3.select("svg");
        const width = 500;
        const height = 300;

        const data = [30, 80, 45, 60, 20];

        const xScale = d3.scaleBand()
            .domain(d3.range(data.length))
            .range([0, width])
            .padding(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

        const bars = svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => xScale(i))
            .attr("y", d => yScale(d))
            .attr("width", xScale.bandwidth())
            .attr("height", d => height - yScale(d));

        d3.select("#slider").on("input", function() {
            const sliderValue = +this.value;
            data[0] = sliderValue;  // প্রথম বারটির ডেটা পরিবর্তন করা
            yScale.domain([0, d3.max(data)]);

            bars.data(data)
                .transition()
                .duration(500)
                .attr("y", d => yScale(d))
                .attr("height", d => height - yScale(d));  // নতুন মান অনুযায়ী আপডেট
        });
    </script>

</body>
</html>

ব্যাখ্যা:

• স্লাইডারের মান পরিবর্তন হলে প্রথম বারটির উচ্চতা আপডেট হবে।
• input[type="range"] এর মাধ্যমে ডেটার মান পরিবর্তন করে সেই অনুযায়ী চার্ট আপডেট হবে।

D3.js ব্যবহার করে ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব, যেখানে ব্যবহারকারীর ইনপুটের ভিত্তিতে ডেটা পরিবর্তিত হয় এবং ভিজ্যুয়ালাইজেশন আপডেট হয়। Click, mouseover, slider, drag ইত্যাদি ইন্টারঅ্যাকশনের মাধ্যমে ভিজ্যুয়াল উপস্থাপনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করা যায়, যা ইউজারের অভিজ্ঞতা উন্নত করতে সহায়ক।

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() মেথড ব্যবহার করে ডেটা ফিল্টার এবং সাজাতে পারবেন, এবং কাস্টম শর্ত বা তুলনা ফাংশন ব্যবহার করে খুবই সুনির্দিষ্টভাবে ডেটাকে নিয়ন্ত্রণ করতে পারবেন। এই কৌশলগুলো ব্যবহার করে আপনি আপনার ডেটাকে আরো কার্যকরভাবে বিশ্লেষণ এবং উপস্থাপন করতে পারবেন।