DC.js একটি শক্তিশালী লাইব্রেরি যা ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। Drill-down এবং Drill-up ইন্টারঅ্যাকশন ব্যবহার করে আপনি একটি চার্টের মধ্যে ডেটা আরও গভীরে বিশ্লেষণ করতে পারেন এবং একে অপরের সাথে সম্পর্কিত ডেটা দেখতে পারেন। Drill-down এবং Drill-up ইন্টারঅ্যাকশন ব্যবহারকারীদের ডেটা অনুসন্ধানে আরও প্রগতি করতে সহায়ক।
এই গাইডে, আমরা দেখব কিভাবে DC.js ব্যবহার করে Drill-down এবং Drill-up ইন্টারঅ্যাকশন তৈরি করা যায়।
১. প্রয়োজনীয় ফাইল যুক্ত করা
প্রথমে 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">
২. HTML ফাইল তৈরি
Drill-down এবং Drill-up ইন্টারঅ্যাকশন দেখানোর জন্য একটি ডিভ তৈরি করুন, যেখানে চার্টটি রেন্ডার হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Drill-down and Drill-up Interaction</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 Drill-down and Drill-up Interaction</h1>
<div id="bar-chart"></div>
<div id="pie-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩. ডেটাসেট তৈরি এবং Crossfilter সেটআপ
ডেটা তৈরি করুন এবং Crossfilter এর মাধ্যমে dimension এবং group তৈরি করুন।
const data = [
{ category: "A", subCategory: "A1", value: 30 },
{ category: "A", subCategory: "A2", value: 50 },
{ category: "B", subCategory: "B1", value: 70 },
{ category: "B", subCategory: "B2", value: 20 },
{ category: "C", subCategory: "C1", value: 60 },
{ category: "C", subCategory: "C2", value: 40 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
// category dimension এবং group তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// subCategory dimension এবং group তৈরি
const subCategoryDimension = ndx.dimension(d => d.subCategory);
const subCategoryGroup = subCategoryDimension.group().reduceSum(d => d.value);
৪. Drill-down এবং Drill-up Interaction তৈরি
এখন Drill-down এবং Drill-up ইন্টারঅ্যাকশন তৈরি করা হবে। প্রথমে একটি bar chart তৈরি করা হবে এবং তারপর সেটি Drill-down এবং Drill-up এর মাধ্যমে কাস্টমাইজ করা হবে।
Bar Chart তৈরি (Drill-down এর জন্য)
const barChart = dc.barChart("#bar-chart");
barChart
.width(500)
.height(300)
.dimension(categoryDimension) // Category ডাইমেনশন
.group(categoryGroup) // Category গ্রুপ
.x(d3.scaleBand()) // X-অক্ষের স্কেল
.xUnits(dc.units.ordinal)
.yAxisLabel("Total Value")
.xAxisLabel("Category")
.on("filtered", function(chart, filter) {
// Drill-down ইন্টারঅ্যাকশন
if (filter) {
subCategoryDimension.filterAll(); // Sub-category ফিল্টার করুন
const subCategoryGroupFiltered = subCategoryGroup.all().filter(d => d.key.startsWith(filter));
dc.renderAll();
updatePieChart(subCategoryGroupFiltered); // Pie Chart আপডেট করুন
} else {
subCategoryDimension.filterAll(); // ফিল্টার ক্লিয়ার করুন
dc.renderAll();
updatePieChart(subCategoryGroup.all()); // Pie Chart আপডেট করুন
}
});
function updatePieChart(group) {
pieChart
.dimension(subCategoryDimension)
.group(group)
.render();
}
Pie Chart তৈরি (Drill-up এর জন্য)
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.dimension(subCategoryDimension) // Sub-category ডাইমেনশন
.group(subCategoryGroup) // Sub-category গ্রুপ
.on("filtered", function(chart, filter) {
// Drill-up ইন্টারঅ্যাকশন
if (!filter) {
categoryDimension.filterAll(); // Category ফিল্টার ক্লিয়ার করুন
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 Drill-down and Drill-up Interaction</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 Drill-down and Drill-up Interaction</h1>
<div id="bar-chart"></div>
<div id="pie-chart"></div>
<script>
const data = [
{ category: "A", subCategory: "A1", value: 30 },
{ category: "A", subCategory: "A2", value: 50 },
{ category: "B", subCategory: "B1", value: 70 },
{ category: "B", subCategory: "B2", value: 20 },
{ category: "C", subCategory: "C1", value: 60 },
{ category: "C", subCategory: "C2", value: 40 }
];
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const subCategoryDimension = ndx.dimension(d => d.subCategory);
const subCategoryGroup = subCategoryDimension.group().reduceSum(d => d.value);
const barChart = dc.barChart("#bar-chart");
barChart
.width(500)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.yAxisLabel("Total Value")
.xAxisLabel("Category")
.on("filtered", function(chart, filter) {
if (filter) {
subCategoryDimension.filterAll();
const subCategoryGroupFiltered = subCategoryGroup.all().filter(d => d.key.startsWith(filter));
dc.renderAll();
updatePieChart(subCategoryGroupFiltered);
} else {
subCategoryDimension.filterAll();
dc.renderAll();
updatePieChart(subCategoryGroup.all());
}
});
function updatePieChart(group) {
pieChart
.dimension(subCategoryDimension)
.group(group)
.render();
}
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(300)
.dimension(subCategoryDimension)
.group(subCategoryGroup)
.on("filtered", function(chart, filter) {
if (!filter) {
categoryDimension.filterAll();
dc.renderAll();
}
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Drill-down এবং Drill-up ইন্টারঅ্যাকশন DC.js ব্যবহার করে অত্যন্ত সহজে তৈরি করা যায়।
- Drill-down ব্যবহারকারীদের একটি নির্দিষ্ট ক্যাটেগরির ডেটা বিশ্লেষণ করতে সাহায্য করে, যেখানে Drill-up ব্যবহারকারীদের পূর্বের স্তরে ফিরে যেতে সক্ষম করে।
- Pie chart এবং Bar chart এর মধ্যে এই ইন্টারঅ্যাকশনটি কার্যকরভাবে কাজ করে, যেখানে ডেটা ফিল্টার হওয়ার সাথে সাথে একাধিক চার্ট আপডেট হয়।
এভাবে আপনি DC.js এর মাধ্যমে অত্যন্ত কার্যকরী Drill-down এবং Drill-up ইন্টারঅ্যাকশন তৈরি করতে পারেন যা ব্যবহারকারীদের ডেটা বিশ্লেষণের অভিজ্ঞতা উন্নত করে।
Content added By
Read more
