DC.js হল একটি শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন লাইব্রেরি যা D3.js এবং Crossfilter এর সাথে কাজ করে। ডেটা ফিল্টারিং এবং সোর্টিং DC.js এ খুবই গুরুত্বপূর্ণ এবং কার্যকরী ফিচার যা ব্যবহারকারীদের ডেটা বিশ্লেষণ এবং আরও ইন্টারেক্টিভ ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। ডেটা ফিল্টারিং এবং সোর্টিংয়ের মাধ্যমে আপনি আপনার ভিজ্যুয়ালাইজেশনের ডেটার মধ্যে পছন্দসই বা নির্দিষ্ট অংশ দেখাতে পারবেন।
এখানে আমরা DC.js-এ ডেটা ফিল্টারিং এবং সোর্টিং নিয়ে আলোচনা করব।
১. ডেটা ফিল্টারিং (Data Filtering)
DC.js এবং Crossfilter ব্যবহার করে ডেটা ফিল্টারিং করা সম্ভব, যা ডেটার একটি নির্দিষ্ট অংশ বা মান নির্বাচন করতে সহায়ক। ফিল্টারিংয়ের মাধ্যমে একটি চার্টের তথ্য সীমাবদ্ধ করা যায় এবং ফিল্টার পরিবর্তন করলে অন্যান্য চার্টগুলোও রিয়েল-টাইম আপডেট হয়।
ডেটা ফিল্টারিং সেটআপ
প্রথমে একটি সাধারণ ডেটাসেট তৈরি করতে হবে এবং Crossfilter দিয়ে ডেটা ফিল্টার করা যাবে।
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 40 },
{ category: "E", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
ফিল্টার প্রয়োগ
ডেটা ফিল্টার করার জন্য .filter() বা .filterExact() ফাংশন ব্যবহার করা হয়। উদাহরণস্বরূপ, আমরা ক্যাটেগরি "A" ফিল্টার করতে পারি।
// ক্যাটেগরি "A" ফিল্টার করা
categoryDimension.filter("A");
এটি শুধুমাত্র ক্যাটেগরি "A" এর ডেটা দেখাবে।
সমস্ত ফিল্টার ক্লিয়ার করা
ফিল্টার ক্লিয়ার করতে .filterAll() ফাংশন ব্যবহার করা হয়:
categoryDimension.filterAll(); // সমস্ত ফিল্টার ক্লিয়ার
এটি সমস্ত ডেটা আবার দেখানোর জন্য ফিল্টার মুছে ফেলবে।
২. ডেটা সোর্টিং (Data Sorting)
DC.js-এ ডেটা সোর্টিং করতে Crossfilter এর dimension এবং group এর সাহায্যে সহজে করা যায়। সঠিকভাবে ডেটা সোর্ট করতে dimension.sort() ব্যবহার করা হয়।
ডেটা সোর্টিং সেটআপ
ডেটা সোর্ট করার জন্য একটি group তৈরি করতে হবে। আমরা value এর উপর সোর্ট করতে পারি।
const group = categoryDimension.group().reduceSum(d => d.value);
// ডেটা সোর্ট করা
const sortedGroup = categoryDimension.top(Infinity); // সমস্ত ডেটা প্রদর্শন করা
sortedGroup.sort((a, b) => d3.ascending(a.value, b.value)); // value এর উপর সোর্ট
এখানে d3.ascending() ব্যবহার করে ডেটাকে ascending order (ছোট থেকে বড়) অনুযায়ী সোর্ট করা হয়েছে। আপনি descending (বড় থেকে ছোট) সোর্ট করতে d3.descending() ব্যবহার করতে পারেন।
৩. DC.js-এ ফিল্টারিং এবং সোর্টিং একসাথে
একটি সম্পূর্ণ উদাহরণ যেখানে আমরা DC.js এর মাধ্যমে ডেটা ফিল্টারিং এবং সোর্টিং একসাথে করব:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Data Filtering and Sorting</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 Data Filtering and Sorting Example</h1>
<div id="chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 40 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const group = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(group)
.x(d3.scaleBand()) // X-axis scale
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.on("filtered", function(chart, filter) {
console.log("Filtered: ", filter);
});
dc.renderAll();
// ক্যাটেগরি "A" ফিল্টার করা
categoryDimension.filter("A");
console.log("ফিল্টার করা ক্যাটেগরি A:", categoryDimension.top(Infinity));
// ডেটা সোর্ট করা
const sortedGroup = categoryDimension.top(Infinity); // সমস্ত ডেটা
sortedGroup.sort((a, b) => d3.ascending(a.value, b.value)); // value এর উপর সোর্ট
console.log("সর্বনিম্ন থেকে সর্বোচ্চ মান:", sortedGroup);
</script>
</body>
</html>
৪. DC.js-এ ফিল্টারিং এবং সোর্টিং এর সুবিধা
- ইন্টারঅ্যাকটিভ: ফিল্টারিং এবং সোর্টিং ব্যবহারকারীদের ডেটা পরিবর্তন করতে দেয়, যার মাধ্যমে তারা তাদের প্রয়োজন অনুযায়ী ডেটা বিশ্লেষণ করতে পারে।
- রিয়েল-টাইম আপডেট: Crossfilter এবং DC.js এর মাধ্যমে যখনই কোনো ফিল্টার বা সোর্ট করা হয়, সব চার্ট রিয়েল-টাইমে আপডেট হয়।
- ডেটা বিশ্লেষণ: ডেটার মধ্যে নির্দিষ্ট অংশ দেখতে এবং সেগুলি বিশ্লেষণ করতে ফিল্টারিং এবং সোর্টিং ব্যবহৃত হয়।
- সহজ কাস্টমাইজেশন: DC.js এর API ব্যবহারে ফিল্টার এবং সোর্টিং খুব সহজ এবং কাস্টমাইজযোগ্য।
সারাংশ
- ডেটা ফিল্টারিং DC.js এবং Crossfilter এর সাহায্যে দ্রুত এবং কার্যকরীভাবে করা যায়।
- ডেটা সোর্টিং Crossfilter-এ গ্রুপ তৈরি করার মাধ্যমে সঠিকভাবে ডেটা সঠিকভাবে সজ্জিত করা যায়।
- DC.js এর সাথে ডেটা ফিল্টারিং এবং সোর্টিং আপনাকে ইন্টারেক্টিভ এবং ডাইনামিক ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য সহায়ক করে।
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 ব্যবহার করে ডেটা ফিল্টার এবং গ্রুপ করতে পারবেন, এবং ডেটার উপর বিভিন্ন ধরনের ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন।
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 এর মাধ্যমে আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং কার্যকরী করে তোলে।
DC.js একটি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে কাজ করে। একটি গুরুত্বপূর্ণ ফিচার হল Chart Interaction এর মাধ্যমে ডেটা ফিল্টারিং, যা ব্যবহারকারীদের একটি চার্টের মাধ্যমে অন্য চার্টের ডেটা আপডেট করতে সাহায্য করে।
Chart Interaction এর মাধ্যমে ডেটা ফিল্টারিং কীভাবে কাজ করে?
DC.js চার্টগুলির মধ্যে Interaction করার মাধ্যমে একটি চার্টে ক্লিক করা বা ব্রাশ করা হলে তা অন্যান্য চার্টের ডেটা আপডেট করে। এটি ডেটা ফিল্টারিং এবং ইনটারেক্টিভ বিশ্লেষণ সহজ করে তোলে।
এখানে আমরা দেখব কীভাবে DC.js এর মাধ্যমে Chart Interaction ব্যবহার করে ডেটা ফিল্টারিং করা যায়, যেখানে একটি চার্টের উপর ইন্টারঅ্যাকশন করলে অন্য চার্টের ডেটা পরিবর্তিত হয়।
১. প্রয়োজনীয় লাইব্রেরি যোগ করা
প্রথমে DC.js, D3.js, এবং Crossfilter লাইব্রেরির সিডিএন লিঙ্ক HTML ফাইলে যোগ করুন:
<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">
২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স
এখানে একটি উদাহরণ ডেটাসেট তৈরি করা হয়েছে এবং Crossfilter দিয়ে ডেটা ইন্ডেক্স করা হয়েছে:
const data = [
{ category: "A", date: "2023-01-01", value: 30 },
{ category: "B", date: "2023-01-02", value: 50 },
{ category: "A", date: "2023-01-03", value: 70 },
{ category: "B", date: "2023-01-04", value: 20 },
{ category: "A", date: "2023-01-05", value: 60 },
{ category: "B", date: "2023-01-06", value: 90 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
এখানে, একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে যেখানে category, date, এবং value রয়েছে।
৩. ডাইমেনশন এবং গ্রুপ তৈরি
ডেটার category এবং date অনুযায়ী ডাইমেনশন এবং গ্রুপ তৈরি করা হবে:
// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// date এর উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// category ভিত্তিক গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// date ভিত্তিক গ্রুপ তৈরি
const dateGroup = dateDimension.group().reduceSum(d => d.value);
এখানে আমরা category এবং date এর উপর ডাইমেনশন এবং গ্রুপ তৈরি করেছি।
৪. DC.js চার্ট তৈরি এবং Interaction যোগ করা
এখন আমরা একটি Bar Chart এবং একটি Line Chart তৈরি করব। Bar Chart এর উপর ক্লিক করলে Line Chart এর ডেটা আপডেট হবে এবং vice versa।
Bar Chart তৈরি:
// DC.js 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")
.on("filtered", function() {
// Bar chart এ ফিল্টারিং করার পর Line Chart আপডেট হবে
lineChart.redraw();
});
Line Chart তৈরি:
// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime())
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("filtered", function() {
// Line chart এ ফিল্টারিং করার পর Bar Chart আপডেট হবে
barChart.redraw();
});
এখানে, on("filtered", function() {...}) ফাংশন ব্যবহার করা হয়েছে। যখন একটি চার্টে ফিল্টার করা হয় (যেমন, ব্যবহারকারী বার চার্টে ক্লিক করে বা ব্রাশ করে), তখন আমরা redraw() ফাংশন ব্যবহার করে অন্য চার্টটিকে আপডেট করেছি।
৫. সমস্ত চার্ট রেন্ডার করা
এখন সব চার্টগুলো রেন্ডার করতে dc.renderAll() ফাংশন ব্যবহার করা হবে।
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 Chart Interaction for Data Filtering</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 Chart Interaction for Data Filtering</h1>
<div id="bar-chart"></div>
<div id="line-chart"></div>
<script>
const data = [
{ category: "A", date: "2023-01-01", value: 30 },
{ category: "B", date: "2023-01-02", value: 50 },
{ category: "A", date: "2023-01-03", value: 70 },
{ category: "B", date: "2023-01-04", value: 20 },
{ category: "A", date: "2023-01-05", value: 60 },
{ category: "B", date: "2023-01-06", value: 90 }
];
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const dateDimension = ndx.dimension(d => d.date);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const dateGroup = dateDimension.group().reduceSum(d => d.value);
// DC.js 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")
.on("filtered", function() {
lineChart.redraw();
});
// DC.js Line Chart
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime())
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("filtered", function() {
barChart.redraw();
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Chart Interaction এর মাধ্যমে একটি চার্টে ক্লিক বা ব্রাশ করলে অন্য চার্টের ডেটা আপডেট হয়।
- DC.js এর
on("filtered", function() {...})ফাংশন ব্যবহার করে redraw() ফাংশনের মাধ্যমে ইন্টারঅ্যাকটিভ আপডেট করা হয়। - এই কোডের মাধ্যমে আপনি Bar Chart এবং Line Chart এর মধ্যে interaction এবং data filtering ইন্টিগ্রেট করতে পারবেন।
এভাবে আপনি DC.js এর মাধ্যমে Chart Interaction ব্যবহার করে data filtering করতে পারেন এবং ডেটার ইন্টারেক্টিভ বিশ্লেষণ তৈরি করতে পারেন।
DC.js ডেটা ভিজ্যুয়ালাইজেশনের জন্য একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি। DC.js-এ sorting এবং custom filters যোগ করা খুবই সহজ এবং এটি ডেটার উপর নির্দিষ্ট ক্রমে (ascending বা descending) সাজানোর এবং নির্দিষ্ট শর্তে ডেটা ফিল্টার করার সুবিধা প্রদান করে। এই ফিচারগুলি ব্যবহারকারীদের ডেটা বিশ্লেষণ আরো ইন্টারেক্টিভ এবং কাস্টমাইজড করে তোলে।
এখানে, Sorting Techniques এবং Custom Filters যোগ করার পদ্ধতি দেখানো হয়েছে।
১. প্রয়োজনীয় লাইব্রেরি যোগ করা
প্রথমে DC.js, D3.js, এবং Crossfilter লাইব্রেরির সিডিএন লিঙ্ক HTML ফাইলে যোগ করুন:
<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">
২. ডেটাসেট তৈরি এবং Crossfilter ইন্ডেক্স
এখন, একটি ডেটাসেট তৈরি করি যা Category, Value, এবং Date নিয়ে থাকবে। পরে, Crossfilter ব্যবহার করে ডেটা ইন্ডেক্স করা হবে।
const data = [
{ category: "A", value: 30, date: "2023-01-01" },
{ category: "B", value: 50, date: "2023-01-02" },
{ category: "A", value: 70, date: "2023-01-03" },
{ category: "B", value: 20, date: "2023-01-04" },
{ category: "A", value: 60, date: "2023-01-05" },
{ category: "B", value: 90, date: "2023-01-06" }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
৩. ডাইমেনশন এবং গ্রুপ তৈরি
Category এবং Date এর উপর ডাইমেনশন এবং গ্রুপ তৈরি করা হবে।
// category এর উপর ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// date এর উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// category ভিত্তিক গ্রুপ তৈরি
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// date ভিত্তিক গ্রুপ তৈরি
const dateGroup = dateDimension.group().reduceSum(d => d.value);
এখন আমাদের কাছে category এবং date এর উপর ভিত্তি করে গ্রুপ এবং ডাইমেনশন রয়েছে।
৪. Sorting Techniques যোগ করা
DC.js চার্টের ডেটা সজানোর জন্য sorting ব্যবহার করা হয়। আমরা ascending বা descending অনুসারে ডেটা সাজাতে পারি।
১. Category অনুযায়ী সোজা সাজানো (Ascending Sorting):
const categoryDimensionAsc = ndx.dimension(d => d.category);
// category গ্রুপ তৈরি এবং সাজানো
const categoryGroupAsc = categoryDimensionAsc.group().reduceSum(d => d.value);
// Category গ্রুপ সোজা সাজানো
const categorySorted = categoryGroupAsc.top(Infinity).sort((a, b) => a.key.localeCompare(b.key));
console.log(categorySorted);
এখানে, categoryGroupAsc-এ ডেটা সোজা সাজানোর জন্য sort() ফাংশন ব্যবহার করা হয়েছে।
২. Value অনুযায়ী উল্টো সাজানো (Descending Sorting):
const categoryGroupDesc = categoryDimension.group().reduceSum(d => d.value);
// Value গ্রুপ উল্টো সাজানো
const categorySortedDesc = categoryGroupDesc.top(Infinity).sort((a, b) => b.value - a.value);
console.log(categorySortedDesc);
এখানে, categoryGroupDesc-এ ডেটা উল্টো সাজানোর জন্য sort() ফাংশন ব্যবহার করা হয়েছে, যাতে value অনুসারে descending অর্ডারে সাজানো যায়।
৫. Custom Filters যোগ করা
DC.js চার্টের জন্য custom filters যোগ করা যায়, যা ব্যবহারকারীদের নির্দিষ্ট শর্ত অনুযায়ী ডেটা ফিল্টার করতে সাহায্য করে। Crossfilter দিয়ে ডেটা ফিল্টারিং করতে dimension.filter() ব্যবহার করা হয়।
১. Category এর জন্য Custom Filter:
// Category A এর জন্য ফিল্টার
categoryDimension.filter("A");
console.log(categoryDimension.top(Infinity));
এখানে, categoryDimension.filter("A") দিয়ে ক্যাটেগরি A এর ডেটা ফিল্টার করা হয়েছে।
২. Date এর জন্য Custom Filter:
// "2023-01-01" তারিখের জন্য ফিল্টার
dateDimension.filter("2023-01-01");
console.log(dateDimension.top(Infinity));
এখানে, dateDimension.filter("2023-01-01") দিয়ে নির্দিষ্ট তারিখের জন্য ডেটা ফিল্টার করা হয়েছে।
৩. Filter Clear করা:
যেকোনো ফিল্টার ক্লিয়ার করতে dimension.filterAll() ব্যবহার করা হয়:
categoryDimension.filterAll(); // ক্যাটেগরি ফিল্টার ক্লিয়ার
dateDimension.filterAll(); // তারিখ ফিল্টার ক্লিয়ার
৬. DC.js চার্ট তৈরি এবং Sorting & Custom Filters ব্যবহার
এখন DC.js দিয়ে Bar Chart এবং Line Chart তৈরি করি এবং সেখানে sorting techniques এবং custom filters যোগ করি।
Bar Chart তৈরি:
// DC.js 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")
.on("filtered", function() {
// Custom filter 적용 করার পর Line Chart আপডেট হবে
lineChart.redraw();
});
Line Chart তৈরি:
// DC.js Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime())
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("filtered", function() {
// Custom filter করার পর Bar Chart আপডেট হবে
barChart.redraw();
});
সমস্ত চার্ট রেন্ডার:
dc.renderAll();
৭. পূর্ণ কোড উদাহরণ
এখানে একটি পূর্ণ কোড উদাহরণ দেখানো হলো যেখানে Sorting Techniques এবং Custom Filters ব্যবহার করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Sorting and Custom Filters</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 Sorting and Custom Filters</h1>
<div id="bar-chart"></div>
<div id="line-chart"></div>
<script>
const data = [
{ category: "A", date: "2023-01-01", value: 30 },
{ category: "B", date: "2023-01-02", value: 50 },
{ category: "A", date: "2023-01-03", value: 70 },
{ category: "B", date: "2023-01-04", value: 20 },
{ category: "A", date: "2023-01-05", value: 60 },
{ category: "B", date: "2023-01-06", value: 90 }
];
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const dateDimension = ndx.dimension(d => d.date);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const dateGroup = dateDimension.group().reduceSum(d => d.value);
// Sorting
const categorySorted = categoryGroup.top(Infinity).sort((a, b) => b.value - a.value);
console.log(categorySorted);
// DC.js 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")
.on("filtered", function() {
lineChart.redraw();
});
// DC.js Line Chart
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime())
.xUnits(d3.timeDays)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("filtered", function() {
barChart.redraw();
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Sorting Techniques:
sort()ফাংশন ব্যবহার করে ascending বা descending সাজার জন্য ডেটা সাজানো হয়। - Custom Filters:
dimension.filter()বাdimension.filterAll()ব্যবহার করে কাস্টম ফিল্টার যোগ করা হয়। - DC.js এর মাধ্যমে আপনি সহজে Sorting এবং Custom Filters যোগ করতে পারেন, যা ডেটা বিশ্লেষণকে আরো ইন্টারেক্টিভ এবং কাস্টমাইজড করে তোলে।
Read more
