D3.js দিয়ে ডেটা ফিল্টার করা

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 আপনাকে ডেটা ভিজ্যুয়ালাইজেশনকে আরও মজবুত এবং ব্যবহারকারী-বান্ধব করতে সাহায্য করে।