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 করতে পারেন এবং ডেটার ইন্টারেক্টিভ বিশ্লেষণ তৈরি করতে পারেন।
Read more
