DC.js এবং Crossfilter একসাথে ব্যবহৃত হয় ডেটা ভিজ্যুয়ালাইজেশন এবং বিশ্লেষণে। Crossfilter একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা বড় ডেটাসেটের দ্রুত ফিল্টারিং এবং গ্রুপিংয়ে ব্যবহৃত হয়। DC.js ব্যবহারকারীকে ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়তা করে, যেখানে Crossfilter ডেটাকে ফিল্টার এবং গ্রুপ করতে ব্যবহৃত হয়।
এখানে আমরা DC.js এবং Crossfilter ব্যবহার করে ডেটা ফিল্টার করার প্রক্রিয়া আলোচনা করব।
Crossfilter দিয়ে ডেটা ফিল্টার করা
Crossfilter এর ধারণা
- ডাইমেনশন (Dimension): Crossfilter ডেটার উপর ভিত্তি করে একটি বা একাধিক ডাইমেনশন তৈরি করতে সক্ষম, যার মাধ্যমে ফিল্টারিং এবং গ্রুপিং করা যায়।
- গ্রুপ (Group): Crossfilter ডেটাকে বিভিন্ন ক্যাটেগরিতে গ্রুপ করতে এবং তাদের উপর গাণিতিক পরিমাপ (যেমন যোগফল, গড়) পরিচালনা করতে পারে।
- ফিল্টার: ফিল্টার ব্যবহার করে ডেটার নির্দিষ্ট অংশ নির্বাচন করা হয়, যা পরে গ্রাফ বা চার্টে প্রদর্শিত হয়।
উদাহরণ: Crossfilter দিয়ে DC.js ডেটা ফিল্টার করা
এখানে একটি সাধারণ উদাহরণ দেওয়া হচ্ছে, যেখানে DC.js এবং Crossfilter ব্যবহার করে ডেটা ফিল্টার করা হয়েছে এবং ফলস্বরূপ একটি চার্ট তৈরি করা হয়েছে।
১. ডেটাসেট তৈরি করা
const data = [
{ category: "A", value: 30, date: "2023-01-01" },
{ category: "B", value: 50, date: "2023-02-01" },
{ category: "A", value: 70, date: "2023-03-01" },
{ category: "C", value: 20, date: "2023-01-01" },
{ category: "B", value: 40, date: "2023-02-01" },
{ category: "C", value: 60, date: "2023-03-01" }
];
এখানে একটি data ডেটাসেট তৈরি করা হয়েছে, যেখানে প্রতিটি অবজেক্টের মধ্যে category, value, এবং date ফিল্ড রয়েছে।
২. Crossfilter সেটআপ
Crossfilter ব্যবহার করে ডেটার ডাইমেনশন এবং গ্রুপ তৈরি করা হয়।
const ndx = crossfilter(data);
// category অনুযায়ী ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// value অনুযায়ী গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
এখানে categoryDimension এর মাধ্যমে category ফিল্ড অনুযায়ী ডেটা ফিল্টার করা হয়েছে এবং categoryGroup এর মাধ্যমে value এর যোগফল (sum) হিসাব করা হয়েছে।
৩. DC.js চার্ট তৈরি
DC.js ব্যবহার করে একটি চার্ট তৈরি করা হবে এবং এতে ফিল্টার প্রয়োগ করা হবে।
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension) // ডাইমেনশন হিসেবে category ব্যবহার
.group(categoryGroup) // গ্রুপ হিসেবে categoryGroup ব্যবহার
.x(d3.scaleBand()) // X-অক্ষে স্কেল
.xUnits(dc.units.ordinal)
.render();
এখানে barChart ব্যবহার করে একটি বারের চার্ট তৈরি করা হয়েছে যেখানে categoryDimension এবং categoryGroup ব্যবহার করা হয়েছে।
৪. ডেটা ফিল্টার করা
DC.js এবং Crossfilter এর মাধ্যমে ডেটা ফিল্টার করতে filter() ফাংশন ব্যবহার করা হয়। উদাহরণস্বরূপ, আমরা category A এর ডেটা ফিল্টার করতে পারি।
// ক্যাটেগরি "A" এর ডেটা ফিল্টার করা
categoryDimension.filter("A");
dc.renderAll(); // ফিল্টার করা ডেটা রেন্ডার করতে
এখানে filter("A") ফাংশন ব্যবহার করা হয়েছে যা শুধুমাত্র ক্যাটেগরি "A" এর ডেটাকে সিলেক্ট করবে। তারপর dc.renderAll() ব্যবহার করে সব চার্ট রেন্ডার করা হয়েছে।
ফিল্টার ক্লিয়ার করা
ফিল্টার ক্লিয়ার করতে filterAll() ফাংশন ব্যবহার করা হয়।
// সমস্ত ফিল্টার ক্লিয়ার করা
categoryDimension.filterAll();
dc.renderAll();
এটি সমস্ত ফিল্টার মুছে ফেলবে এবং সমস্ত ডেটা আবার চার্টে প্রদর্শিত হবে।
৫. সম্পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js with Crossfilter</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/5.0.3/dc.min.css">
</head>
<body>
<h1>DC.js and Crossfilter Example</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30, date: "2023-01-01" },
{ category: "B", value: 50, date: "2023-02-01" },
{ category: "A", value: 70, date: "2023-03-01" },
{ category: "C", value: 20, date: "2023-01-01" },
{ category: "B", value: 40, date: "2023-02-01" },
{ category: "C", value: 60, date: "2023-03-01" }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// category অনুযায়ী ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// category গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension) // category dimension ব্যবহার
.group(categoryGroup) // category group ব্যবহার
.x(d3.scaleBand()) // X-অক্ষে স্কেল
.xUnits(dc.units.ordinal)
.render();
// ক্যাটেগরি "A" ফিল্টার করা
categoryDimension.filter("A");
dc.renderAll(); // ফিল্টার করা ডেটা রেন্ডার করতে
// ফিল্টার ক্লিয়ার করা
categoryDimension.filterAll();
dc.renderAll();
</script>
</body>
</html>
৬. DC.js এবং Crossfilter এর সুবিধা
- ইন্টারঅ্যাকটিভ ডেটা ফিল্টারিং: DC.js এবং Crossfilter একসাথে ব্যবহৃত হলে ডেটার বিভিন্ন অংশ ইন্টারঅ্যাকটিভভাবে ফিল্টার করা যায়।
- ডেটা গ্রুপিং: Crossfilter ডেটা গ্রুপিং এবং পরিমাপ (যেমন যোগফল, গড়) সহজ করে।
- রিয়েল-টাইম আপডেট: Crossfilter রিয়েল-টাইম ডেটা আপডেট করার ক্ষমতা রাখে, যা DC.js এর মাধ্যমে সঠিকভাবে ভিজ্যুয়ালাইজ করা যায়।
সারাংশ
- DC.js এবং Crossfilter ব্যবহারের মাধ্যমে সহজেই ডেটা ফিল্টার এবং গ্রুপ করা যায়।
- filter() ফাংশন ব্যবহার করে নির্দিষ্ট ডেটা ফিল্টার করা হয় এবং filterAll() দ্বারা সমস্ত ফিল্টার মুছে ফেলা যায়।
- DC.js ব্যবহার করে ফিল্টার করা ডেটা রেন্ডার করা হয় এবং গ্রাফ বা চার্টে প্রদর্শিত হয়।
এই পদ্ধতিতে আপনি DC.js এবং Crossfilter ব্যবহার করে ডেটা ফিল্টার এবং গ্রুপ করতে পারবেন, এবং ডেটার উপর বিভিন্ন ধরনের ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।
Read more
