DC.js দিয়ে Tooltip তৈরি এবং Data Points এ Hover Interaction যোগ করা ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করে তোলে। Tooltip ব্যবহার করে আপনি ব্যবহারকারীদের জন্য ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদর্শন করতে পারেন। Hover interaction ব্যবহার করে, যখন ব্যবহারকারী চার্টে কোনো ডেটা পয়েন্টের উপর মাউস রাখেন, তখন নির্দিষ্ট তথ্য বা ভিজ্যুয়াল প্রতিক্রিয়া প্রদান করা হয়।
১. Tooltip তৈরি
Tooltip সাধারণত একটি ছোট পপ-আপ উইন্ডো হিসেবে ডেটা পয়েন্টের সাথে সম্পর্কিত অতিরিক্ত তথ্য প্রদর্শন করে। DC.js এর মাধ্যমে Tooltip তৈরি করতে D3.js ব্যবহার করা হয়, কারণ DC.js D3.js এর উপর ভিত্তি করে কাজ করে।
২. DC.js দিয়ে Tooltip তৈরি
DC.js এর on('mouseover') ইভেন্ট ব্যবহার করে আপনি টুলটিপ তৈরি করতে পারেন। এখানে একটি সহজ উদাহরণ দেয়া হয়েছে যেখানে বার চার্টে মাউসওভার করার সময় টুলটিপ দেখা যাবে:
উদাহরণ: Tooltip তৈরি
<!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 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">
<style>
.tooltip {
position: absolute;
padding: 5px;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 5px;
visibility: hidden;
}
</style>
</head>
<body>
<h1>DC.js Tooltip Example</h1>
<div id="bar-chart"></div>
<div class="tooltip" id="tooltip"></div> <!-- Tooltip 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 dimension = ndx.dimension(d => d.category);
const group = dimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট তৈরি
const barChart = dc.barChart("#bar-chart");
barChart
.width(600)
.height(300)
.dimension(dimension)
.group(group)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.xAxisLabel("Categories")
.yAxisLabel("Values");
// Tooltip interaction
const tooltip = d3.select("#tooltip");
barChart.selectAll("rect")
.on('mouseover', function(event, d) {
const x = event.pageX + 10; // X অবস্থান
const y = event.pageY + 10; // Y অবস্থান
tooltip.style("visibility", "visible")
.style("top", `${y}px`)
.style("left", `${x}px`)
.text(`Category: ${d.key}, Value: ${d.value}`);
})
.on('mouseout', function() {
tooltip.style("visibility", "hidden");
});
// চার্ট রেন্ডার
dc.renderAll();
</script>
</body>
</html>
কোড ব্যাখ্যা:
- Tooltip স্টাইল:
.tooltipক্লাস ব্যবহার করে একটি সিম্পল পপ-আপ উইন্ডো তৈরি করা হয়েছে, যা ডেটা পয়েন্টের উপর মাউস রাখলে প্রদর্শিত হবে। - Hover Interaction:
mouseoverএবংmouseoutইভেন্ট ব্যবহার করে টুলটিপটি সক্রিয় এবং নিষ্ক্রিয় করা হয়েছে।mouseoverইভেন্টে মাউসের পজিশন অনুযায়ী টুলটিপের অবস্থান এবং তথ্য আপডেট করা হয়।
৩. Data Points এ Hover Interaction যোগ করা
Hover Interaction ব্যবহারের মাধ্যমে আপনি ব্যবহারকারীর সাথে আরও ইন্টারেক্টিভ যোগাযোগ তৈরি করতে পারেন। এই ধরনের ইন্টারঅ্যাকশন সাধারণত ডেটা পয়েন্টের উপরে মাউস রাখার সময় ব্যবহারকারীকে তথ্য বা ভিজ্যুয়াল প্রতিক্রিয়া প্রদর্শন করে।
উদাহরণ: Hover Interaction
// Hover interaction (bar chart)
barChart.selectAll("rect")
.on('mouseover', function(event, d) {
d3.select(this).attr('fill', 'orange'); // Hovering bar color change
tooltip.style("visibility", "visible")
.text(`Category: ${d.key}, Value: ${d.value}`);
})
.on('mouseout', function() {
d3.select(this).attr('fill', 'steelblue'); // Reset bar color
tooltip.style("visibility", "hidden");
});
কোড ব্যাখ্যা:
mouseover: যখন ডেটা পয়েন্টের উপর মাউস যাবে, তখন ওই পয়েন্টের রঙ পরিবর্তন হবে এবং টুলটিপ প্রদর্শিত হবে।mouseout: মাউস ডেটা পয়েন্ট থেকে চলে গেলে রঙ পুনরায় পূর্বাবস্থায় ফিরে আসবে এবং টুলটিপটি লুকিয়ে যাবে।
৪. Tooltip কাস্টমাইজ করা
আপনি Tooltip এর ডিজাইন কাস্টমাইজ করতে পারেন, যেমন:
- রঙ: টুলটিপের ব্যাকগ্রাউন্ড, টেক্সট রঙ কাস্টমাইজ করা।
- পদবী: টুলটিপের সীমানা বা বর্ডার আকার কাস্টমাইজ করা।
- অ্যানিমেশন: টুলটিপের প্রদর্শন এবং অদৃশ্য হওয়া মসৃণ করতে CSS অ্যানিমেশন যোগ করা।
উদাহরণ: কাস্টম স্টাইল টুলটিপ
.tooltip {
position: absolute;
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 5px;
pointer-events: none;
font-size: 14px;
transition: opacity 0.3s ease;
}
এই স্টাইল টুলটিপে ব্যাকগ্রাউন্ড কালার, প্যাডিং, টেক্সট রঙ এবং বর্ডার রেডিয়াস নির্ধারণ করে এবং transition প্রপার্টি দিয়ে টুলটিপের প্রদর্শন মসৃণ করে।
সারাংশ
- Tooltip এবং Hover Interaction ডেটা পয়েন্টের সাথে যোগাযোগ করার জন্য অত্যন্ত কার্যকর।
mouseoverএবংmouseoutইভেন্ট ব্যবহার করে টুলটিপ এবং হোভার ইন্টারঅ্যাকশন তৈরি করা হয়।- DC.js এবং D3.js এর মাধ্যমে ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব।
Read more
