D3.js একটি অত্যন্ত শক্তিশালী লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়, এবং এটি ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করার জন্যও খুবই উপযোগী। D3.js ব্যবহার করে বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ চার্ট তৈরি করা যেতে পারে, যেখানে ব্যবহারকারীরা বিভিন্ন উপাদান বা ডেটার সাথে ইন্টারঅ্যাক্ট করতে পারেন, যেমন মাউস হভার, ক্লিক, ড্র্যাগ ইত্যাদি।
এই গাইডে, আমরা D3.js দিয়ে একটি ইন্টারঅ্যাকটিভ লাইন চার্ট তৈরি করবো, যা ব্যবহারকারী মাউস হভার বা ক্লিকের মাধ্যমে ডেটা পয়েন্টের মান দেখতে সক্ষম হবে।
১. প্রাথমিক সেটআপ
প্রথমে আপনাকে D3.js লাইব্রেরি আপনার HTML ফাইলে ইনক্লুড করতে হবে। আপনি CDN ব্যবহার করতে পারেন।
<script src="https://d3js.org/d3.v7.min.js"></script>
এরপর, একটি SVG ক্যানভাস তৈরি করতে হবে যেখানে লাইন চার্ট আঁকা হবে।
<svg width="800" height="400"></svg>
২. ডেটা তৈরি করা
এখন, আমরা একটি সাধারণ ডেটাসেট তৈরি করবো, যেখানে date এবং value থাকবে। ডেটা কোন ধরনের পরিমাপ হতে পারে, যেমন সময়ের সাথে কোনো মানের পরিবর্তন।
const data = [
{ date: new Date(2020, 0, 1), value: 30 },
{ date: new Date(2020, 1, 1), value: 40 },
{ date: new Date(2020, 2, 1), value: 35 },
{ date: new Date(2020, 3, 1), value: 50 },
{ date: new Date(2020, 4, 1), value: 60 },
{ date: new Date(2020, 5, 1), value: 80 }
];
৩. স্কেল এবং লাইন জেনারেটর তৈরি করা
এখন, স্কেল তৈরি করতে হবে যাতে x অক্ষের জন্য সময় এবং y অক্ষের জন্য পরিমাণ অনুযায়ী স্কেল নির্ধারণ করা হয়। এছাড়াও, একটি line generator ফাংশন তৈরি করতে হবে।
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.select("svg")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0]);
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.value));
৪. লাইন চার্ট আঁকা
এখন, ডেটা অনুযায়ী একটি লাইন চার্ট আঁকতে হবে। এখানে আমরা একটি path ব্যবহার করবো যা লাইন চার্টটিকে প্রদর্শন করবে।
svg.append("path")
.data([data])
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", 2);
৫. অক্ষ (Axis) তৈরি করা
একটি চার্টে অক্ষ যোগ করা খুবই গুরুত্বপূর্ণ। D3.js এ অক্ষ তৈরি করতে axisBottom এবং axisLeft ব্যবহার করা হয়।
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
৬. ইন্টারঅ্যাকটিভ ফিচার: মাউস হভার
এখন, আমাদের চার্টে মাউস হভার ইন্টারঅ্যাকশন যোগ করতে হবে, যাতে ব্যবহারকারী যখন কোন ডেটা পয়েন্টের উপর মাউস রাখবে, তখন তার মান দেখতে পাবে।
svg.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("r", 5)
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", 1.5)
.on("mouseover", function(event, d) {
d3.select(this).transition()
.duration(200)
.attr("r", 10);
tooltip.transition().duration(200).style("opacity", 1);
tooltip.html("Date: " + d.date.toLocaleDateString() + "<br>Value: " + d.value)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function() {
d3.select(this).transition()
.duration(200)
.attr("r", 5);
tooltip.transition().duration(500).style("opacity", 0);
});
এখানে:
circleএলিমেন্ট ব্যবহার করা হয়েছে ডেটা পয়েন্ট প্রদর্শন করার জন্য।mouseoverইভেন্টে, ডেটা পয়েন্টের উপর মাউস রাখলে তার মান (যেমন তারিখ এবং ভ্যালু) একটি টুলটিপে দেখানো হয়।mouseoutইভেন্টে, মাউস যখন ডেটা পয়েন্টের বাইরে চলে যায়, তখন টুলটিপ অদৃশ্য হয়ে যায়।
৭. টুলটিপ তৈরি করা
টুলটিপ একটি HTML ডিভ এলিমেন্ট হিসেবে তৈরি করা যায় যা ব্যবহারকারীকে ডেটার মান দেখানোর জন্য ব্যবহৃত হবে।
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("opacity", 0)
.style("background-color", "rgba(0, 0, 0, 0.7)")
.style("color", "#fff")
.style("padding", "5px")
.style("border-radius", "4px")
.style("pointer-events", "none");
এটি একটি গোপন টুলটিপ তৈরি করবে, যা শুধুমাত্র মাউস হভার হলে দৃশ্যমান হবে।
৮. সম্পূর্ণ কোড
এখন, আমাদের পুরো HTML এবং JavaScript কোডটি দেখে নেওয়া যাক।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js Interactive Line Chart</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.line {
fill: none;
stroke: steelblue;
stroke-width: 2;
}
.tooltip {
position: absolute;
opacity: 0;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px;
border-radius: 4px;
pointer-events: none;
}
</style>
</head>
<body>
<svg width="800" height="400"></svg>
<script>
const data = [
{ date: new Date(2020, 0, 1), value: 30 },
{ date: new Date(2020, 1, 1), value: 40 },
{ date: new Date(2020, 2, 1), value: 35 },
{ date: new Date(2020, 3, 1), value: 50 },
{ date: new Date(2020, 4, 1), value: 60 },
{ date: new Date(2020, 5, 1), value: 80 }
];
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.select("svg")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max
(data, d => d.value)]) .range([height, 0]);
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.value));
svg.append("path")
.data([data])
.enter()
.append("path")
.attr("class", "line")
.attr("d", line);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip");
svg.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("r", 5)
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", 1.5)
.on("mouseover", function(event, d) {
d3.select(this).transition()
.duration(200)
.attr("r", 10);
tooltip.transition().duration(200).style("opacity", 1);
tooltip.html("Date: " + d.date.toLocaleDateString() + "<br>Value: " + d.value)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function() {
d3.select(this).transition()
.duration(200)
.attr("r", 5);
tooltip.transition().duration(500).style("opacity", 0);
});
D3.js দিয়ে ইন্টারঅ্যাকটিভ চার্ট তৈরি করা অত্যন্ত সহজ এবং দক্ষ। এখানে মাউস হভার ইভেন্ট যোগ করে ব্যবহারকারীকে ডেটা পয়েন্টের মান দেখতে সহায়তা করা হয়েছে। D3.js এর মাধ্যমে আরও অনেক ধরনের ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব, যেমন ড্র্যাগ, ক্লিক ইত্যাদি।
D3.js এর মাধ্যমে User Interaction এবং Event Handling ডেটা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। D3.js ইভেন্ট ম্যানিপুলেশনের জন্য শক্তিশালী API প্রদান করে, যা ব্যবহারকারীর ইনপুট (যেমন, ক্লিক, মাউসওভার, ড্র্যাগ) অনুযায়ী গ্রাফ বা চার্টে পরিবর্তন করতে সাহায্য করে।
D3.js ইভেন্ট হ্যান্ডলিং
D3.js ইভেন্ট হ্যান্ডলিং সিস্টেমটি DOM Events (যেমন, click, mouseover, mouseout, mousemove, keydown, ইত্যাদি) এর উপর ভিত্তি করে কাজ করে। D3.js ব্যবহারকারীর কার্যকলাপ অনুসরণ করে DOM উপাদানের উপর পরিবর্তন করতে পারে।
ইভেন্ট হ্যান্ডলার যুক্ত করা
D3.js-এ ইভেন্ট হ্যান্ডলার যোগ করতে on() মেথড ব্যবহার করা হয়। on() মেথডটি নির্দিষ্ট ইভেন্ট (যেমন, click, mouseover) এবং সংশ্লিষ্ট কার্যকলাপ (callback function) গ্রহণ করে।
সিনট্যাক্স:
d3.select("element").on("event", function(event) {
// event handler code
});
এখানে:
elementহলো DOM এলিমেন্ট যেটিতে ইভেন্ট হ্যান্ডলার যোগ করা হবে।"event"হলো ইভেন্ট টাইপ (যেমনclick,mouseover,mousemoveইত্যাদি)।function(event)হলো ইভেন্ট হ্যান্ডলার, যা ইভেন্ট ঘটলে চালু হবে।
উদাহরণ ১: ক্লিক ইভেন্ট
এখানে একটি div এলিমেন্টে ক্লিক ইভেন্ট হ্যান্ডলিং এর মাধ্যমে ব্যবহারকারীর ক্লিকের পরে কিছু পরিবর্তন করা হচ্ছে।
// একটি div তৈরি করা
d3.select("body").append("div")
.attr("id", "clickable")
.text("Click me to change my color!")
.style("width", "200px")
.style("height", "50px")
.style("background-color", "lightblue")
.style("text-align", "center")
.style("line-height", "50px");
// ক্লিক ইভেন্ট যোগ করা
d3.select("#clickable").on("click", function() {
d3.select(this).style("background-color", "lightcoral"); // রঙ পরিবর্তন
d3.select(this).text("I was clicked!"); // টেক্সট পরিবর্তন
});
এখানে:
- প্রথমে একটি
divতৈরি করা হয়েছে এবং কিছু স্টাইল যোগ করা হয়েছে। - ক্লিক করার পর
divএর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে এবং টেক্সট পরিবর্তন করা হয়েছে।
উদাহরণ ২: মাউসওভার এবং মাউসআউট ইভেন্ট
এখানে মাউসওভার এবং মাউসআউট ইভেন্টের মাধ্যমে একটি circle এলিমেন্টের রঙ পরিবর্তন করা হচ্ছে।
// SVG তৈরি করা
const svg = d3.select("body").append("svg")
.attr("width", 400)
.attr("height", 200);
// একটি circle তৈরি করা
svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50)
.style("fill", "steelblue");
// মাউসওভার এবং মাউসআউট ইভেন্ট হ্যান্ডলিং
svg.select("circle")
.on("mouseover", function() {
d3.select(this).style("fill", "orange"); // রঙ পরিবর্তন
})
.on("mouseout", function() {
d3.select(this).style("fill", "steelblue"); // পূর্ববর্তী রঙে ফিরিয়ে আনা
});
এখানে:
mouseoverইভেন্টে মাউসcircleএলিমেন্টের উপরে এলে তার রঙ পরিবর্তন হচ্ছে।mouseoutইভেন্টে মাউস যখনcircleএলিমেন্টের বাইরে চলে যায়, তখন তার রঙ পূর্ববর্তী অবস্থায় ফিরে আসছে।
উদাহরণ ৩: মাউসমুভ (Mousemove) ইভেন্ট
mousemove ইভেন্ট ব্যবহার করে ডেটা পয়েন্টের উপর মাউসের অবস্থান ট্র্যাক করা এবং সেই অনুযায়ী গ্রাফ বা চার্টে পরিবর্তন আনা যায়।
// SVG তৈরি করা
const svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 400);
// মাউস পয়েন্টের অবস্থান ট্র্যাক করা
svg.on("mousemove", function(event) {
const coords = d3.pointer(event); // মাউসের বর্তমান অবস্থান (x, y)
console.log("Mouse Coordinates: ", coords);
});
এখানে:
d3.pointer(event)মেথড ব্যবহার করে মাউসের বর্তমান x এবং y কোঅর্ডিনেট বের করা হচ্ছে।- এটি আপনাকে মাউসের অবস্থান অনুযায়ী ডেটা বা গ্রাফিক্যাল উপাদানগুলোর উপর ইন্টারঅ্যাকশন পরিচালনা করতে সহায়ক।
উদাহরণ ৪: ড্র্যাগ (Drag) ইভেন্ট
D3.js-এ drag ইভেন্ট ব্যবহার করে আপনি ব্যবহারকারীর ড্র্যাগিং এর মাধ্যমে DOM উপাদানকে মুভ (সরানো) করতে পারেন। D3.js-এর d3.drag() ফাংশন ব্যবহার করে এটি করা যায়।
// SVG তৈরি করা
const svg = d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 400);
// একটি circle তৈরি করা
const circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 30)
.style("fill", "green");
// ড্র্যাগ ইভেন্ট হ্যান্ডলার
const drag = d3.drag()
.on("drag", function(event) {
d3.select(this)
.attr("cx", event.x) // ড্র্যাগ করার সময় x অবস্থান
.attr("cy", event.y); // ড্র্যাগ করার সময় y অবস্থান
});
circle.call(drag); // circle এ ড্র্যাগ ইভেন্ট কল করা
এখানে:
d3.drag()ফাংশন ব্যবহার করেcircleএলিমেন্টটি ড্র্যাগ করার সময় তার cx এবং cy অ্যাট্রিবিউট পরিবর্তন করা হচ্ছে, যাতে এটি ব্যবহারকারীর ড্র্যাগ অনুযায়ী মুভ করতে পারে।
ইভেন্টের সম্পর্কিত কিছু গুরুত্বপূর্ণ মেথড
- event.target: এই মেথডটি ইভেন্টের মূল লক্ষ্য (target) উপাদানটিকে রিটার্ন করে।
- event.sourceEvent: মূল DOM ইভেন্ট (যেমন
click,mouseover) এর সুত্র। - d3.pointer(event): মাউস পয়েন্টের অবস্থান (x, y) পাওয়ার জন্য ব্যবহৃত হয়।
D3.js-এ User Interaction এবং Event Handling ডেটা ভিজ্যুয়ালাইজেশনকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। on() মেথডের মাধ্যমে আপনি ডিফারেন্ট ইভেন্ট যেমন click, mouseover, mousemove, drag, ইত্যাদির সাথে ইন্টারঅ্যাকশন তৈরি করতে পারেন। এতে আপনার ভিজ্যুয়ালাইজেশনকে ব্যবহারকারীর কার্যকলাপ অনুসারে প্রতিক্রিয়া জানানো যায়, যা একটি উন্নত এবং মজাদার ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সহায়ক।
Zoom এবং Pan হল দুটি গুরুত্বপূর্ণ ইন্টারঅ্যাকশন যা D3.js-এ ডেটা ভিজ্যুয়ালাইজেশনের সাথে যুক্ত করা হয়। এগুলি ব্যবহারকারীদের ডেটা ভিজ্যুয়ালাইজেশন বা গ্রাফের বিভিন্ন অংশে জুম ইন বা জুম আউট করার সুযোগ দেয়, এবং গ্রাফের বিভিন্ন অংশে প্যান (স্ক্রল) করতে সাহায্য করে। এটি সাধারণত ম্যাপ, চার্ট, বা অন্যান্য গ্রাফিক্যাল উপাদানগুলির জন্য ব্যবহৃত হয় যেখানে ব্যবহারকারীরা ডেটাকে বিশ্লেষণ করতে চান।
Zoom Interaction
Zooming হল একটি প্রক্রিয়া যেখানে ব্যবহারকারী একটি ভিজ্যুয়ালাইজেশনে ইনপুটের মাধ্যমে (যেমন মাউস হুইল বা ড্র্যাগ করে) ভিউ স্কেল পরিবর্তন করতে পারে। D3.js-এ zoom ইন্টারঅ্যাকশন তৈরি করার জন্য, d3.zoom() মেথড ব্যবহার করা হয়।
Pan Interaction
Panning হল একটি প্রক্রিয়া যেখানে ব্যবহারকারী ডেটার একটি নির্দিষ্ট অংশের দিকে স্ক্রল বা প্যান করতে পারে। এটি সাধারণত জুম ইন বা আউট করার সময় একসাথে ব্যবহৃত হয়, যাতে ব্যবহারকারী পর্দার এক প্রান্ত থেকে অন্য প্রান্তে স্থানান্তর করতে পারে।
D3.js-এ Zoom এবং Pan Interaction ব্যবহার করা
D3.js-এ Zoom এবং Pan ইন্টারঅ্যাকশন তৈরি করার জন্য, সাধারণত d3.zoom() এবং d3.event.transform ব্যবহার করা হয়। এখানে আমরা একটি সাধারণ উদাহরণ দেখবো যেখানে জুম ইন এবং আউট, এবং প্যানিং করা যাবে।
উদাহরণ: Zoom এবং Pan Interaction
HTML ও CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Zoom and Pan Example</title>
<style>
body {
margin: 0;
padding: 0;
}
svg {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<svg></svg>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const svg = d3.select("svg");
const width = window.innerWidth;
const height = window.innerHeight;
// স্কেলিং ও প্যানিং এর জন্য জুম ফাংশন
const zoom = d3.zoom()
.scaleExtent([1, 10]) // সর্বনিম্ন এবং সর্বোচ্চ জুম পরিসীমা
.translateExtent([[0, 0], [width, height]]) // স্ক্রীনের সীমানা নির্ধারণ
.on("zoom", zoomed); // জুম ইভেন্ট হ্যান্ডলার
// SVG-তে জুম ফাংশন প্রয়োগ
svg.call(zoom);
// ডোম উপাদানগুলি তৈরি
const rects = svg.append("g")
.selectAll("rect")
.data([30, 70, 110, 150, 190])
.enter()
.append("rect")
.attr("x", d => d)
.attr("y", 50)
.attr("width", 50)
.attr("height", 100)
.attr("fill", "steelblue");
// জুম ইভেন্টের জন্য ফাংশন
function zoomed(event) {
const transform = event.transform; // জুম এবং প্যান ট্রান্সফরমেশন
// উপাদানগুলির জন্য ট্রান্সফরমেশন প্রয়োগ
svg.select("g")
.attr("transform", transform);
}
কোড ব্যাখ্যা:
- SVG এলিমেন্ট তৈরি:
d3.select("svg")এর মাধ্যমে SVG এলিমেন্ট নির্বাচিত করা হয়, যা পুরো গ্রাফের জন্য বেস কনটেইনার। - Zoom ফাংশন:
d3.zoom()ব্যবহার করা হয়েছে, যাতে ব্যবহারকারী জুম ইন ও আউট করতে পারেন।.scaleExtent([1, 10])এর মাধ্যমে জুমের পরিসীমা নির্ধারণ করা হয়েছে (এখানে ১x থেকে ১০x পর্যন্ত)।.translateExtent([[0, 0], [width, height]])এর মাধ্যমে স্কেল বা ট্রান্সলেট করার সীমানা নির্ধারণ করা হয়েছে।
- Zoom ইভেন্ট:
zoom.on("zoom", zoomed)মাধ্যমে জুম ইভেন্ট ট্রিগার করা হয় এবং একটি কাস্টম ফাংশনzoomedতৈরি করা হয় যা স্কেল ও ট্রান্সলেট করে। - প্যানিং: প্যানিং করার জন্য,
transformব্যবহার করা হয়েছে যা জুম ও ট্রান্সলেট প্রয়োগ করবে এবং গ্রাফের উপাদানগুলিকে প্যান করবে। - ডেটা বাইন্ডিং: বার তৈরি করার জন্য
data([30, 70, 110, 150, 190])ব্যবহার করা হয়েছে এবং সেগুলি গ্রাফে রেন্ডার করা হয়েছে।
Zoom এবং Pan Interaction এর মধ্যে পার্থক্য:
- Zoom: এটি স্কেল পরিবর্তন করে, অর্থাৎ আপনি ভিউ এর আকার বড় বা ছোট করতে পারেন।
- Pan: এটি ভিউ এর অবস্থান পরিবর্তন করে, অর্থাৎ আপনি ভিউ এর ভেতরে স্ক্রল করতে পারেন বা অন্যদিকে সরাতে পারেন।
D3.js-এ Zoom এবং Pan ইন্টারঅ্যাকশন ব্যবহারকারীদের ডেটা ভিজ্যুয়ালাইজেশন ভালোভাবে এনগেজ করতে সাহায্য করে। ব্যবহারকারীরা ডেটার নির্দিষ্ট অংশে জুম ইন বা আউট করতে পারবে এবং প্যান করতে পারবে, যা তাদের জন্য বিশ্লেষণ বা ডেটা অন্বেষণ করার অভিজ্ঞতা আরও উন্নত করে। D3.js-এ এই ইন্টারঅ্যাকশনগুলো খুবই সহজে প্রয়োগ করা যায় এবং ডেটার সাথে ইন্টারঅ্যাক্ট করার ক্ষমতা বৃদ্ধি পায়।
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 ডেটার ভিজ্যুয়াল পরিবর্তন করে, যা ডেটার সাথে ইন্টারঅ্যাকশনকে আরও প্রাসঙ্গিক এবং আকর্ষণীয় করে তোলে।
Brushing এবং Linking হল ডেটা ভিজ্যুয়ালাইজেশনে ব্যবহৃত ইন্টারঅ্যাকশন টেকনিক যা ব্যবহারকারীকে ভিজ্যুয়ালাইজেশনে বিভিন্ন অংশ নির্বাচন এবং একে অপরের সাথে সম্পর্কিত করার সুযোগ দেয়। এই দুটি টেকনিক সাধারণত বিশাল ডেটাসেটের মধ্যে প্রয়োজনীয় তথ্য সহজে বের করতে এবং বিভিন্ন ভিউপোর্ট বা চার্টে ডেটার সম্পর্ক দৃশ্যমান করতে ব্যবহৃত হয়।
Brushing
Brushing একটি ইন্টারঅ্যাকটিভ টেকনিক যা ব্যবহারকারীদের একটি নির্দিষ্ট অঞ্চলে ডেটা নির্বাচন করার সুযোগ দেয়। এটি সাধারণত x-axis বা y-axis বা উভয় ক্ষেত্রেই একটি রেঞ্জ নির্বাচন করার জন্য ব্যবহৃত হয়। নির্বাচিত অঞ্চলটি তখন অন্য ভিজ্যুয়াল উপাদানগুলোর সাথে linking বা সম্পর্ক স্থাপন করতে ব্যবহৃত হয়।
Linking
Linking হল এমন একটি প্রক্রিয়া যেখানে একটি ভিজ্যুয়াল উপাদানে ডেটার নির্বাচন অন্য একটি ভিজ্যুয়াল উপাদানেও প্রতিফলিত হয়। এটি একাধিক ভিজ্যুয়ালাইজেশন একে অপরের সাথে সংযুক্ত করার মাধ্যমে ডেটার সম্পর্ক বুঝতে সাহায্য করে।
Brushing এবং Linking এর প্রয়োগ
এখানে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে দুটি ভিন্ন চার্টে Brushing এবং Linking প্রয়োগ করা হয়েছে। প্রথমে একটি স্ক্যাটার প্লট তৈরি করা হবে, এরপর একটি স্লাইডার ব্যবহার করে নির্বাচিত একটি অঞ্চল ভিজ্যুয়ালাইজ করা হবে।
১. স্ক্যাটার প্লট তৈরি
ধরি, একটি স্ক্যাটার প্লট তৈরি করবো যেখানে ডেটার কিছু পয়েন্ট থাকবে। ডেটা দুটি ভেরিয়েবল (x এবং y) নিয়ে তৈরি হবে।
const data = [
{x: 30, y: 30}, {x: 50, y: 70}, {x: 70, y: 90}, {x: 90, y: 110},
{x: 100, y: 120}, {x: 120, y: 140}, {x: 150, y: 180}, {x: 180, y: 200},
{x: 200, y: 250}, {x: 220, y: 270}
];
const width = 500;
const height = 400;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// X এবং Y স্কেল তৈরি করা
const x = d3.scaleLinear().domain([0, d3.max(data, d => d.x)]).range([0, width]);
const y = d3.scaleLinear().domain([0, d3.max(data, d => d.y)]).range([height, 0]);
// স্ক্যাটার প্লট আঁকা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 5)
.attr("fill", "steelblue");
এখন, আমরা এই স্ক্যাটার প্লটে brushing প্রয়োগ করবো, যাতে ব্যবহারকারী একটি রেঞ্জ নির্বাচন করতে পারে।
২. Brushing প্রযুক্তি যোগ করা
Brushing প্রয়োগ করার জন্য D3.js এর d3.brush() মেথড ব্যবহার করা হয়। এটি ব্যবহারকারীকে একটি নির্দিষ্ট অঞ্চল নির্বাচন করতে সহায়তা করে।
// ব্রাশ আর্চিটেকচার তৈরি
const brush = d3.brush()
.extent([[0, 0], [width, height]]) // ব্রাশের আকার
.on("end", brushed); // ব্রাশ শেষ হলে callback ফাংশন
// ব্রাশ ক্যানভাসে যোগ করা
svg.append("g")
.attr("class", "brush")
.call(brush);
// ব্রাশিং ইভেন্ট হ্যান্ডলার
function brushed(event) {
const selection = event.selection;
// যদি ব্রাশ নির্বাচন থাকে
if (selection) {
const [[x0, y0], [x1, y1]] = selection;
// নির্বাচিত অঞ্চলগুলোকে রঙিন করা
svg.selectAll("circle")
.attr("fill", d => {
// চেক করা যে ডেটা নির্বাচিত অঞ্চলের মধ্যে আছে কি না
return x(d.x) >= x0 && x(d.x) <= x1 && y(d.y) >= y0 && y(d.y) <= y1 ? "orange" : "steelblue";
});
}
}
এখানে, ব্রাশিং করার পর, নির্বাচিত অঞ্চলটির মধ্যে থাকা সব ডেটা পয়েন্টগুলির রঙ পরিবর্তন করা হবে। ব্রাশিংয়ের পর আপনি দেখতে পাবেন যে নির্বাচিত এলাকা Orange রঙে হাইলাইট হয়েছে।
৩. Linking প্রযুক্তি যোগ করা
এবার আমরা linking প্রয়োগ করবো, যেখানে ব্রাশিং করার পর নির্বাচিত ডেটার সাথে সম্পর্কিত অন্যান্য চার্ট বা ভিউপোর্টের ডেটা হাইলাইট হবে।
এটি করার জন্য আমরা দুটি ভিন্ন চার্ট তৈরি করতে পারি (যেমন, একটি স্ক্যাটার প্লট এবং একটি বারের গ্রাফ), যেখানে একটি চার্টে ব্রাশিং করা হলে অন্য চার্টে ডেটা আপডেট হবে।
// নতুন বারের গ্রাফ (Linking)
const barWidth = 20;
const barHeight = 300;
const barSvg = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", barHeight);
const xBar = d3.scaleBand().domain(data.map(d => d.x)).range([0, 500]).padding(0.1);
const yBar = d3.scaleLinear().domain([0, d3.max(data, d => d.y)]).range([barHeight, 0]);
barSvg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => xBar(d.x))
.attr("y", d => yBar(d.y))
.attr("width", xBar.bandwidth())
.attr("height", d => barHeight - yBar(d.y))
.attr("fill", "steelblue");
// Linking Event: ব্রাশ করার পর বারের গ্রাফ আপডেট করা
function brushed(event) {
const selection = event.selection;
if (selection) {
const [[x0, y0], [x1, y1]] = selection;
// স্ক্যাটার প্লটে নির্বাচিত ডেটা পয়েন্টের সাথে সম্পর্কিত বারের রঙ আপডেট করা
svg.selectAll("circle")
.attr("fill", d => {
return x(d.x) >= x0 && x(d.x) <= x1 && y(d.y) >= y0 && y(d.y) <= y1 ? "orange" : "steelblue";
});
barSvg.selectAll("rect")
.attr("fill", d => {
return x(d.x) >= x0 && x(d.x) <= x1 && y(d.y) >= y0 && y(d.y) <= y1 ? "orange" : "steelblue";
});
}
}
এখানে, ব্রাশিং করার সময়, স্ক্যাটার প্লট এবং বারের গ্রাফে একসাথে ডেটার নির্বাচিত অঞ্চলটি হাইলাইট হবে।
Brushing এবং Linking হলো অত্যন্ত শক্তিশালী ইন্টারঅ্যাকশন টেকনিক যা ব্যবহারকারীদের একাধিক ভিজ্যুয়ালাইজেশন বা ডেটার মধ্যে সম্পর্ক বুঝতে সাহায্য করে। D3.js এই ধরনের ইন্টারঅ্যাকশন সহজে তৈরি করতে সাহায্য করে, যেখানে brushing ব্যবহারকারীদের ডেটা সিলেক্ট করতে দেয় এবং linking ব্যবহার করে একাধিক চার্ট বা ভিউপোর্টের মধ্যে সম্পর্ক স্থাপন করে। এই টেকনিকগুলি বিশাল ডেটাসেটের বিশ্লেষণ এবং ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশনের ক্ষেত্রে বিশেষভাবে উপকারী।
Read more
