DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি। এটি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক, এবং তার মধ্যে ব্রাশিং এবং জুমিং এক গুরুত্বপূর্ণ ফিচার। ব্রাশিং (Brushing) এবং জুমিং (Zooming) ব্যবহৃত হয় ডেটার নির্দিষ্ট অংশ নির্বাচন বা পছন্দের মাধ্যমে বিশ্লেষণ করতে, যা ব্যবহারকারীদের ডেটা সিলেকশন এবং ফিল্টারিংয়ের মধ্যে স্বাচ্ছন্দ্য প্রদান করে।
ব্রাশিং (Brushing)
ব্রাশিং হল একটি ইন্টারঅ্যাকটিভ প্রক্রিয়া যেখানে ব্যবহারকারী চার্টের একটি অংশ নির্বাচন করতে পারেন এবং সেই নির্বাচিত অংশের জন্য ডেটা ফিল্টার করা হয়। এর ফলে, নির্বাচিত ডেটা অন্য চার্টে বা ড্যাশবোর্ডে অটোমেটিকভাবে আপডেট হয়। ব্রাশিং সাধারণত বার চার্ট বা লাইন চার্ট এ ব্যবহার করা হয়।
জুমিং (Zooming)
জুমিং ব্যবহৃত হয় যখন ব্যবহারকারী চার্টের অক্ষ (axis) জুম ইন বা জুম আউট করতে চান, যার ফলে বড় বা ছোট ডেটা ভিউ দেখতে সুবিধা হয়। এটি সাধারণত লাইনে বা এরিয়াতে ব্যবহৃত হয়, যেখানে ডেটা পয়েন্টগুলোর বিস্তৃতি পরিবর্তন করা যায়।
DC.js এ ব্রাশিং এবং জুমিং সেটআপ
DC.js এ ব্রাশিং এবং জুমিং সাধারণত D3.js এর শক্তিশালী স্কেল এবং dc.brush() ব্যবহার করে সেট করা হয়। নিচে ধাপে ধাপে ব্রাশিং এবং জুমিং বাস্তবায়নের পদ্ধতি দেখানো হলো।
১. ব্রাশিং (Brushing) সেটআপ
ডেটাসেট এবং পরিবেশ প্রস্তুতি
প্রথমে, একটি সাধারণ ডেটাসেট তৈরি করতে হবে এবং 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 Brushing and Zooming</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 Brushing and Zooming Example</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ 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("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(group)
.x(d3.scaleBand()) // X-axis scale
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.brushOn(true) // Enable brushing
.on("filtered", function(chart, filter) {
console.log("Filtered: ", filter);
});
dc.renderAll();
</script>
</body>
</html>
এই কোডে brushOn(true) ব্যবহার করা হয়েছে, যা ব্রাশিং ফিচার সক্রিয় করে। ব্যবহারকারী চার্টে একটি অংশ নির্বাচন করলে filtered ইভেন্ট ট্রিগার হবে।
২. জুমিং (Zooming) সেটআপ
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 Zooming 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 Zooming Example</h1>
<div id="line-chart"></div>
<script>
// ডেটাসেট
const data = [
{ date: "2023-01-01", value: 10 },
{ date: "2023-02-01", value: 20 },
{ date: "2023-03-01", value: 30 },
{ date: "2023-04-01", value: 40 },
{ date: "2023-05-01", value: 50 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// DC.js লাইন চার্ট তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale
.xAxisLabel("Date")
.yAxisLabel("Value")
.brushOn(true) // Enable brushing
.renderHorizontalGridLines(true)
.on("filtered", function(chart, filter) {
console.log("Zoomed to:", filter);
});
dc.renderAll();
</script>
</body>
</html>
এখানে brushOn(true) ব্যবহার করা হয়েছে, যা ব্রাশিং সক্রিয় করে এবং time scale ব্যবহার করে ডেটা জুম ইন এবং আউট করতে দেয়।
ব্রাশিং এবং জুমিং এর উপকারিতা
- ইন্টারঅ্যাকটিভিটি: ব্যবহারকারী সরাসরি চার্টের অংশ নির্বাচন বা স্কেল করতে পারে, যা ডেটার আরও গভীর বিশ্লেষণ সম্ভব করে।
- ডেটা ফিল্টারিং: ব্রাশিংয়ের মাধ্যমে ব্যবহারকারী নির্দিষ্ট ডেটার উপর ফোকাস করতে পারে এবং অন্যান্য চার্ট আপডেট করতে পারে।
- ডাইনামিক ভিউ: জুমিং ব্যবহারের মাধ্যমে ডেটার বিস্তৃতি পরিবর্তন করতে পারে, যা একটি বৃহত্তর ডেটাসেটের ভিতর নির্দিষ্ট অংশ দেখতে সহায়ক।
- ইউজার এক্সপেরিয়েন্স: এটি ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।
সারাংশ
- ব্রাশিং (Brushing): এটি একটি ইন্টারঅ্যাকটিভ ফিচার যা ব্যবহারকারীকে চার্টের একটি অংশ নির্বাচন করতে দেয় এবং সেই অনুযায়ী ডেটা ফিল্টার হয়।
- জুমিং (Zooming): এটি ব্যবহারকারীদের চার্টের অক্ষের স্কেল পরিবর্তন করতে দেয়, যা ডেটা ভিউয়ের বিস্তৃতি পরিবর্তন করতে সাহায্য করে।
- DC.js এ ব্রাশিং এবং জুমিং ব্যবহারের মাধ্যমে ইন্টারেক্টিভ ডেটা বিশ্লেষণ করা যায় এবং ব্যবহারকারীকে তাদের ডেটা পছন্দ অনুযায়ী ভিজ্যুয়ালাইজেশন দেখতে সুবিধা দেয়।
Read more
