DC.js একটি শক্তিশালী লাইব্রেরি যা Crossfilter ব্যবহার করে মাল্টি-ডাইমেনশনাল ডেটা ফিল্টারিং এবং বিশ্লেষণ সহজ করে। এটি ব্যবহারকারীদের একাধিক ডেটা ডাইমেনশন (যেমন: ক্যাটেগরি, তারিখ, মূল্য ইত্যাদি) অনুযায়ী ডেটা ফিল্টার করতে দেয়। মাল্টি-ডাইমেনশনাল ফিল্টারিংয়ের মাধ্যমে আপনি একাধিক ফিল্টার একসাথে অ্যাপ্লাই করতে পারেন এবং ভিজ্যুয়ালাইজেশন বা ডেটা বিশ্লেষণে আরও গভীরতা পেতে পারেন।
এখানে আমরা দেখব DC.js ব্যবহার করে মাল্টি-ডাইমেনশনাল ডেটা ফিল্টারিং কীভাবে করা হয় এবং এটি কীভাবে ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ করে তোলে।
১. DC.js এবং Crossfilter দিয়ে মাল্টি-ডাইমেনশনাল ফিল্টারিং
Crossfilter এর মাধ্যমে আমরা একাধিক ডাইমেনশন এবং গ্রুপ তৈরি করতে পারি, এবং DC.js ব্যবহার করে সেই ডাইমেনশন অনুযায়ী ডেটা ফিল্টার করতে পারি। এই ফিল্টারিংয়ের মাধ্যমে, আপনি সহজে একাধিক ভিন্ন দিক থেকে ডেটা বিশ্লেষণ করতে পারেন।
এখানে একটি উদাহরণ দেওয়া হলো যেখানে মাল্টি-ডাইমেনশনাল ডেটা ফিল্টারিং এবং চার্টিং করা হয়েছে।
২. ডেটাসেট তৈরি
ধরা যাক আমাদের কাছে একটি ডেটাসেট আছে যা বিভিন্ন category, region, এবং value দ্বারা পরিমাপ করা হচ্ছে।
const data = [
{ category: "A", region: "North", value: 30 },
{ category: "A", region: "South", value: 50 },
{ category: "B", region: "North", value: 70 },
{ category: "B", region: "South", value: 20 },
{ category: "C", region: "North", value: 90 },
{ category: "C", region: "South", value: 60 }
];
এটি একটি সাধারণ ডেটাসেট যেখানে category, region, এবং value রয়েছে।
৩. Crossfilter সেটআপ
Crossfilter দিয়ে ডেটার ডাইমেনশন তৈরি এবং ফিল্টার করা যাবে। আমরা এখানে category, region, এবং value এর উপর ভিত্তি করে ডাইমেনশন তৈরি করব।
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const regionDimension = ndx.dimension(d => d.region);
// গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const regionGroup = regionDimension.group().reduceSum(d => d.value);
এখানে:
- categoryDimension ডেটাকে category এর উপর ভিত্তি করে গ্রুপ করবে।
- regionDimension ডেটাকে region এর উপর ভিত্তি করে গ্রুপ করবে।
৪. DC.js দিয়ে চার্ট তৈরি
এখন আমরা DC.js ব্যবহার করে বিভিন্ন চার্ট তৈরি করব যা category এবং region ডাইমেনশন অনুযায়ী ডেটাকে ফিল্টার করবে।
বার চার্ট (Bar Chart)
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand()) // এক্স-অক্ষের জন্য স্কেল
.xUnits(dc.units.ordinal)
.xAxisLabel("Category") // এক্স-অক্ষের লেবেল
.yAxisLabel("Value") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true); // গ্রিড লাইন যোগ করা
পাই চার্ট (Pie Chart)
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(400)
.height(300)
.dimension(regionDimension)
.group(regionGroup)
.renderLabel(true); // লেবেল প্রদর্শন
এখানে দুটি চার্ট তৈরি করা হয়েছে:
- Bar Chart যা category ডাইমেনশন অনুযায়ী ডেটা প্রদর্শন করবে।
- Pie Chart যা region ডাইমেনশন অনুযায়ী ডেটা প্রদর্শন করবে।
৫. মাল্টি-ডাইমেনশনাল ফিল্টারিং
এই চার্টগুলোর মধ্যে ইন্টারঅ্যাকশন তৈরি করার জন্য, আপনি DC.js এর filter() ফাংশন ব্যবহার করে একাধিক ফিল্টার একসাথে অ্যাপ্লাই করতে পারেন। উদাহরণস্বরূপ:
categoryDimension.filter("A"); // ক্যাটেগরি "A" ফিল্টার করা
regionDimension.filter("North"); // রিজিওন "North" ফিল্টার করা
এটি category এবং region এর উপর ফিল্টার প্রয়োগ করবে এবং সেই অনুযায়ী চার্ট আপডেট হবে।
ফিল্টার ক্লিয়ার করা
ফিল্টার ক্লিয়ার করতে filterAll() ফাংশন ব্যবহার করা হয়:
categoryDimension.filterAll(); // ক্যাটেগরি ফিল্টার ক্লিয়ার করা
regionDimension.filterAll(); // রিজিওন ফিল্টার ক্লিয়ার করা
৬. সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Multi-dimensional Filtering</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.5.7/crossfilter.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 Multi-dimensional Filtering</h1>
<div id="bar-chart"></div>
<div id="pie-chart"></div>
<script>
const data = [
{ category: "A", region: "North", value: 30 },
{ category: "A", region: "South", value: 50 },
{ category: "B", region: "North", value: 70 },
{ category: "B", region: "South", value: 20 },
{ category: "C", region: "North", value: 90 },
{ category: "C", region: "South", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const regionDimension = ndx.dimension(d => d.region);
// গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const regionGroup = regionDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Category")
.yAxisLabel("Value")
.renderHorizontalGridLines(true);
// DC.js পাই চার্ট
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(400)
.height(300)
.dimension(regionDimension)
.group(regionGroup)
.renderLabel(true);
// ফিল্টার প্রয়োগ
categoryDimension.filter("A");
regionDimension.filter("North");
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- মাল্টি-ডাইমেনশনাল ফিল্টারিং: Crossfilter দিয়ে একাধিক ডাইমেনশন তৈরি করা হয়, যেমন category, region, এবং value। প্রতিটি ডাইমেনশনের উপর গ্রুপিং এবং ফিল্টার করা যায়।
- DC.js চার্টিং: DC.js দিয়ে একাধিক ধরনের চার্ট (যেমন বার চার্ট, পাই চার্ট) তৈরি করা হয় যা Crossfilter এর ডাইমেনশন ও গ্রুপের উপর ভিত্তি করে ডেটা প্রদর্শন করে।
- ফিল্টারিং এবং ক্লিয়ারিং:
filter()এবংfilterAll()ফাংশন ব্যবহার করে ফিল্টারিং এবং ফিল্টার ক্লিয়ার করা যায়, যা চার্টগুলোর আপডেট পরিচালনা করে।
এটি একটি খুবই শক্তিশালী ফিচার যা আপনাকে একাধিক ভিন্ন দিক থেকে ডেটা বিশ্লেষণ করতে সাহায্য করে এবং DC.js এবং Crossfilter এর মাধ্যমে আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং কার্যকরী করে তোলে।
Read more
