Chart Linking এবং Coordinated Views DC.js-এ একটি শক্তিশালী ফিচার যা একাধিক চার্টের মধ্যে ইন্টারঅ্যাকশন তৈরি করে। এর মাধ্যমে, একটি চার্টে করা পরিবর্তন (যেমন ফিল্টারিং) স্বয়ংক্রিয়ভাবে অন্য চার্টগুলিকে প্রভাবিত করতে পারে। এটি ডেটা ভিজ্যুয়ালাইজেশন এবং ড্যাশবোর্ড তৈরি করার ক্ষেত্রে অত্যন্ত কার্যকর, যেখানে একাধিক চার্টের মধ্যে সম্পর্ক থাকে।
এই টিউটোরিয়ালে যা শিখবেন:
- Chart Linking: একাধিক চার্টকে একে অপরের সাথে যুক্ত করার পদ্ধতি।
- Coordinated Views: একাধিক চার্টের মধ্যে সিঙ্ক্রোনাইজেশন কিভাবে কাজ করে তা শেখা।
১. Chart Linking (চার্ট লিঙ্কিং)
Chart Linking এর মাধ্যমে একাধিক চার্টের মধ্যে সম্পর্ক তৈরি করা হয়। একাধিক চার্টে একটি ফিল্টারিং বা সিলেকশন করার মাধ্যমে অন্য চার্টগুলিতে সেসব পরিবর্তন প্রভাব ফেলে।
উদাহরণ:
ধরা যাক, আমরা দুটি চার্ট তৈরি করতে চাই: একটি Bar Chart এবং একটি Pie Chart। Bar Chart এর মধ্যে একটি ক্যাটেগরি সিলেক্ট করলে সেই ক্যাটেগরির ডেটা Pie Chart এ আপডেট হবে। এই কাজটি DC.js এর on("filtered") ইভেন্ট ব্যবহার করে করা সম্ভব।
২. HTML এবং JavaScript কোড (Chart Linking Example)
<!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 Linking</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 Linking Example</h1>
<div id="bar-chart"></div>
<div id="pie-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
// 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("Values")
.renderHorizontalGridLines(true)
.on("filtered", function() {
pieChart.filterAll(); // যখন বার চার্ট ফিল্টার হবে, পি চার্ট আপডেট হবে
dc.redrawAll(); // সব চার্ট রিফ্রেশ
});
// DC.js পাই চার্ট
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.radius(100)
.innerRadius(30)
.slicesCap(4)
.on("filtered", function() {
barChart.filterAll(); // যখন পাই চার্ট ফিল্টার হবে, বার চার্ট আপডেট হবে
dc.redrawAll(); // সব চার্ট রিফ্রেশ
});
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৩. কোর্ডিনেটেড ভিউস (Coordinated Views)
Coordinated Views এর মাধ্যমে আপনি একাধিক চার্টে কমন ফিল্টার বা কমন ভিউ ব্যবহার করতে পারেন। যেমন একটি Bar Chart এর সিলেকশন অন্য Pie Chart বা Line Chart-এ প্রভাব ফেলবে। এর মাধ্যমে একাধিক চার্টে ডেটার পরিবর্তন সিঙ্ক্রোনাইজ করা যায়।
উদাহরণ:
ধরা যাক, Bar Chart এ একটি ক্যাটেগরি সিলেক্ট করলে সেই ক্যাটেগরি সম্পর্কিত ডেটা Line Chart এবং Pie Chart তে সিঙ্ক্রোনাইজ হবে।
৪. HTML এবং JavaScript কোড (Coordinated Views Example)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Coordinated Views</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 Coordinated Views Example</h1>
<div id="bar-chart"></div>
<div id="line-chart"></div>
<div id="pie-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 80 },
{ category: "C", value: 45 },
{ category: "D", value: 60 },
{ category: "E", value: 20 },
{ category: "F", value: 90 }
];
// 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("Values")
.renderHorizontalGridLines(true)
.on("filtered", function() {
pieChart.filterAll();
lineChart.filterAll();
dc.redrawAll(); // সব চার্ট রিফ্রেশ
});
// DC.js লাইন চার্ট
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Categories")
.yAxisLabel("Values")
.on("filtered", function() {
barChart.filterAll();
pieChart.filterAll();
dc.redrawAll(); // সব চার্ট রিফ্রেশ
});
// DC.js পাই চার্ট
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.radius(100)
.innerRadius(30)
.slicesCap(4)
.on("filtered", function() {
barChart.filterAll();
lineChart.filterAll();
dc.redrawAll(); // সব চার্ট রিফ্রেশ
});
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
৫. কোডের ব্যাখ্যা
১. Crossfilter ইন্ডেক্স এবং ডাইমেনশন তৈরি:
এখানে category ডাইমেনশন তৈরি করা হয়েছে এবং categoryGroup তৈরি করা হয়েছে যাতে category অনুসারে value এর যোগফল করা হয়।
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
২. Chart Linking:
একটি bar chart, line chart, এবং pie chart তিনটি চার্ট তৈরি করা হয়েছে। এখানে on("filtered") ইভেন্ট ব্যবহার করে এক চার্টে ফিল্টার করা হলে অন্য দুই চার্টও আপডেট হবে।
barChart.on("filtered", function() {
pieChart.filterAll();
lineChart.filterAll();
dc.redrawAll(); // সব চার্ট রিফ্রেশ
});
৩. Coordinated Views:
যখন একটি চার্টে সিলেকশন বা ফিল্টার করা হয়, তখন অন্য চার্টগুলোও সিঙ্ক্রোনাইজ হয় এবং সেই অনুযায়ী আপডেট হয়। filterAll() ফাংশনটি ব্যবহার করে একে অপরকে সিঙ্ক্রোনাইজ করা হয়েছে।
pieChart.on("filtered", function() {
barChart.filterAll();
lineChart.filterAll();
dc.redrawAll(); // সব চার্ট রিফ্রেশ
});
সারাংশ
- Chart Linking এবং Coordinated Views DC.js এর মাধ্যমে একাধিক চার্টকে একে অপরের সাথে লিঙ্ক করার এবং সিঙ্ক্রোনাইজ করার একটি শক্তিশালী পদ্ধতি।
on("filtered")ইভেন্ট এবংfilterAll()ফাংশন ব্যবহার করে এক চার্টে করা পরিবর্তন অন্য চার্টগুলিতে স্বয়ংক্রিয়ভাবে প্রভাব ফেলতে পারে।- এই পদ্ধতি ইন্টারঅ্যাকটিভ ডেটা বিশ্লেষণ এবং ড্যাশবোর্ড তৈরি করার জন্য অত্যন্ত কার্যকর।
Read more
