DC.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা Crossfilter এর মাধ্যমে মাল্টি-ডাইমেনশনাল ডেটা বিশ্লেষণ এবং ইন্টারেক্টিভ চার্ট তৈরি করতে সক্ষম। DC.js এবং Crossfilter একত্রে ব্যবহৃত হলে, একাধিক চার্ট সিঙ্ক্রোনাইজ করা সম্ভব হয়, যার মাধ্যমে একটি চার্টে করা কোনো পরিবর্তন বা ফিল্টার অন্য চার্টগুলোতেও প্রভাব ফেলে। এটি ডেটা বিশ্লেষণের জন্য অত্যন্ত কার্যকর এবং ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে সাহায্য করে।
Crossfilter এবং DC.js দিয়ে চার্ট সিঙ্ক্রোনাইজ করার প্রক্রিয়া
১. DC.js এবং Crossfilter সেটআপ
প্রথমে, DC.js, D3.js, এবং Crossfilter এর সিডিএন লিংক যুক্ত করতে হবে:
<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 ইন্ডেক্সিং
DC.js এবং Crossfilter এর মাধ্যমে ডেটা সিঙ্ক্রোনাইজ করতে হলে, প্রথমে একটি সাধারণ ডেটাসেট তৈরি করতে হবে এবং 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" },
{ category: "A", value: 90, date: "2023-12-03" }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
৩. ডাইমেনশন তৈরি
Crossfilter ব্যবহার করে ডেটার উপর ডাইমেনশন তৈরি করতে হবে। এখানে, category এবং date দুটি ডাইমেনশন তৈরি করা হয়েছে:
const categoryDimension = ndx.dimension(d => d.category);
const dateDimension = ndx.dimension(d => d.date);
৪. DC.js চার্ট তৈরি
এখন DC.js দিয়ে দুটি চার্ট তৈরি করা হবে — একটি বার চার্ট (Bar Chart) এবং একটি লাইন চার্ট (Line Chart)। এই দুইটি চার্টকে সিঙ্ক্রোনাইজ করা হবে।
বার চার্ট (Bar Chart):
const barChart = dc.barChart("#bar-chart");
barChart
.width(400)
.height(200)
.dimension(categoryDimension)
.group(categoryDimension.group().reduceSum(d => d.value))
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Category")
.yAxisLabel("Value")
.on("filtered", function() {
// যখন bar chart ফিল্টার হবে, তখন লাইন চার্ট আপডেট হবে
lineChart.filterAll();
dc.redrawAll();
});
লাইন চার্ট (Line Chart):
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(400)
.height(200)
.dimension(dateDimension)
.group(dateDimension.group().reduceSum(d => d.value))
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-03")]))
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("filtered", function() {
// যখন line chart ফিল্টার হবে, তখন bar chart আপডেট হবে
barChart.filterAll();
dc.redrawAll();
});
৫. Crossfilter এবং DC.js এর মাধ্যমে চার্ট সিঙ্ক্রোনাইজ
এখন, আপনি যখন একটি চার্টে ফিল্টার বা সিলেকশন করবেন, তখন অন্য চার্টটি আপডেট হবে। এই সিঙ্ক্রোনাইজেশনের জন্য, on("filtered") ইভেন্ট ব্যবহার করা হয়েছে। এই ইভেন্টটি trigger হবে যখন কোনও চার্টে ফিল্টার করা হবে এবং সেক্ষেত্রে অন্য চার্টটি রিফ্রেশ হবে।
এছাড়াও, dc.redrawAll() ফাংশনটি সমস্ত চার্ট রিফ্রেশ করতে ব্যবহৃত হয়, যাতে সমস্ত চার্টে সঠিক ডেটা প্রদর্শিত হয়।
৬. সম্পূর্ণ HTML ও JavaScript উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Crossfilter Chart Synchronization</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 Chart Synchronization</h1>
<div id="bar-chart"></div>
<div id="line-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" },
{ category: "A", value: 90, date: "2023-12-03" }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const dateDimension = ndx.dimension(d => d.date);
// বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(400)
.height(200)
.dimension(categoryDimension)
.group(categoryDimension.group().reduceSum(d => d.value))
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Category")
.yAxisLabel("Value")
.on("filtered", function() {
// যখন bar chart ফিল্টার হবে, তখন লাইন চার্ট আপডেট হবে
lineChart.filterAll();
dc.redrawAll();
});
// লাইন চার্ট তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(400)
.height(200)
.dimension(dateDimension)
.group(dateDimension.group().reduceSum(d => d.value))
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-03")]))
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("filtered", function() {
// যখন line chart ফিল্টার হবে, তখন bar chart আপডেট হবে
barChart.filterAll();
dc.redrawAll();
});
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৭. সারাংশ
- DC.js এবং Crossfilter একত্রে ব্যবহার করে ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা হয়।
- একটি চার্টের মাধ্যমে ফিল্টার বা সিলেকশন করলে অন্য চার্টগুলো স্বয়ংক্রিয়ভাবে আপডেট হয়।
on("filtered")ইভেন্ট এবংdc.redrawAll()ফাংশন ব্যবহার করে চার্ট সিঙ্ক্রোনাইজ করা হয়।- এই পদ্ধতি দিয়ে আপনি ডেটা বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশন আরও ইন্টারেক্টিভ এবং কার্যকরী করতে পারেন।
এই উদাহরণের মাধ্যমে আপনি Crossfilter এর মাধ্যমে একাধিক চার্ট সিঙ্ক্রোনাইজ করার কৌশল শিখতে পারবেন।
Read more
