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 এর মাধ্যমে আপনি একাধিক চার্টে ইন্টারঅ্যাকশন তৈরি করে ডেটা বিশ্লেষণ ও ভিজ্যুয়ালাইজেশন করতে পারবেন যা ব্যবহারকারীর জন্য আরও কার্যকরী এবং ইন্টারেক্টিভ।
Read more
