D3.js-এ Heatmap তৈরি একটি শক্তিশালী ভিজ্যুয়ালাইজেশন পদ্ধতি যা ডেটার মধ্যে প্যাটার্ন বা সম্পর্ক দেখাতে সহায়ক। এটি সাধারণত একটি ম্যাট্রিক্স বা গ্রিড আকারে ব্যবহৃত হয়, যেখানে প্রতিটি কোষের রঙ বা গা dark ়তা নির্ধারিত হয় ডেটার মানের উপর ভিত্তি করে। Heatmap প্রায়ই ব্যবহৃত হয় তাপমাত্রার পরিবর্তন, ব্যবসায়িক ডেটা, ওয়েব এনালিটিক্স, বা জীববিজ্ঞান-এ।
এখানে, D3.js ব্যবহার করে একটি সাধারণ Heatmap তৈরি করার প্রক্রিয়া বিশ্লেষণ করা হবে।
১. Heatmap কি?
Heatmap একটি ভিজ্যুয়াল রেপ্রেজেন্টেশন যা বিভিন্ন ডেটা পয়েন্টের মানের উপর ভিত্তি করে রঙের শেড ব্যবহার করে। এটি সাধারণত একটি গ্রিডের আকারে থাকে যেখানে প্রতিটি কোষের রঙ ডেটার মানকে প্রতিনিধিত্ব করে। অধিকাংশ ক্ষেত্রে গা dark ় রঙের কোষগুলোর মান বেশি এবং হালকা রঙের কোষগুলোর মান কম।
২. D3.js-এ Heatmap তৈরি করার উপাদানসমূহ
Heatmap তৈরি করতে আপনাকে নিম্নলিখিত উপাদানগুলো দরকার:
- SVG এলিমেন্ট – Heatmap এর জন্য গ্রিড বা সেল গুলো তৈরি করতে।
- ডেটা সেট – একটি 2D অ্যারে বা মেট্রিক্স যা প্রতিটি সেলের মান ধারণ করে।
- স্কেল – ডেটার মানের উপর ভিত্তি করে রঙ পরিবর্তন করতে একটি স্কেল তৈরি করতে হবে।
- প্রতিটি সেল – SVG রেকট্যাঙ্গেল (rect) তৈরি করে প্রতিটি সেল উপস্থাপন করতে হবে।
- রঙের স্কিম – সেলগুলোর জন্য রঙ নির্ধারণ করতে।
৩. Heatmap তৈরি করার উদাহরণ
এখানে একটি সাধারণ 2D Heatmap তৈরি করার উদাহরণ দেওয়া হলো যেখানে ডেটা সেটের প্রতিটি মানের ভিত্তিতে রঙ পরিবর্তন হবে।
৩.১ HTML এবং SVG এলিমেন্ট তৈরি
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heatmap Example</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.cell {
stroke: white;
stroke-width: 0.5;
}
</style>
</head>
<body>
<svg width="600" height="600"></svg>
<script src="heatmap.js"></script>
</body>
</html>
৩.২ ডেটা সেট এবং স্কেল তৈরি
// ডেটা সেট (2D অ্যারে)
const data = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20],
[21, 22, 23, 24, 25]
];
// SVG এলিমেন্ট নির্বাচন
const svg = d3.select("svg");
// গ্রিডের প্যারামিটার
const gridSize = 50; // প্রতিটি সেলের আকার
const n = data.length; // রো-এর সংখ্যা
const m = data[0].length; // কলামের সংখ্যা
// স্কেল তৈরি করা (রঙের স্কিম)
const colorScale = d3.scaleSequential(d3.interpolateYlGnBu)
.domain([d3.min(data.flat()), d3.max(data.flat())]);
// x এবং y স্কেল তৈরি করা
const xScale = d3.scaleBand()
.domain(d3.range(m))
.range([0, gridSize * m]);
const yScale = d3.scaleBand()
.domain(d3.range(n))
.range([0, gridSize * n]);
এখানে, ডেটার জন্য আমরা একটি 2D অ্যারে ব্যবহার করেছি এবং colorScale তৈরি করার জন্য d3.scaleSequential এবং d3.interpolateYlGnBu রঙের স্কিম ব্যবহার করা হয়েছে।
৪. Heatmap এর সেল তৈরি করা
// সেলগুলো তৈরি করা
svg.selectAll(".cell")
.data(data.flat()) // ডেটা ফ্ল্যাট করা (2D অ্যারে থেকে 1D অ্যারে)
.enter().append("rect")
.attr("class", "cell")
.attr("x", (d, i) => xScale(i % m)) // x পজিশন
.attr("y", (d, i) => yScale(Math.floor(i / m))) // y পজিশন
.attr("width", gridSize)
.attr("height", gridSize)
.attr("fill", d => colorScale(d)); // সেলের রঙ সেট করা
এটি svg এলিমেন্টের মধ্যে rect (রেকট্যাঙ্গেল) উপাদান তৈরি করবে এবং প্রতিটি সেলের জন্য রঙ নির্ধারণ করবে ডেটা মানের উপর ভিত্তি করে।
৫. Tooltip সহ Heatmap
ডেটা মান বা সেলের বিস্তারিত দেখতে আপনি tooltip যোগ করতে পারেন, যাতে মাউস হোভার করলে সেলের মান দেখা যায়।
// টুলটিপ তৈরি করা
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// সেলগুলোর জন্য টুলটিপ যুক্ত করা
svg.selectAll(".cell")
.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(d) {
tooltip.transition().duration(200).style("opacity", 0);
});
এটি মাউস হোভার করার সময় একটি টুলটিপ প্রদর্শন করবে যা সেলের মান দেখাবে।
৬. ডায়নামিক Heatmap আপডেট
ডেটা আপডেটের মাধ্যমে Heatmap এর সেলগুলোকে পুনঃরেন্ডার করা যায়। উদাহরণস্বরূপ, আপনি নতুন ডেটা পাঠালে বা কোনো ইভেন্টে ডেটা পরিবর্তন করলে Heatmap আপডেট হবে।
৬.১ ডেটা আপডেটের ফাংশন
// ডেটা আপডেট ফাংশন
function updateHeatmap(newData) {
// নতুন ডেটা সেটে Heatmap আপডেট করা
svg.selectAll(".cell")
.data(newData.flat())
.transition()
.duration(500)
.attr("fill", d => colorScale(d));
}
// কিছু সময় পরে ডেটা পরিবর্তন করা
setTimeout(() => {
const newData = [
[2, 3, 4, 5, 6],
[7, 8, 9, 10, 11],
[12, 13, 14, 15, 16],
[17, 18, 19, 20, 21],
[22, 23, 24, 25, 26]
];
updateHeatmap(newData); // ডেটা আপডেট করা
}, 3000);
এটি 3 সেকেন্ড পরে নতুন ডেটা সেট গ্রহণ করবে এবং পুরানো Heatmap আপডেট করবে।
D3.js-এ Heatmap তৈরি করার জন্য আমরা SVG এলিমেন্ট, ডেটা বাইন্ডিং, স্কেল, এবং রঙের স্কিম ব্যবহার করেছি। Heatmap হল একটি শক্তিশালী টুল যা বড় পরিমাণ ডেটাকে সহজে বোঝার জন্য রঙের মাধ্যমে উপস্থাপন করে। আপনি ইন্টারঅ্যাকটিভ উপাদান যেমন tooltip এবং ডায়নামিক আপডেট যোগ করে Heatmap আরো কার্যকর এবং ব্যবহারকারী-বান্ধব করতে পারেন। D3.js আপনাকে ডেটা ভিজ্যুয়ালাইজেশনকে কাস্টমাইজ এবং ইন্টারঅ্যাকটিভ করার জন্য ব্যাপক সুবিধা প্রদান করে।
Read more
