D3.js এর মাধ্যমে axes (অক্ষ) এবং data points (ডেটা পয়েন্টস) এ ইন্টারঅ্যাকশন যোগ করা খুবই সহজ এবং কার্যকরী। এটি ব্যবহারকারীর জন্য ভিজ্যুয়ালাইজেশনকে আরও গতিশীল এবং তথ্যপূর্ণ করে তোলে। এই ইন্টারঅ্যাকশনগুলি, যেমন মাউস হোভার, ক্লিক, অথবা ড্র্যাগ ব্যবহার করে ডেটার বিশদ তথ্য প্রদর্শন এবং অ্যানিমেশন তৈরি করা যেতে পারে।
এই গাইডে, আমরা দেখবো কিভাবে D3.js ব্যবহার করে অক্ষ এবং ডেটা পয়েন্টের জন্য বিভিন্ন ইন্টারঅ্যাকশন যোগ করা যায়।
১. Axes (অক্ষ) তৈরি করা
D3.js এ অক্ষ (axis) তৈরি করতে d3.axisBottom(), d3.axisLeft(), d3.axisTop(), এবং d3.axisRight() মেথড ব্যবহার করা হয়। সাধারণত x-axis এবং y-axis তৈরি করতে হয় যা ডেটার স্কেল অনুযায়ী মান দেখায়।
উদাহরণ: X এবং Y অক্ষ তৈরি করা
// X এবং Y স্কেল তৈরি করা
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]);
// X অক্ষ তৈরি করা
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Y অক্ষ তৈরি করা
svg.append("g")
.call(d3.axisLeft(y));
এখানে, x এবং y স্কেল অনুযায়ী X এবং Y অক্ষ তৈরি করা হয়েছে।
২. Data Points (ডেটা পয়েন্টস) তৈরি করা
ডেটা পয়েন্টগুলি সাধারণত circle এলিমেন্ট হিসেবে তৈরি করা হয়, যেখানে প্রতিটি ডেটা পয়েন্টকে একটি নির্দিষ্ট স্থান ও মান প্রদর্শন করতে হবে। আমরা এই ডেটা পয়েন্টগুলিতে ইন্টারঅ্যাকশন যোগ করতে পারি, যেমন মাউস হোভার বা ক্লিক।
উদাহরণ: ডেটা পয়েন্ট তৈরি করা এবং মাউস হোভার ইন্টারঅ্যাকশন যোগ করা
// ডেটা পয়েন্ট তৈরি করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 5)
.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); // টুলটিপ লুকানো
});
এখানে:
mouseover: মাউস হোভার করলে ডেটা পয়েন্টের আকার বড় হবে এবং টুলটিপে তারিখ ও মান দেখাবে।mouseout: মাউস বের হলে ডেটা পয়েন্টের আকার আগের মতো হবে এবং টুলটিপ অদৃশ্য হয়ে যাবে।
৩. Tooltip তৈরি করা
টুলটিপ হলো একটি ছোট পপ-আপ উইন্ডো, যা ব্যবহারকারী মাউস হোভার করলে ডেটার বিস্তারিত তথ্য দেখায়।
// টুলটিপ তৈরি করা
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");
এখানে, টুলটিপটি শুরুতে গোপন থাকে এবং mouseover ইভেন্টে প্রদর্শিত হয়।
৪. Click Interaction (ক্লিক ইন্টারঅ্যাকশন)
ডেটা পয়েন্টে ক্লিক করলে বিভিন্ন ধরনের ইন্টারঅ্যাকশন করা যেতে পারে, যেমন, কোনো ডেটা পয়েন্টে ক্লিক করলে তার মান সম্পর্কে বিস্তারিত তথ্য দেখানো বা কোনো পরিবর্তন করা।
উদাহরণ: ডেটা পয়েন্টে ক্লিক করে মান দেখানো
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 5)
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", 1.5)
.on("click", function(event, d) {
alert("You clicked on: " + d.date.toLocaleDateString() + " with value: " + d.value);
});
এখানে, মাউস ক্লিক করলে একটি এলার্ট মেসেজ দেখানো হবে, যেখানে ক্লিক করা ডেটা পয়েন্টের তারিখ ও মান থাকবে।
৫. Zoom Interaction (জুম ইন্টারঅ্যাকশন)
ডেটার স্কেল এবং অক্ষের ভিউ পরিবর্তন করতে zoom ফিচার ব্যবহার করা যায়। এটি ব্যবহারকারীকে চার্টে জুম ইন বা জুম আউট করার সুযোগ দেয়।
উদাহরণ: জুম ইন্টারঅ্যাকশন যোগ করা
const zoom = d3.zoom()
.scaleExtent([1, 10]) // জুম স্কেল সীমা
.on("zoom", function(event) {
svg.attr("transform", event.transform); // জুম ইন/আউট প্রয়োগ করা
});
svg.call(zoom);
এখানে, zoom ফিচার যোগ করা হয়েছে, যা পুরো চার্টকে জুম ইন বা জুম আউট করতে সাহায্য করবে।
৬. Drag Interaction (ড্র্যাগ ইন্টারঅ্যাকশন)
ডেটা পয়েন্টগুলোকে ড্র্যাগ করার মাধ্যমে তাদের স্থান পরিবর্তন করা সম্ভব। এটি বিশেষ করে এমন ভিজ্যুয়ালাইজেশনের জন্য উপকারী যেখানে ডেটার অবস্থান পরিবর্তন করতে হবে।
উদাহরণ: ড্র্যাগ ইন্টারঅ্যাকশন যোগ করা
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => x(d.date))
.attr("cy", d => y(d.value))
.attr("r", 5)
.style("fill", "steelblue")
.style("stroke", "white")
.style("stroke-width", 1.5)
.call(d3.drag()
.on("drag", function(event, d) {
d3.select(this)
.attr("cx", event.x)
.attr("cy", event.y);
}));
এখানে, ব্যবহারকারী ডেটা পয়েন্টকে ড্র্যাগ করে তার অবস্থান পরিবর্তন করতে পারবেন।
৭. Multiple Interactions একসাথে ব্যবহার করা
D3.js এ আপনি একাধিক ইন্টারঅ্যাকশন একসাথে ব্যবহার করতে পারেন, যেমন মাউস হোভার, ক্লিক, ড্র্যাগ, জুম ইত্যাদি, যা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।
উদাহরণ: বিভিন্ন ইন্টারঅ্যাকশন একসাথে ব্যবহার করা
এখানে, মাউস হোভার, ক্লিক, এবং ড্র্যাগ ইন্টারঅ্যাকশন একসাথে ব্যবহৃত হয়েছে।
D3.js এর মাধ্যমে axes এবং data points এর জন্য বিভিন্ন ধরনের ইন্টারঅ্যাকশন যোগ করা সম্ভব। এটি ব্যবহারকারীকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে। আপনি মাউস হোভার, ক্লিক, ড্র্যাগ, জুম ইত্যাদি ইন্টারঅ্যাকশন যোগ করে ডেটা পয়েন্ট এবং অক্ষগুলোর সাথে আরও কার্যকরীভাবে কাজ করতে পারেন, যা আপনার ভিজ্যুয়ালাইজেশনকে আরও গতিশীল ও ইনফর্মেটিভ করে তোলে।
Read more
