DC.js হলো একটি জাভাস্ক্রিপ্ট লাইব্রেরি, যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি, এবং এটি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। DC.js এর অন্যতম গুরুত্বপূর্ণ বৈশিষ্ট্য হলো এর ডায়নামিক চার্ট ইন্টারঅ্যাকশন, যা ব্যবহারকারীদের ডেটা অনুসন্ধান এবং বিশ্লেষণ করতে সাহায্য করে। এটি ইন্টারেক্টিভ ফিল্টারিং, ড্রিল-ডাউন, এবং রিয়েল-টাইম আপডেটের মতো ফিচার সরবরাহ করে।
DC.js এবং ইন্টারঅ্যাকটিভ চার্ট
DC.js ব্যবহার করে বিভিন্ন ধরনের চার্ট তৈরি করা যায়, যেমন বার চার্ট (Bar Chart), লাইনে চার্ট (Line Chart), পাই চার্ট (Pie Chart), ইত্যাদি। তবে, এর সঠিক ক্ষমতা প্রকাশ পায় যখন এটি ইন্টারঅ্যাকটিভ এবং ডায়নামিক উপায়ে কাজ করে।
ডায়নামিক চার্ট ইন্টারঅ্যাকশন
DC.js ইন্টারঅ্যাকটিভ চার্ট তৈরি করার জন্য Crossfilter এবং D3.js এর শক্তি ব্যবহার করে। এটি রিয়েল-টাইম ডেটা আপডেটের জন্য দ্রুত এবং কার্যকর। এখানে কিছু প্রধান ইন্টারঅ্যাকটিভ ফিচার উল্লেখ করা হলো:
১. ফিল্টারিং এবং ড্রিল-ডাউন
DC.js চার্টে ফিল্টারিং এবং ড্রিল-ডাউন ফিচার যুক্ত করা যায়, যার মাধ্যমে ব্যবহারকারীরা চার্টে ক্লিক করে ডেটা ফিল্টার করতে পারে বা আরও বিস্তারিত দেখার জন্য ড্রিল-ডাউন করতে পারে।
উদাহরণ: বার চার্টে ফিল্টারিং
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension) // ডাইমেনশন
.group(group) // গ্রুপ
.x(d3.scaleBand()) // এক্স-অক্ষ স্কেল
.xUnits(dc.units.ordinal)
.on('filtered', function(chart, filter) { // ফিল্টার ইভেন্ট
console.log('ফিল্টার করা হয়েছে: ', filter);
});
এই কোডের মাধ্যমে, ব্যবহারকারী যখন বার চার্টে ক্লিক করবেন, তখন সেটা ফিল্টার করবে এবং ইন্টারঅ্যাকটিভভাবে ডেটা আপডেট হবে। on('filtered') ফাংশনটি ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়।
২. ক্রস-চার্ট ফিল্টারিং
DC.js একটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য সরবরাহ করে, যেখানে একাধিক চার্ট একে অপরের সাথে সম্পর্কিত থাকে। একটি চার্টে ফিল্টার করার মাধ্যমে অন্য চার্টগুলোও আপডেট হয়ে যায়। এটি এক ধরনের ক্রস-চার্ট ফিল্টারিং।
উদাহরণ: একাধিক চার্টের মধ্যে ইন্টারঅ্যাকশন
const barChart1 = dc.barChart("#bar-chart1");
const barChart2 = dc.barChart("#bar-chart2");
barChart1
.width(400)
.height(200)
.dimension(dimension1)
.group(group1)
.on('filtered', function(chart, filter) {
barChart2.filter(filter); // filter applied to second chart
});
barChart2
.width(400)
.height(200)
.dimension(dimension2)
.group(group2);
dc.renderAll();
এখানে, barChart1 এ ফিল্টার করলে barChart2 আপডেট হবে। এটি ডেটার মধ্যে সম্পর্ক এবং একে অপরের উপর নির্ভরশীলতার মডেল তৈরি করতে সাহায্য করে।
৩. ডেটা আপডেট এবং রিয়েল-টাইম
DC.js লাইভ ডেটা সাপোর্ট করে, অর্থাৎ, আপনি ডেটা পরিবর্তন হলে তা রিয়েল-টাইমে চার্টে দেখাতে পারবেন। এটি বিশেষভাবে লাইভ ড্যাশবোর্ড তৈরি করতে উপকারী।
উদাহরণ: ডেটা আপডেট করার জন্য
const chart = dc.lineChart("#line-chart");
chart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.on('renderlet', function(chart) {
// ডেটা আপডেট করার কোড
chart.redraw();
});
dc.renderAll();
এখানে, renderlet ইভেন্টের মাধ্যমে আপনি ডেটা আপডেট এবং চার্ট রিফ্রেশ করতে পারেন।
৪. ডেটা হাইলাইটিং
DC.js ডেটার বিভিন্ন অংশ হাইলাইট করার জন্য টুলটিপ এবং হাইলাইটিং ফিচার সরবরাহ করে। যখন ব্যবহারকারী চার্টে মাউস পয়েন্টার নিয়ে আসে, তখন সংশ্লিষ্ট তথ্য দেখানো যায়।
উদাহরণ: টুলটিপ ব্যবহার
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.title(function(d) { return "Value: " + d.value; }) // টুলটিপ দেখানো
.on('renderlet', function(chart) {
// টুলটিপ হাইলাইটিং
chart.selectAll('rect')
.style('cursor', 'pointer')
.on('mouseover', function(d) {
d3.select(this).style('fill', 'orange');
})
.on('mouseout', function(d) {
d3.select(this).style('fill', null);
});
});
dc.renderAll();
এখানে, মাউসওভার ইভেন্টে একটি বার হাইলাইট করা হয় এবং টুলটিপে তার মান প্রদর্শন করা হয়।
৫. ইউজার ইন্টারফেস কন্ট্রোল
DC.js বিভিন্ন ইউজার ইন্টারফেস কন্ট্রোল যেমন স্লাইডার, ড্রপডাউন মেনু, এবং বোতাম ব্যবহার করে ইন্টারঅ্যাকশন করতে সহায়তা করে। এই কন্ট্রোলগুলো দিয়ে ব্যবহারকারী ডেটা ফিল্টার বা নির্বাচন করতে পারে।
উদাহরণ: ফিল্টার কন্ট্রোল
const slider = dc.slider("#slider");
slider
.min(0)
.max(100)
.value(50)
.on('filtered', function(chart, filter) {
console.log('ফিল্টার করা হয়েছে:', filter);
});
dc.renderAll();
এখানে, একটি স্লাইডারের মাধ্যমে ব্যবহারকারী ডেটা ফিল্টার করতে পারে এবং সেই অনুযায়ী চার্ট আপডেট হয়।
সারাংশ
DC.js দিয়ে ডায়নামিক চার্ট ইন্টারঅ্যাকশন তৈরির সুবিধাগুলো হল:
- ফিল্টারিং এবং ড্রিল-ডাউন: ব্যবহারকারীরা চার্টে ক্লিক করে ডেটা ফিল্টার করতে পারে।
- ক্রস-চার্ট ফিল্টারিং: একাধিক চার্টের মধ্যে সম্পর্ক তৈরি এবং আপডেট করা।
- রিয়েল-টাইম ডেটা আপডেট: লাইভ ডেটার মাধ্যমে চার্টের রিফ্রেশ।
- ডেটা হাইলাইটিং: টুলটিপ এবং হাইলাইটিং ফিচার।
- ইউজার ইন্টারফেস কন্ট্রোল: স্লাইডার, ড্রপডাউন, এবং অন্যান্য কন্ট্রোল দিয়ে ইন্টারঅ্যাকশন।
DC.js ইন্টারেক্টিভ ড্যাশবোর্ড এবং ডেটা ভিজ্যুয়ালাইজেশন তৈরির জন্য একটি শক্তিশালী টুল। এর ডায়নামিক ইন্টারঅ্যাকশন ফিচারগুলো ডেটা বিশ্লেষণ এবং ডিসকভারি প্রক্রিয়াকে আরও আকর্ষণীয় এবং ব্যবহারকারী বান্ধব করে তোলে।
DC.js একটি শক্তিশালী লাইব্রেরি যা D3.js এবং Crossfilter এর উপর ভিত্তি করে তৈরি। এটি ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক, এবং তার মধ্যে ব্রাশিং এবং জুমিং এক গুরুত্বপূর্ণ ফিচার। ব্রাশিং (Brushing) এবং জুমিং (Zooming) ব্যবহৃত হয় ডেটার নির্দিষ্ট অংশ নির্বাচন বা পছন্দের মাধ্যমে বিশ্লেষণ করতে, যা ব্যবহারকারীদের ডেটা সিলেকশন এবং ফিল্টারিংয়ের মধ্যে স্বাচ্ছন্দ্য প্রদান করে।
ব্রাশিং (Brushing)
ব্রাশিং হল একটি ইন্টারঅ্যাকটিভ প্রক্রিয়া যেখানে ব্যবহারকারী চার্টের একটি অংশ নির্বাচন করতে পারেন এবং সেই নির্বাচিত অংশের জন্য ডেটা ফিল্টার করা হয়। এর ফলে, নির্বাচিত ডেটা অন্য চার্টে বা ড্যাশবোর্ডে অটোমেটিকভাবে আপডেট হয়। ব্রাশিং সাধারণত বার চার্ট বা লাইন চার্ট এ ব্যবহার করা হয়।
জুমিং (Zooming)
জুমিং ব্যবহৃত হয় যখন ব্যবহারকারী চার্টের অক্ষ (axis) জুম ইন বা জুম আউট করতে চান, যার ফলে বড় বা ছোট ডেটা ভিউ দেখতে সুবিধা হয়। এটি সাধারণত লাইনে বা এরিয়াতে ব্যবহৃত হয়, যেখানে ডেটা পয়েন্টগুলোর বিস্তৃতি পরিবর্তন করা যায়।
DC.js এ ব্রাশিং এবং জুমিং সেটআপ
DC.js এ ব্রাশিং এবং জুমিং সাধারণত D3.js এর শক্তিশালী স্কেল এবং dc.brush() ব্যবহার করে সেট করা হয়। নিচে ধাপে ধাপে ব্রাশিং এবং জুমিং বাস্তবায়নের পদ্ধতি দেখানো হলো।
১. ব্রাশিং (Brushing) সেটআপ
ডেটাসেট এবং পরিবেশ প্রস্তুতি
প্রথমে, একটি সাধারণ ডেটাসেট তৈরি করতে হবে এবং Crossfilter ও DC.js সেটআপ করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Brushing and Zooming</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 Brushing and Zooming Example</h1>
<div id="bar-chart"></div>
<script>
// ডেটাসেট
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const categoryDimension = ndx.dimension(d => d.category);
const group = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(group)
.x(d3.scaleBand()) // X-axis scale
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.brushOn(true) // Enable brushing
.on("filtered", function(chart, filter) {
console.log("Filtered: ", filter);
});
dc.renderAll();
</script>
</body>
</html>
এই কোডে brushOn(true) ব্যবহার করা হয়েছে, যা ব্রাশিং ফিচার সক্রিয় করে। ব্যবহারকারী চার্টে একটি অংশ নির্বাচন করলে filtered ইভেন্ট ট্রিগার হবে।
২. জুমিং (Zooming) সেটআপ
DC.js তে জুমিং সাধারণত লাইন চার্ট বা এরিয়া চার্ট এ ব্যবহৃত হয়, যেখানে স্কেলিং ডায়নামিকভাবে পরিবর্তিত হয়। নিচে একটি সাধারণ লাইন চার্টের মাধ্যমে জুমিং সেটআপের উদাহরণ দেখানো হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Zooming Example</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 Zooming Example</h1>
<div id="line-chart"></div>
<script>
// ডেটাসেট
const data = [
{ date: "2023-01-01", value: 10 },
{ date: "2023-02-01", value: 20 },
{ date: "2023-03-01", value: 30 },
{ date: "2023-04-01", value: 40 },
{ date: "2023-05-01", value: 50 }
];
// Crossfilter ইন্ডেক্স তৈরি
const ndx = crossfilter(data);
// ডাইমেনশন তৈরি
const dateDimension = ndx.dimension(d => d.date);
const valueGroup = dateDimension.group().reduceSum(d => d.value);
// DC.js লাইন চার্ট তৈরি
const lineChart = dc.lineChart("#line-chart");
lineChart
.width(600)
.height(300)
.dimension(dateDimension)
.group(valueGroup)
.x(d3.scaleTime().domain([new Date("2023-01-01"), new Date("2023-05-01")])) // Time scale
.xAxisLabel("Date")
.yAxisLabel("Value")
.brushOn(true) // Enable brushing
.renderHorizontalGridLines(true)
.on("filtered", function(chart, filter) {
console.log("Zoomed to:", filter);
});
dc.renderAll();
</script>
</body>
</html>
এখানে brushOn(true) ব্যবহার করা হয়েছে, যা ব্রাশিং সক্রিয় করে এবং time scale ব্যবহার করে ডেটা জুম ইন এবং আউট করতে দেয়।
ব্রাশিং এবং জুমিং এর উপকারিতা
- ইন্টারঅ্যাকটিভিটি: ব্যবহারকারী সরাসরি চার্টের অংশ নির্বাচন বা স্কেল করতে পারে, যা ডেটার আরও গভীর বিশ্লেষণ সম্ভব করে।
- ডেটা ফিল্টারিং: ব্রাশিংয়ের মাধ্যমে ব্যবহারকারী নির্দিষ্ট ডেটার উপর ফোকাস করতে পারে এবং অন্যান্য চার্ট আপডেট করতে পারে।
- ডাইনামিক ভিউ: জুমিং ব্যবহারের মাধ্যমে ডেটার বিস্তৃতি পরিবর্তন করতে পারে, যা একটি বৃহত্তর ডেটাসেটের ভিতর নির্দিষ্ট অংশ দেখতে সহায়ক।
- ইউজার এক্সপেরিয়েন্স: এটি ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।
সারাংশ
- ব্রাশিং (Brushing): এটি একটি ইন্টারঅ্যাকটিভ ফিচার যা ব্যবহারকারীকে চার্টের একটি অংশ নির্বাচন করতে দেয় এবং সেই অনুযায়ী ডেটা ফিল্টার হয়।
- জুমিং (Zooming): এটি ব্যবহারকারীদের চার্টের অক্ষের স্কেল পরিবর্তন করতে দেয়, যা ডেটা ভিউয়ের বিস্তৃতি পরিবর্তন করতে সাহায্য করে।
- DC.js এ ব্রাশিং এবং জুমিং ব্যবহারের মাধ্যমে ইন্টারেক্টিভ ডেটা বিশ্লেষণ করা যায় এবং ব্যবহারকারীকে তাদের ডেটা পছন্দ অনুযায়ী ভিজ্যুয়ালাইজেশন দেখতে সুবিধা দেয়।
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 এর মাধ্যমে একাধিক চার্ট সিঙ্ক্রোনাইজ করার কৌশল শিখতে পারবেন।
DC.js একটি শক্তিশালী লাইব্রেরি, যা D3.js এর উপর ভিত্তি করে ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সহায়ক। এটি ইন্টারেক্টিভ ড্যাশবোর্ড এবং বিশ্লেষণমূলক অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। DC.js এ tooltip এবং hover ইন্টারঅ্যাকশন ব্যবহার করে আপনি গ্রাফের উপাদানগুলোর উপর অতিরিক্ত তথ্য প্রদর্শন করতে পারেন।
এখানে আমরা দেখব কিভাবে DC.js ব্যবহার করে tooltip এবং hover ইন্টারঅ্যাকশন তৈরি করতে হয়।
১. Tooltip কিভাবে ব্যবহার করবেন
DC.js এ tooltip সাধারণত D3.js এর টুলটিপ ফিচারের সাথে ইন্টিগ্রেট করা হয়। টুলটিপ একটি পপ-আপ বক্স যা গ্রাফের উপরে মাউস হোভার করার সময় অতিরিক্ত তথ্য প্রদর্শন করে।
ধাপ ১: DC.js চার্ট তৈরি করা
প্রথমে একটি DC.js বার চার্ট তৈরি করি:
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const chart = dc.barChart("#chart");
chart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.yAxisLabel("Values")
.xAxisLabel("Category");
dc.renderAll();
ধাপ ২: Tooltip কাস্টমাইজ করা
এখন, আমরা D3.js এর title ট্যাগ ব্যবহার করে টুলটিপ যোগ করব। title ট্যাগটি HTML এলিমেন্টে মাউস হোভার করলে টুলটিপ প্রদর্শন করে।
chart.selectAll("rect")
.on("mouseover", function(event, d) {
const category = d.key; // ক্যাটেগরি
const value = d.value; // মান
d3.select(this).append("title")
.text(`Category: ${category}, Value: ${value}`); // টুলটিপের কনটেন্ট
})
.on("mouseout", function() {
d3.select(this).select("title").remove(); // মাউস আউট হলে টুলটিপ সরিয়ে নেওয়া
});
এখানে, প্রতিটি বার (rect) তে মাউস হোভার করার সময় টুলটিপ দেখানো হবে, এবং মাউস আউট করলে টুলটিপ সরিয়ে ফেলা হবে।
২. Hover ইন্টারঅ্যাকশন
Hover ইন্টারঅ্যাকশন ব্যবহারকারীকে মাউস দিয়ে কোনো উপাদান বা ডেটা পয়েন্টের উপর হোভার করলে পরিবর্তন দেখতে দেয়। এটি ব্যবহারকারীর জন্য ডেটা বিশ্লেষণ আরো ইন্টারেক্টিভ এবং আকর্ষণীয় করে তোলে।
Hover Effect যোগ করা
আমরা mouseover এবং mouseout ইভেন্ট ব্যবহার করে hover ইন্টারঅ্যাকশন তৈরি করতে পারি। উদাহরণস্বরূপ, নিচে rect এর উপর hover করার সময় বারগুলোর রঙ পরিবর্তন করা হচ্ছে:
chart.selectAll("rect")
.on("mouseover", function(event, d) {
d3.select(this)
.attr("fill", "orange") // হোভার করলে বারটি অরেঞ্জ রঙে পরিবর্তিত হবে
.attr("stroke", "black") // বারটির চারপাশে কালো স্ট্রোক
.attr("stroke-width", 2);
})
.on("mouseout", function() {
d3.select(this)
.attr("fill", "steelblue") // মাউস আউট হলে পুনরায় ব্লু রঙে ফিরবে
.attr("stroke", "none");
});
এখানে, mouseover ইভেন্টে বারটির রঙ এবং স্ট্রোক পরিবর্তন হচ্ছে এবং mouseout ইভেন্টে রঙ পূর্বাবস্থায় ফিরে আসছে।
৩. পূর্ণ কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Tooltip and Hover 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 Tooltip and Hover Interaction</h1>
<div id="chart"></div>
<script>
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "C", value: 70 },
{ category: "D", value: 20 },
{ category: "E", value: 60 }
];
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
const chart = dc.barChart("#chart");
chart
.width(600)
.height(300)
.dimension(categoryDimension)
.group(categoryGroup)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.yAxisLabel("Values")
.xAxisLabel("Category");
// Tooltip and Hover Effect
chart.selectAll("rect")
.on("mouseover", function(event, d) {
// Tooltip
const category = d.key;
const value = d.value;
d3.select(this).append("title")
.text(`Category: ${category}, Value: ${value}`);
// Hover effect
d3.select(this)
.attr("fill", "orange")
.attr("stroke", "black")
.attr("stroke-width", 2);
})
.on("mouseout", function() {
d3.select(this).select("title").remove();
d3.select(this)
.attr("fill", "steelblue")
.attr("stroke", "none");
});
dc.renderAll();
</script>
</body>
</html>
সারাংশ
- Tooltip: DC.js এ D3.js এর
titleট্যাগ ব্যবহার করে টুলটিপ তৈরি করা যায়। এটি ব্যবহারকারীর জন্য অতিরিক্ত তথ্য প্রদর্শন করে, যখন তারা একটি গ্রাফের উপরে মাউস হোভার করে। - Hover ইন্টারঅ্যাকশন:
mouseoverএবংmouseoutইভেন্ট ব্যবহার করে ডেটা পয়েন্টের উপর হোভার করার সময় রঙ পরিবর্তন এবং অন্যান্য ভিজ্যুয়াল পরিবর্তন করা যায়।
এই ইন্টারঅ্যাকশনগুলো ব্যবহার করে আপনি DC.js এর ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী বান্ধব করতে পারেন।
DC.js ব্যবহার করে আপনি ইন্টারেক্টিভ চার্ট তৈরি করতে পারেন যেখানে ব্যবহারকারীরা ডেটা ফিল্টার করতে পারে, ফিল্টার রিসেট করতে পারে, এবং গ্রাফটি রিড্র করার জন্য অপশন ব্যবহার করতে পারে। এখানে দেখানো হবে কীভাবে আপনি একটি DC.js চার্টে Filter, Reset, এবং Redraw অপশন যোগ করতে পারেন।
১. প্রাথমিক সেটআপ
প্রথমে একটি সাধারণ DC.js চার্ট তৈরি করি। এখানে আমরা একটি Bar Chart তৈরি করব যা ক্যাটেগরি অনুযায়ী ডেটা ফিল্টার ও গ্রুপ করবে।
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DC.js Example</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 Filter, Reset, and Redraw Example</h1>
<div id="bar-chart"></div>
<!-- Filter and Reset buttons -->
<button id="filter-btn">Filter Category A</button>
<button id="reset-btn">Reset Filter</button>
<button id="redraw-btn">Redraw Chart</button>
<script>
// Data
const data = [
{ category: "A", value: 30 },
{ category: "B", value: 50 },
{ category: "A", value: 70 },
{ category: "C", value: 20 },
{ category: "B", value: 40 }
];
// Crossfilter Setup
const ndx = crossfilter(data);
const categoryDimension = ndx.dimension(d => d.category);
const categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js Bar Chart
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);
// Render Chart
dc.renderAll();
// Filter button - Filter Category A
document.getElementById("filter-btn").addEventListener("click", () => {
categoryDimension.filter("A");
dc.redrawAll(); // Redraw all charts after filtering
});
// Reset button - Remove all filters
document.getElementById("reset-btn").addEventListener("click", () => {
categoryDimension.filterAll();
dc.redrawAll(); // Redraw all charts after resetting filters
});
// Redraw button - Manually redraw the chart
document.getElementById("redraw-btn").addEventListener("click", () => {
dc.redrawAll(); // Redraw all charts
});
</script>
</body>
</html>
২. Filter, Reset, এবং Redraw অপশন
Filter অপশন:
- ব্যবহারকারী Filter Category A বোতামে ক্লিক করলে
categoryDimension.filter("A")কল হবে। এটি ক্যাটেগরিAএর উপর ফিল্টার প্রয়োগ করবে এবং তারপরdc.redrawAll()ফাংশন দ্বারা চার্টটি রিফ্রেশ হবে।
document.getElementById("filter-btn").addEventListener("click", () => { categoryDimension.filter("A"); dc.redrawAll(); // Redraw all charts after filtering });- ব্যবহারকারী Filter Category A বোতামে ক্লিক করলে
Reset অপশন:
- Reset Filter বোতামে ক্লিক করলে
.filterAll()ফাংশনটি ক্যাটেগরি ডাইমেনশনের সব ফিল্টার মুছে ফেলবে এবং তারপরdc.redrawAll()ফাংশন চার্ট রিফ্রেশ করবে।
document.getElementById("reset-btn").addEventListener("click", () => { categoryDimension.filterAll(); dc.redrawAll(); // Redraw all charts after resetting filters });- Reset Filter বোতামে ক্লিক করলে
Redraw অপশন:
- Redraw Chart বোতামে ক্লিক করলে চার্টটি শুধুমাত্র রিফ্রেশ হবে, কোন নতুন ফিল্টার প্রয়োগ না করেই।
document.getElementById("redraw-btn").addEventListener("click", () => { dc.redrawAll(); // Redraw all charts });
৩. কাজের ব্যাখ্যা
- Filter: যখন Filter Category A বোতামটি চাপা হয়, তখন ক্যাটেগরি "A"-এর উপর ফিল্টার প্রয়োগ করা হয়।
dc.redrawAll()চার্ট পুনরায় রেন্ডার করে এবং শুধুমাত্র ক্যাটেগরি "A"-এর ডেটা প্রদর্শিত হয়। - Reset: Reset Filter বোতামে ক্লিক করার মাধ্যমে সমস্ত ফিল্টার মুছে ফেলা হয় এবং
dc.redrawAll()চার্ট রিফ্রেশ করে সমস্ত ডেটা পুনরায় প্রদর্শন করে। - Redraw: Redraw Chart বোতামটি ব্যবহারকারীদের চার্ট পুনরায় রেন্ডার করতে দেয়, কিন্তু এটি কোনো ফিল্টার পরিবর্তন না করে।
৪. আরো কাস্টমাইজেশন
- Multiple Filters: আপনি যদি একাধিক ফিল্টার বা ক্রস-ফিল্টারিং করতে চান, তবে
categoryDimension.filter()এর মাধ্যমে একাধিক ক্যাটেগরি বা অন্যান্য ডেটা ক্ষেত্র ফিল্টার করতে পারেন। - Dynamic Buttons: আপনি আরও ডাইনামিক বাটন তৈরি করতে পারেন যেগুলি ব্যবহারকারীর চাহিদা অনুযায়ী বিভিন্ন ফিল্টার এবং কনফিগারেশন পরিবর্তন করবে।
সারাংশ
এই কোডটি দেখিয়েছে কীভাবে DC.js এর মাধ্যমে একটি চার্টে Filter, Reset, এবং Redraw অপশন যোগ করা যায়। ব্যবহারকারীরা চার্টে ডেটা ফিল্টার করতে পারবে, ফিল্টার রিসেট করতে পারবে এবং ম্যানুয়ালি চার্টটি রিফ্রেশ করতে পারবে।
Read more
