DC.js ব্যবহার করে ডেটা ভিজ্যুয়ালাইজেশনে Custom Tooltip (কাস্টম টুলটিপ) তৈরি করা এবং styling করা সহজ। টুলটিপগুলি চার্টের উপর মাউস হোভার করলে প্রদর্শিত হয় এবং ব্যবহারকারীদের জন্য তথ্য প্রদানের একটি কার্যকর উপায়।
এখানে আমরা দেখব কিভাবে DC.js এর মাধ্যমে কাস্টম টুলটিপ কন্টেন্ট তৈরি করা যায় এবং তার স্টাইল কাস্টমাইজ করা যায়।
১. টুলটিপ কন্টেন্ট কাস্টমাইজেশন
DC.js দ্বারা তৈরি চার্টে ডিফল্ট টুলটিপ সাধারণত D3.js এর title অ্যাট্রিবিউটের মাধ্যমে তৈরি হয়। তবে আপনি কাস্টম টুলটিপ কন্টেন্ট তৈরি করতে D3.js এর mouseover এবং mouseout ইভেন্ট ব্যবহার করতে পারেন।
২. DC.js: Custom Tooltip Content এবং Styling
নিচে একটি উদাহরণ দেওয়া হল, যেখানে একটি Bar Chart তৈরি করা হয়েছে এবং কাস্টম টুলটিপ কন্টেন্ট এবং স্টাইল যোগ করা হয়েছে।
৩. 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 Custom Tooltip and Styling</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;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
border-radius: 4px;
display: none;
pointer-events: none;
font-size: 14px;
}
</style>
</head>
<body>
<h1>DC.js Custom Tooltip and Styling</h1>
<div id="bar-chart"></div>
<div class="tooltip" id="tooltip"></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 categoryGroup = categoryDimension.group().reduceSum(d => d.value);
// DC.js বার চার্ট
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);
// চার্ট রেন্ডার
dc.renderAll();
// টুলটিপ কাস্টমাইজেশন
const tooltip = d3.select("#tooltip");
barChart.on("pretransition", function(chart) {
chart.selectAll("rect")
.on("mouseover", function(event, d) {
const xPosition = event.pageX + 5;
const yPosition = event.pageY - 28;
// টুলটিপ কন্টেন্ট
tooltip.html(`Category: ${d.key}<br>Value: ${d.value}`)
.style("left", `${xPosition}px`)
.style("top", `${yPosition}px`)
.style("display", "inline-block");
})
.on("mouseout", function() {
tooltip.style("display", "none");
});
});
</script>
</body>
</html>
৪. কোডের ব্যাখ্যা
১. ডেটাসেট তৈরি এবং Crossfilter সেটআপ:
এখানে একটি সাধারণ ডেটাসেট তৈরি করা হয়েছে, যেখানে প্রতিটি ক্যাটেগরি (category) এর সাথে একটি মান (value) যুক্ত করা হয়েছে। crossfilter() ব্যবহার করে ডেটা ইন্ডেক্স করা হয়েছে এবং dimension ও group তৈরি করা হয়েছে।
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);
২. DC.js বার চার্ট কনফিগারেশন:
DC.js এর barChart() ফাংশন ব্যবহার করে একটি বার চার্ট তৈরি করা হয়েছে এবং সেই অনুযায়ী ডাইমেনশন এবং গ্রুপ সেট করা হয়েছে।
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);
৩. কাস্টম টুলটিপ কন্টেন্ট:
mouseover ইভেন্টের মাধ্যমে টুলটিপ কাস্টম কন্টেন্ট সেট করা হয়েছে। টুলটিপের কন্টেন্টে category এবং value দেখানো হচ্ছে।
const tooltip = d3.select("#tooltip");
barChart.on("pretransition", function(chart) {
chart.selectAll("rect")
.on("mouseover", function(event, d) {
const xPosition = event.pageX + 5;
const yPosition = event.pageY - 28;
// টুলটিপ কন্টেন্ট
tooltip.html(`Category: ${d.key}<br>Value: ${d.value}`)
.style("left", `${xPosition}px`)
.style("top", `${yPosition}px`)
.style("display", "inline-block");
})
.on("mouseout", function() {
tooltip.style("display", "none");
});
});
এখানে, টুলটিপের কন্টেন্ট এবং পজিশন mouseover ইভেন্টের মাধ্যমে কাস্টমাইজ করা হয়েছে।
৪. টুলটিপ স্টাইলিং:
টুলটিপের জন্য একটি CSS ক্লাস tooltip ব্যবহার করা হয়েছে, যেখানে ব্যাকগ্রাউন্ড কালার, প্যাডিং, স্ট্রোক এবং অন্যান্য স্টাইল প্রোপার্টি দেওয়া হয়েছে।
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
border-radius: 4px;
display: none;
pointer-events: none;
font-size: 14px;
}
৫. dc.renderAll() দিয়ে চার্ট রেন্ডার:
সবশেষে, dc.renderAll() ফাংশন দিয়ে চার্ট রেন্ডার করা হয়।
dc.renderAll();
- Custom Tooltip Content: আপনি যেকোনো ডেটা কন্টেন্ট কাস্টমাইজ করে টুলটিপে প্রদর্শন করতে পারেন। এখানে, আমরা ক্যাটেগরি এবং মান দেখাচ্ছি।
- Tooltip Styling: টুলটিপের ব্যাকগ্রাউন্ড, প্যাডিং, স্টাইল এবং অবস্থান কাস্টমাইজ করা হয়েছে।
- Interactive Tooltips: টুলটিপটি মাউসের অবস্থানের সাথে অটোমেটিক্যালি স্থানান্তরিত হয় এবং মাউস আউট করলে নিভে যায়।
এই প্রক্রিয়া ব্যবহার করে আপনি DC.js এর বিভিন্ন চার্টে Custom Tooltip কন্টেন্ট এবং Styling যোগ করতে পারেন।
Read more
