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