DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর উপরে নির্মিত, এবং এটি আপনাকে ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। Advanced Chart Interaction এবং Linking এর মাধ্যমে একাধিক চার্টের মধ্যে ইন্টারঅ্যাকশন তৈরি করা যায়, যেখানে একটি চার্টের ফিল্টারিং বা পরিবর্তন অন্য চার্টে প্রভাব ফেলবে। এই ধরনের ইন্টারঅ্যাকশন ব্যবহারকারীদের ডেটার বিভিন্ন দৃষ্টিকোণ থেকে বিশ্লেষণ করতে সাহায্য করে।
এখানে, আমরা DC.js ব্যবহার করে Advanced Chart Interaction এবং Linking এর মাধ্যমে একাধিক চার্টের মধ্যে সংযোগ (linking) এবং ইন্টারঅ্যাকশন তৈরি করার পদ্ধতি শিখব।
১. Advanced Chart Interaction - চার্টের মধ্যে ইন্টারঅ্যাকশন
DC.js এর মাধ্যমে চার্টের মধ্যে ইন্টারঅ্যাকশন তৈরি করা সম্ভব। আপনি যখন একটি চার্টে ক্লিক করেন, তখন তা অন্য চার্টগুলোতে ফিল্টারিং এবং আপডেট প্রভাব ফেলতে পারে। এই প্রক্রিয়াটি Linked Charts হিসেবে পরিচিত, যেখানে একাধিক চার্ট একে অপরের সাথে যোগাযোগ করে।
উদাহরণ: Multiple Charts Interaction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Advanced Chart 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 Multiple Chart Interaction</h1>
<div id="bar-chart"></div>
<div id="pie-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: 90, date: "2023-12-04" },
{ category: "B", value: 60, date: "2023-12-05" }
];
// Crossfilter সেটআপ
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 বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(300)
.height(200)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal);
// DC.js পাই চার্ট তৈরি
const pieChart = dc.pieChart("#pie-chart");
pieChart
.width(300)
.height(200)
.dimension(categoryDimension)
.group(categoryGroup)
.innerRadius(50); // Donut style
// DC.js লাইন চার্ট তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(200)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime())
.xUnits(d3.timeDays);
// Interaction (Linking) ফাংশন
barChart.on('filtered', function(chart) {
pieChart.filter(chart.filters());
lineChart.filter(chart.filters());
dc.renderAll();
});
dc.renderAll();
</script>
</body>
</html>
ব্যাখ্যা:
- Multiple Charts: এখানে একটি bar chart, একটি pie chart, এবং একটি line chart তৈরি করা হয়েছে, যা একে অপরের সাথে ইন্টারঅ্যাক্ট করবে।
- Linking:
barChart.on('filtered', function(chart) {...})ইভেন্টের মাধ্যমে, যখন একটি চার্টে ফিল্টার করা হয় (যেমন একটি ক্যাটেগরি সিলেক্ট করা হয়), সেই ফিল্টারটি pie chart এবং line chart-এও প্রভাব ফেলবে। - dc.renderAll(): এটি সমস্ত চার্ট রেন্ডার করার জন্য ব্যবহৃত হয়, যখন একে অপরের সাথে ইন্টারঅ্যাক্ট করা হয়।
২. Chart Linking - একাধিক চার্টের মধ্যে লিংকিং
DC.js ব্যবহার করে আপনি একাধিক চার্টের মধ্যে লিংকিং তৈরি করতে পারেন, যেখানে একটি চার্টের ফিল্টার অন্য চার্টে প্রভাব ফেলবে। এই ফিচারটি ব্যবহারকারীকে একটি চার্টে নির্বাচন করার মাধ্যমে অন্য চার্টগুলোকে আপডেট করার ক্ষমতা দেয়।
উদাহরণ: Linking Between Multiple Charts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Linking Between Charts</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 Linking Between Charts</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: 90, date: "2023-12-04" },
{ category: "B", value: 60, date: "2023-12-05" }
];
// Crossfilter সেটআপ
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 বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(400)
.height(200)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal);
// DC.js লাইন চার্ট তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(200)
.dimension(dateDimension)
.group(dateGroup)
.x(d3.scaleTime())
.xUnits(d3.timeDays);
// Chart Linking: বার চার্টে ক্লিক করলে লাইন চার্ট আপডেট হবে
barChart.on('filtered', function(chart) {
lineChart.filter(chart.filters());
dc.renderAll();
});
dc.renderAll();
</script>
</body>
</html>
ব্যাখ্যা:
- Linking Between Charts:
barChart.on('filtered', function(chart) {...})ফাংশন ব্যবহার করে একাধিক চার্টের মধ্যে linking তৈরি করা হয়েছে। যখন bar chart ফিল্টার হয়, তখন সেই ফিল্টারটি line chart এ প্রভাব ফেলে। - filter(chart.filters()): এই ফাংশনটি ফিল্টারটি অন্য চার্টে প্রয়োগ করে, যার ফলে একে অপরের মধ্যে ডেটা শেয়ারিং বা লিংকিং ঘটে।
৩. Advanced Interactions - কাস্টম ইন্টারঅ্যাকশন
DC.js আপনাকে custom interaction যোগ করতে দেয়, যেমন একটি চার্টের পয়েন্টে ক্লিক করার মাধ্যমে ডেটা হাইলাইট করা বা বিভিন্ন ফিল্টার পদ্ধতি।
উদাহরণ: Custom Highlighting Interaction
barChart.on('renderlet', function(chart) {
chart.selectAll("rect").on("click", function(d) {
chart.filter(d.key); // ডেটা ফিল্টার
dc.renderAll(); // আপডেট চার্ট
});
});
এখানে, bar chart-এর পয়েন্টে ক্লিক করলে সেই ক্যাটেগরি বা সিরিজের ডেটা filter হবে এবং চার্ট আপডেট হবে।
সারাংশ
- Advanced Chart Interaction: DC.js এর মাধ্যমে একাধিক চার্টের মধ্যে interaction তৈরি করা যায়, যেমন একটি চার্টে ক্লিক করলে অন্য চার্টে প্রভাব ফেলা (linking)।
- Linking Between Charts:
on('filtered')ইভেন্ট ব্যবহার করে একাধিক চার্টের মধ্যে linking করা যায়, যেখানে একটি চার্টের পরিবর্তন অন্য চার্টে প্রদর্শিত হয়। - Custom Interactions: DC.js আপনাকে custom interactions তৈরি করার সুযোগ দেয়, যেমন ক্লিক করলে সিরিজ ফিল্টার করা।
এভাবে, DC.js দিয়ে আপনি advanced chart interactions এবং linking তৈরি করে আরও উন্নত এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন করতে পারবেন।
DC.js হল একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি এবং ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। একাধিক চার্টের মধ্যে ইন্টারঅ্যাকশন যোগ করা ডেটার বিশ্লেষণ এবং ভিজ্যুয়ালাইজেশনকে আরও কার্যকরী এবং ইউজার-ফ্রেন্ডলি করে তোলে। DC.js দিয়ে আপনি একাধিক চার্টের মধ্যে বিভিন্ন ধরনের ইন্টারঅ্যাকশন তৈরি করতে পারেন, যেমন ডেটা সিঙ্ক্রোনাইজেশন, ফিল্টারিং, হোভার ইফেক্টস, ক্লিক ইভেন্টস এবং ব্রাশিং।
১. ডেটা সিঙ্ক্রোনাইজেশন (Data Synchronization)
ডেটা সিঙ্ক্রোনাইজেশন এর মাধ্যমে একাধিক চার্টের মধ্যে ফিল্টার বা সিলেকশন করার পর সমস্ত চার্ট আপডেট হয়। DC.js এর crossfilter ব্যবহারের মাধ্যমে আপনি একাধিক চার্টকে একে অপরের সাথে সিঙ্ক্রোনাইজ করতে পারেন।
উদাহরণ: একাধিক চার্টে সিঙ্ক্রোনাইজেশন
const ndx = crossfilter(data);
// ডাইমেনশন এবং গ্রুপ তৈরি
const dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
// বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(400)
.height(200)
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal);
// লাইন চার্ট তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(400)
.height(200)
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal);
// Render all charts
dc.renderAll();
এখানে, dc.renderAll() ফাংশন সমস্ত চার্ট আপডেট করবে এবং তাদের মধ্যে সিঙ্ক্রোনাইজেশন তৈরি করবে।
২. ফিল্টারিং এবং ক্লিক ইভেন্টস (Filtering and Click Events)
DC.js এ, আপনি একটি চার্টে ক্লিক বা সিলেক্ট করলে অন্য চার্টগুলি স্বয়ংক্রিয়ভাবে আপডেট হতে পারে। Crossfilter এর dimension.filter() ব্যবহার করে ফিল্টারিং করা হয় এবং dc.renderAll() ফাংশন দিয়ে সমস্ত চার্ট আপডেট করা হয়।
উদাহরণ: ক্লিক ইভেন্টস এবং ফিল্টারিং
const barChart = dc.barChart("#bar-chart");
barChart
.width(400)
.height(200)
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.on('preRedraw', function(chart) {
// ফিল্টারিং হবার আগে অতিরিক্ত কার্যক্রম
console.log("Chart will be filtered");
})
.on('filtered', function(chart, filter) {
// ফিল্টারিং পরবর্তী ইভেন্ট
console.log("Chart was filtered with filter: ", filter);
});
// Render the chart
dc.renderAll();
এখানে on('filtered') ইভেন্ট ব্যবহৃত হয়েছে যা চার্টে ক্লিক বা ফিল্টার করার পর কার্যক্রম ট্র্যাক করতে সাহায্য করে।
৩. হোভার ইফেক্টস (Hover Effects)
হোভার ইফেক্টস ব্যবহার করে আপনি ডেটা পয়েন্টের উপর মাউস রাখলে ভিজ্যুয়াল প্রতিক্রিয়া প্রদর্শন করতে পারেন, যেমন টুলটিপ, রঙ পরিবর্তন ইত্যাদি।
উদাহরণ: হোভার ইফেক্টস
barChart.selectAll("rect")
.on('mouseover', function(event, d) {
// বার রঙ পরিবর্তন
d3.select(this).attr('fill', 'orange');
tooltip.style("visibility", "visible")
.text(`Category: ${d.key}, Value: ${d.value}`);
})
.on('mouseout', function() {
d3.select(this).attr('fill', 'steelblue'); // রঙ ফিরিয়ে আনা
tooltip.style("visibility", "hidden");
});
এখানে mouseover ইভেন্ট ব্যবহার করে bar রঙ পরিবর্তন এবং টুলটিপ প্রদর্শন করা হচ্ছে। মাউস চলে গেলে mouseout ইভেন্ট টুলটিপ লুকিয়ে ফেলে এবং বারটি আবার আগের অবস্থায় ফিরে আসে।
৪. ব্রাশিং (Brushing)
Brushing ব্যবহারের মাধ্যমে, ব্যবহারকারী চার্টের একটি নির্দিষ্ট অংশ নির্বাচন করতে পারেন এবং সেই নির্বাচনের ফলাফল অন্য চার্টে প্রতিফলিত হয়। DC.js এ, brush() ফাংশন ব্যবহার করে ব্রাশিং করা হয়।
উদাহরণ: ব্রাশিং
const barChart = dc.barChart("#bar-chart");
barChart
.width(400)
.height(200)
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.brushOn(true); // ব্রাশিং সক্ষম করা
dc.renderAll();
এখানে brushOn(true) দিয়ে ব্রাশিং সক্ষম করা হয়েছে। এখন, আপনি বার চার্টের একটি অংশ সিলেক্ট করলে, অন্য চার্টগুলোর ডেটা সেই সিলেকশন অনুযায়ী আপডেট হবে।
৫. Multiple Chart Interaction: Combining Techniques
একাধিক চার্টের মধ্যে ফিল্টারিং, হোভার ইফেক্টস, ব্রাশিং ইত্যাদি একত্রে ব্যবহার করা যায়। একাধিক চার্টের মধ্যে ইন্টারঅ্যাকশন তৈরির মাধ্যমে ডেটা বিশ্লেষণ আরও কার্যকরী হয়।
উদাহরণ: একাধিক চার্টে ইন্টারঅ্যাকশন
const barChart = dc.barChart("#bar-chart");
const lineChart = dc.lineChart("#line-chart");
barChart
.width(400)
.height(200)
.dimension(dimension)
.group(group)
.on('filtered', function() {
lineChart.redraw();
});
lineChart
.width(400)
.height(200)
.dimension(dimension)
.group(group)
.on('filtered', function() {
barChart.redraw();
});
dc.renderAll();
এখানে, একটি চার্টে ফিল্টার করার পর অন্য চার্টটি স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে এবং আপডেট হবে।
সারাংশ
- Data Synchronization: একাধিক চার্টে ডেটার সিঙ্ক্রোনাইজেশন নিশ্চিত করার জন্য crossfilter এবং
dc.renderAll()ব্যবহৃত হয়। - Filtering and Click Events: এক চার্টে ক্লিক করলে অন্যান্য চার্টগুলোর ডেটা স্বয়ংক্রিয়ভাবে আপডেট হয়।
- Hover Effects: ডেটা পয়েন্টে হোভার ইফেক্টে রঙ পরিবর্তন এবং টুলটিপ প্রদর্শিত হয়।
- Brushing: চার্টের একটি অংশ সিলেক্ট করলে অন্যান্য চার্ট আপডেট হয়।
- Multiple Chart Interaction: একাধিক চার্টের মধ্যে ইন্টারঅ্যাকশন যোগ করার মাধ্যমে ডেটা বিশ্লেষণ আরও কার্যকরী হয়।
DC.js এর মাধ্যমে আপনি একাধিক চার্টে ইন্টারঅ্যাকশন তৈরি করে ডেটা বিশ্লেষণ ও ভিজ্যুয়ালাইজেশন করতে পারবেন যা ব্যবহারকারীর জন্য আরও কার্যকরী এবং ইন্টারেক্টিভ।
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()ফাংশন ব্যবহার করে এক চার্টে করা পরিবর্তন অন্য চার্টগুলিতে স্বয়ংক্রিয়ভাবে প্রভাব ফেলতে পারে।- এই পদ্ধতি ইন্টারঅ্যাকটিভ ডেটা বিশ্লেষণ এবং ড্যাশবোর্ড তৈরি করার জন্য অত্যন্ত কার্যকর।
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 ইন্টারঅ্যাকশন তৈরি করতে পারেন যা ব্যবহারকারীদের ডেটা বিশ্লেষণের অভিজ্ঞতা উন্নত করে।
DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর ওপর ভিত্তি করে তৈরি এবং এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশনের জন্য ইন্টারেক্টিভ ফিচার যেমন Brush, Pan, এবং Zoom প্রয়োগ করা যায়। এই ফিচারগুলো ব্যবহারকারীকে ডেটা বিশ্লেষণের সময় ডেটাকে আরো বিস্তারিতভাবে দেখতে সাহায্য করে।
এই গাইডে, আমরা দেখব কিভাবে Brush, Pan, এবং Zoom ইন্টারঅ্যাকশন টেকনিক DC.js ব্যবহার করে বাস্তবায়ন করা যায়।
১. প্রয়োজনীয় ফাইল যুক্ত করা
প্রথমে, 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">
২. HTML ফাইল তৈরি
এখানে একটি সাধারণ HTML ফাইল তৈরি করা হয়েছে যেখানে বিভিন্ন চার্ট এবং Brush, Pan, এবং Zoom এর জন্য জায়গা রাখা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Advanced Interactions: Brush, Pan, Zoom</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: Brush, Pan, Zoom</h1>
<div id="bar-chart"></div>
<div id="line-chart"></div>
<script>
// JavaScript কোড এখানে হবে
</script>
</body>
</html>
৩. ডেটাসেট তৈরি এবং DC.js সেটআপ
এখন ডেটাসেট তৈরি করে, Crossfilter এবং DC.js এর মাধ্যমে একটি Bar Chart এবং Line Chart তৈরি করা হবে। এগুলোর মধ্যে আমরা Brush, Pan, এবং Zoom ইন্টারঅ্যাকশন যুক্ত করব।
ডেটাসেট উদাহরণ
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 50 },
{ date: "2023-12-03", value: 70 },
{ date: "2023-12-04", value: 20 },
{ date: "2023-12-05", value: 60 }
];
Crossfilter এবং DC.js সেটআপ
const ndx = crossfilter(data);
// date এর উপর ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
// value এর উপর গ্রুপ তৈরি
const valueGroup = dateDimension.group().reduceSum(d => d.value);
৪. Bar Chart এবং Line Chart তৈরি
Bar Chart তৈরি এবং Zoom/Pan ইনক্লুড করা
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleBand()) // x-axis scale
.xUnits(dc.units.ordinal)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("zoom", function() {
// Zoom/Brush update handling
console.log("Zoom or brush updated");
});
Line Chart তৈরি এবং Zoom/Pan ইনক্লুড করা
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // time scale
.xUnits(d3.timeDays)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.on("zoom", function() {
// Zoom handling
console.log("Zoom applied on Line Chart");
});
৫. Brush, Pan, and Zoom এর জন্য কাস্টমাইজেশন
Brush (চয়ন) ইন্টারঅ্যাকশন
Brush এর মাধ্যমে আপনি ডেটার একটি নির্দিষ্ট অংশ নির্বাচন করতে পারেন। এই ইন্টারঅ্যাকশন ব্যবহারকারীদের জন্য ডেটার নির্দিষ্ট অংশে ফোকাস করা সহজ করে।
barChart
.brushOn(true) // Brush সক্রিয় করুন
.on("brushend", function() {
console.log("Brush updated");
});
এটি Bar Chart এর উপর ব্রাশ যোগ করবে, যার মাধ্যমে ব্যবহারকারী নির্দিষ্ট একটি অংশ নির্বাচন করতে পারবেন।
Zoom (যতটা বড় বা ছোট করা)
Zoom ব্যবহারকারীদের চার্টের স্কেল পরিবর্তন করতে সহায়ক হয়। DC.js এর মাধ্যমে, আমরা zoom ইভেন্টে ডেটা পুনরায় রেন্ডার করতে পারি।
lineChart
.zoomable(true) // Zoom সক্ষম করুন
.on("zoom", function() {
console.log("Zoom applied");
});
এটি Line Chart এর জন্য জুম সক্ষম করবে, যাতে ব্যবহারকারী চার্টের স্কেল বাড়াতে বা কমাতে পারেন।
৬. Full Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js: Brush, Pan, Zoom</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: Brush, Pan, Zoom</h1>
<div id="bar-chart"></div>
<div id="line-chart"></div>
<script>
// ডেটাসেট
const data = [
{ date: "2023-12-01", value: 30 },
{ date: "2023-12-02", value: 50 },
{ date: "2023-12-03", value: 70 },
{ date: "2023-12-04", value: 20 },
{ date: "2023-12-05", value: 60 }
];
// Crossfilter সেটআপ
const ndx = crossfilter(data);
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// Bar Chart তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.brushOn(true) // Brush ব্যবহার
.on("brushend", function() {
console.log("Brush updated");
});
// Line Chart তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-12-01"), new Date("2023-12-05")])) // time scale
.xUnits(d3.timeDays)
.elasticY(true)
.xAxisLabel("Date")
.yAxisLabel("Value")
.zoomable(true) // Zoom সক্ষম করা
.on("zoom", function() {
console.log("Zoom applied");
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Brush: একটি নির্দিষ্ট ডেটা অংশ নির্বাচন করার জন্য ব্যবহার করা হয়।
- Pan: স্কেল পরিবর্তন এবং চার্টে প্যানিং এর মাধ্যমে ব্যবহারকারীরা ডেটার বিভিন্ন অংশ দেখতে পারেন।
- Zoom: চার্টের স্কেল পরিবর্তন করে ব্যবহারকারীদের আরও বিস্তারিতভাবে ডেটা দেখতে সাহায্য করে।
- DC.js এবং D3.js এর মাধ্যমে এই ইন্টারঅ্যাকশনগুলো সহজেই যোগ করা যায় এবং ব্যবহারকারীদের জন্য ইন্টারেক্টিভ ডেটা বিশ্লেষণের অভিজ্ঞতা উন্নত করা যায়।
এগুলি DC.js এর ইন্টারেক্টিভ চার্ট তৈরি করার কিছু মূল কৌশল, যা ডেটা বিশ্লেষণকে আরো শক্তিশালী এবং ব্যবহারকারী বান্ধব করে তোলে।
Read more
