DC.js এবং Crossfilter একসাথে ব্যবহৃত হলে ডেটা বিশ্লেষণ ও ভিজ্যুয়ালাইজেশন অত্যন্ত শক্তিশালী এবং ইন্টারেক্টিভ হয়ে ওঠে। Crossfilter বড় ডেটাসেটের ফিল্টারিং এবং গ্রুপিংয়ের জন্য ব্যবহৃত হয়, এবং DC.js সেই ডেটা ভিজ্যুয়ালাইজ করতে সহায়ক।
এখানে আমরা Crossfilter দিয়ে ডাইমেনশন এবং গ্রুপ তৈরি করব, তারপর সেগুলোকে DC.js এর মাধ্যমে ভিজ্যুয়ালাইজ করব।
১. Crossfilter ডাইমেনশন এবং গ্রুপ তৈরি
Crossfilter ডাইমেনশন তৈরি করা হয় ডেটার কোন নির্দিষ্ট বৈশিষ্ট্যের উপর ভিত্তি করে। যেমন, ক্যাটেগরি, তারিখ ইত্যাদি। এরপর, গ্রুপিং (grouping) করা হয় যাতে ডেটার উপর কোন পরিমাপ (যেমন যোগফল, গড়) করা যায়।
ধাপ ১: ডেটাসেট লোড এবং Crossfilter ইন্ডেক্স তৈরি
const data = [
{ category: "A", value: 30, date: "2023-12-01" },
{ category: "B", value: 50, date: "2023-12-02" },
{ category: "A", value: 70, date: "2023-12-03" },
{ category: "C", value: 20, date: "2023-12-01" },
{ category: "B", value: 40, date: "2023-12-02" }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
ধাপ ২: ডাইমেনশন তৈরি
ডাইমেনশন তৈরি করতে আপনি ডেটার যে কোন বৈশিষ্ট্য ব্যবহার করতে পারেন। উদাহরণস্বরূপ, এখানে আমরা category এবং date এর ওপর ডাইমেনশন তৈরি করব।
// ক্যাটেগরি অনুযায়ী ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// তারিখ অনুযায়ী ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
এখানে, categoryDimension এবং dateDimension দুটি আলাদা ডাইমেনশন তৈরি করা হয়েছে। প্রথমটি ক্যাটেগরি ভিত্তিক এবং দ্বিতীয়টি তারিখ ভিত্তিক।
ধাপ ৩: গ্রুপ তৈরি
গ্রুপ তৈরি করতে, Crossfilter গ্রুপিংয়ের জন্য .group() ফাংশন ব্যবহার করে। এখানে আমরা category এর ভিত্তিতে গ্রুপ তৈরি করব, এবং প্রতিটি ক্যাটেগরির জন্য value এর যোগফল (sum) বের করব।
// ক্যাটেগরি গ্রুপ তৈরি এবং value এর যোগফল বের করা
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// তারিখ গ্রুপ তৈরি এবং value এর যোগফল বের করা
const dateGroup = dateDimension.group().reduceSum(d => d.value);
এখানে, categoryGroup তৈরি করার সময় আমরা প্রতিটি ক্যাটেগরির জন্য value এর যোগফল হিসেব করেছি, এবং একইভাবে dateGroup তৈরি করা হয়েছে।
২. DC.js দিয়ে ভিজ্যুয়ালাইজেশন তৈরি
এখন যে Crossfilter ডাইমেনশন এবং গ্রুপ তৈরি করা হয়েছে, সেগুলো DC.js এর মাধ্যমে ভিজ্যুয়ালাইজ করা যাবে। এখানে আমরা একটি বার চার্ট (Bar Chart) তৈরি করব।
ধাপ ৪: DC.js বার চার্ট তৈরি
// 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("Categories") // এক্স-অক্ষের লেবেল
.yAxisLabel("Total Value") // ওয়াই-অক্ষের লেবেল
.renderHorizontalGridLines(true); // গ্রিড লাইন যোগ করা
// DC.js দ্বারা সমস্ত চার্ট রেন্ডার করা
dc.renderAll();
এখানে, আমরা categoryDimension এবং categoryGroup ব্যবহার করে একটি বার চার্ট তৈরি করেছি, যা ক্যাটেগরি অনুযায়ী value এর যোগফল দেখায়। renderAll() ফাংশন ব্যবহার করা হয়েছে যাতে সব চার্ট একসাথে রেন্ডার হয়।
৩. পূর্ণ কোড উদাহরণ
এখানে একটি পূর্ণ কোড উদাহরণ দেখানো হলো যেখানে Crossfilter দিয়ে ডাইমেনশন এবং গ্রুপ তৈরি করা হয়েছে এবং 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 and Crossfilter Example</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 এবং Crossfilter উদাহরণ</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30, date: "2023-12-01" },
{ category: "B", value: 50, date: "2023-12-02" },
{ category: "A", value: 70, date: "2023-12-03" },
{ category: "C", value: 20, date: "2023-12-01" },
{ category: "B", value: 40, date: "2023-12-02" }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
// গ্রুপ তৈরি
const categoryGroup = categoryDimension.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("Categories")
.yAxisLabel("Total Value")
.renderHorizontalGridLines(true);
// সমস্ত চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Crossfilter ডাইমেনশন: ডেটার নির্দিষ্ট বৈশিষ্ট্যের উপর ভিত্তি করে ডাইমেনশন তৈরি করা হয়, যেমন ক্যাটেগরি বা তারিখ।
- Crossfilter গ্রুপ: ডাইমেনশনের উপর ভিত্তি করে গ্রুপ তৈরি করা হয় এবং পরিমাপ (যেমন যোগফল) করা হয়।
- DC.js ভিজ্যুয়ালাইজেশন: Crossfilter ডাইমেনশন এবং গ্রুপের সাথে DC.js এর মাধ্যমে ভিজ্যুয়ালাইজেশন তৈরি করা হয়, যেমন বার চার্ট।
Read more
