D3.js ব্যবহার করে আপনি Tooltip এবং Hover Effects যুক্ত করে আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং তথ্যপূর্ণ করতে পারেন। Tooltip হলো একটি ছোট বক্স যা ব্যবহারকারী যখন কোনো উপাদান (যেমন, বার, পয়েন্ট বা সেগমেন্ট) উপর মাউস হোভার করেন তখন প্রদর্শিত হয় এবং সাধারণত ঐ উপাদান সম্পর্কিত অতিরিক্ত তথ্য প্রদান করে। Hover Effects হল মাউস হোভার করার মাধ্যমে ডেটার ভিজ্যুয়াল পরিবর্তন (যেমন, রঙ পরিবর্তন) যা ইউজারকে তথ্যের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেয়।
১. Tooltip কী?
Tooltip হলো একটি ছোট পপ-আপ বক্স যা সাধারণত ডেটার অতিরিক্ত বা বিস্তারিত তথ্য প্রদর্শন করে যখন ব্যবহারকারী কোনও নির্দিষ্ট এলিমেন্টের উপর মাউস হোভার করেন।
D3.js-এ tooltip তৈরি করার জন্য আপনি সাধারণত mouseover এবং mouseout ইভেন্ট ব্যবহার করেন। এটি HTML এবং CSS ব্যবহার করে তৈরি করা হয় এবং D3.js এর সাথে ইন্টিগ্রেট করা হয়।
২. D3.js-এ Tooltip তৈরি করা
২.১ Tooltip তৈরি করার জন্য পদক্ষেপ:
- HTML: Tooltip এর জন্য একটি
divএলিমেন্ট তৈরি করুন, যা ডিফল্টভাবে visibility: hidden থাকবে। - D3.js: মাউস হোভার ইভেন্ট ব্যবহার করে Tooltip দেখানোর এবং লুকানোর কার্যকারিতা তৈরি করুন।
২.২ উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Tooltip Example</title>
<style>
/* Tooltip styling */
.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 5px;
font-size: 12px;
background-color: lightsteelblue;
border-radius: 4px;
pointer-events: none;
opacity: 0;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="500" height="300"></svg>
<script>
// ডেটাসেট
const data = [10, 20, 30, 40, 50];
// SVG তৈরি
const svg = d3.select("svg");
// Tooltip তৈরি
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip");
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 100 + 50)
.attr("y", d => 300 - d * 5)
.attr("width", 80)
.attr("height", d => d * 5)
.style("fill", "steelblue")
.on("mouseover", function(event, d) {
tooltip.transition().duration(200).style("opacity", 1);
tooltip.html("Value: " + d)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function() {
tooltip.transition().duration(200).style("opacity", 0);
});
</script>
</body>
</html>
ব্যাখ্যা:
- Tooltip ডিভ:
divএলিমেন্ট ব্যবহার করে একটি টুলটিপ তৈরি করা হয়েছে, যার ক্লাসtooltip। mouseoverইভেন্ট: যখন ব্যবহারকারী একটি বারে মাউস হোভার করবে, তখন টুলটিপ প্রদর্শিত হবে এবং সংশ্লিষ্ট মান (এখানে বার এর উচ্চতা) প্রদর্শন করা হবে।mouseoutইভেন্ট: মাউস বের হয়ে গেলে টুলটিপ লুকানো হবে।
৩. Data Hover Effects
Hover Effects ব্যবহারকারীকে ডেটার সাথে আরও ইন্টারঅ্যাকটিভভাবে যুক্ত হতে সুযোগ দেয়। যখন ব্যবহারকারী কোন উপাদান বা ডেটা পয়েন্টের উপর মাউস হোভার করে, তখন সেই উপাদানটির ভিজ্যুয়াল পরিবর্তন ঘটে। উদাহরণস্বরূপ, বার চার্টে একটি বার হোভার করলে তার রঙ পরিবর্তন হতে পারে বা তার আকার পরিবর্তন হতে পারে।
৩.১ উদাহরণ: Hover Effects (রঙ পরিবর্তন)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Hover Effect Example</title>
<style>
/* সাধারণ বার চার্ট স্টাইল */
.bar {
fill: steelblue;
transition: fill 0.3s ease;
}
.bar:hover {
fill: orange; /* হোভার করলে বার এর রঙ পরিবর্তন */
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="500" height="300"></svg>
<script>
// ডেটাসেট
const data = [10, 20, 30, 40, 50];
// SVG তৈরি
const svg = d3.select("svg");
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 100 + 50)
.attr("y", d => 300 - d * 5)
.attr("width", 80)
.attr("height", d => d * 5)
.attr("class", "bar"); // class যোগ করা হয়েছে যাতে hover স্টাইল কার্যকর হয়
</script>
</body>
</html>
ব্যাখ্যা:
transition:transitionপ্রোপার্টি ব্যবহার করে রঙের পরিবর্তন মসৃণভাবে করা হয়েছে।:hover: CSS এর:hoverসিলেক্টর ব্যবহার করে মাউস হোভার করার সময় রঙ পরিবর্তন করা হয়েছে।
৪. Tooltip এবং Hover Effects একত্রে ব্যবহার
D3.js-এ আপনি Tooltip এবং Hover Effects একসাথে ব্যবহার করতে পারেন, যাতে ব্যবহারকারী একটি ডেটা পয়েন্টে হোভার করলে উভয়ই কার্যকর হয়। নিচে একটি উদাহরণ দেখানো হলো যেখানে একটি বার চার্টে Tooltip এবং Hover Effect একসাথে কাজ করছে:
৪.১ উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Tooltip and Hover Effect</title>
<style>
/* Tooltip styling */
.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 5px;
font-size: 12px;
background-color: lightsteelblue;
border-radius: 4px;
pointer-events: none;
opacity: 0;
}
/* বার হোভার স্টাইল */
.bar {
fill: steelblue;
transition: fill 0.3s ease;
}
.bar:hover {
fill: orange; /* হোভার করলে রঙ পরিবর্তন */
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<svg width="500" height="300"></svg>
<script>
// ডেটাসেট
const data = [10, 20, 30, 40, 50];
// SVG তৈরি
const svg = d3.select("svg");
// Tooltip তৈরি
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip");
// বার চার্ট তৈরি
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 100 + 50)
.attr("y", d => 300 - d * 5)
.attr("width", 80)
.attr("height", d => d * 5)
.attr("class", "bar") // Hover effect যোগ করা
.on("mouseover", function(event, d) {
tooltip.transition().duration(200).style("opacity", 1);
tooltip.html("Value: " + d)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout",
function() { tooltip.transition().duration(200).style("opacity", 0); });
ব্যাখ্যা:
- Tooltip: মাউস হোভার করার সময় টুলটিপ দেখানো হয়।
- Hover Effect: মাউস হোভার করলে বার এর রঙ পরিবর্তন হয়।
D3.js-এ Tooltip এবং Hover Effects ব্যবহার করে আপনি আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করতে পারেন। Tooltip ইউজারকে অতিরিক্ত তথ্য সরবরাহ করে এবং Hover Effects ডেটার ভিজ্যুয়াল পরিবর্তন করে, যা ডেটার সাথে ইন্টারঅ্যাকশনকে আরও প্রাসঙ্গিক এবং আকর্ষণীয় করে তোলে।
Read more
