D3.js একটি শক্তিশালী টুল যা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে ডেটা পরিবর্তন এবং ভিজ্যুয়ালাইজেশন ডাইনামিকভাবে আপডেট করার সুযোগ প্রদান করে। এর মাধ্যমে ব্যবহারকারীরা বিভিন্ন ইনপুট, যেমন মাউস কন্ট্রোল, কিবোর্ড, বা স্লাইডার ব্যবহার করে ডেটা পরিবর্তন করতে পারে এবং সেই পরিবর্তনগুলি ভিজ্যুয়ালাইজেশনেও প্রতিফলিত হয়। D3.js এই ধরণের ইন্টারঅ্যাকশনের জন্য দুর্দান্ত ফিচার প্রদান করে, যেমন drag, click, mouseover, keydown ইত্যাদি ইভেন্ট হ্যান্ডলিং।
১. User Interaction এর ধরন
D3.js এর মাধ্যমে বিভিন্ন ধরনের ইন্টারঅ্যাকশন তৈরি করা যেতে পারে, যা ডেটা পরিবর্তন এবং ভিজ্যুয়ালাইজেশন পরিবর্তন করতে সহায়ক হয়। এর মধ্যে কয়েকটি সাধারণ ইন্টারঅ্যাকশন হলো:
- Click Interaction: কোন একটি এলিমেন্ট বা বাটনে ক্লিক করলে ডেটা পরিবর্তন বা আপডেট হয়।
- Mouseover Interaction: কোন একটি এলিমেন্টে মাউস হোভার করলে তার মান বা ভিজ্যুয়াল উপস্থাপন আপডেট হয়।
- Slider Interaction: স্লাইডারের মাধ্যমে ডেটার মান পরিবর্তন করা হয় এবং তা ভিজ্যুয়ালাইজেশনে প্রতিফলিত হয়।
- Drag Interaction: ব্যবহারকারী কিছু এলিমেন্ট ড্র্যাগ করে এক স্থান থেকে অন্য স্থানে নিয়ে যেতে পারে এবং সেই অনুযায়ী ডেটা পরিবর্তিত হয়।
২. Click Interaction দিয়ে ডেটা পরিবর্তন
উদাহরণ হিসেবে একটি বার চার্ট ব্যবহার করে দেখানো যাক, যেখানে ক্লিকের মাধ্যমে ডেটার মান পরিবর্তিত হবে।
২.১ Click Interaction উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Interaction in D3.js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
.bar {
fill: steelblue;
}
</style>
</head>
<body>
<svg width="500" height="300"></svg>
<script>
const svg = d3.select("svg");
const data = [30, 80, 45, 60, 20];
const width = 500;
const height = 300;
const xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([0, width])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(d))
.on("click", function(event, d) {
// Click করার পর ডেটার মান পরিবর্তন
const newData = Math.random() * 100;
const i = d3.select(this).data()[0]; // যেই বারের উপর ক্লিক করা হয়েছে
data[i] = newData; // ডেটার মান আপডেট
// বার আপডেট করা
d3.select(this)
.transition()
.duration(500)
.attr("y", yScale(newData))
.attr("height", height - yScale(newData)); // নতুন উচ্চতা
// yScale আপডেট করা
yScale.domain([0, d3.max(data)]);
// বার চার্ট পুনরায় আঁকা
svg.selectAll("rect")
.data(data)
.transition()
.duration(500)
.attr("y", d => yScale(d))
.attr("height", d => height - yScale(d));
});
</script>
</body>
</html>
ব্যাখ্যা:
- যখন ব্যবহারকারী একটি বার (rect) তে ক্লিক করবে, তখন ঐ বারটির ডেটা একটি র্যান্ডম মান দিয়ে আপডেট হবে।
on("click", function(event, d))ইভেন্ট হ্যান্ডলার দিয়ে ক্লিক ইন্টারঅ্যাকশন ট্রিগার করা হয়েছে।- আপডেট হওয়া ডেটা এবং ভিজ্যুয়াল প্রতিফলনটি স্মুথ ট্রানজিশনের মাধ্যমে করা হয়েছে।
৩. Mouseover Interaction দিয়ে ডেটা পরিবর্তন
mouseover ইভেন্ট ব্যবহার করে, ব্যবহারকারী যখন কোন এলিমেন্টের উপর মাউস রাখবে, তখন তার ডেটা বা ভিজ্যুয়াল রিপ্রেজেন্টেশন পরিবর্তিত হবে। এই ধরনের ইন্টারঅ্যাকশন সাধারণত টুলটিপ বা হাইলাইট করার জন্য ব্যবহৃত হয়।
৩.১ Mouseover Interaction উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouseover Interaction in D3.js</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<style>
.bar {
fill: steelblue;
}
.highlight {
fill: orange;
}
</style>
</head>
<body>
<svg width="500" height="300"></svg>
<script>
const svg = d3.select("svg");
const data = [30, 80, 45, 60, 20];
const width = 500;
const height = 300;
const xScale = d3.scaleBand()
.domain(d3.range(data.length))
.range([0, width])
.padding(0.1);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", (d, i) => xScale(i))
.attr("y", d => yScale(d))
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(d))
.on("mouseover", function(event, d) {
d3.select(this)
.attr("class", "highlight"); // হাইলাইট করা
})
.on("mouseout", function(event, d) {
d3.select(this)
.attr("class", "bar"); // মূল রঙে ফিরিয়ে আনা
});
</script>
</body>
</html>
ব্যাখ্যা:
- যখন মাউস একটি বার এলিমেন্টে আসে, তখন তার রঙ পরিবর্তিত হয়ে
highlightক্লাসে চলে যায়, এবং মাউস আউট হলে মূল রঙে ফিরে আসে।
৪. Slider Interaction দিয়ে ডেটা পরিবর্তন
input[type="range"] (Slider) ব্যবহার করে ডেটা পরিবর্তন করা যেতে পারে এবং সেই পরিবর্তনগুলি ভিজ্যুয়ালাইজেশনকে আপডেট করা যায়।
৪.১ Slider Interaction উদাহরণ
ব্যাখ্যা:
- স্লাইডারের মান পরিবর্তন হলে প্রথম বারটির উচ্চতা আপডেট হবে।
input[type="range"]এর মাধ্যমে ডেটার মান পরিবর্তন করে সেই অনুযায়ী চার্ট আপডেট হবে।
D3.js ব্যবহার করে ইন্টারঅ্যাকটিভ ডেটা ভিজ্যুয়ালাইজেশন তৈরি করা সম্ভব, যেখানে ব্যবহারকারীর ইনপুটের ভিত্তিতে ডেটা পরিবর্তিত হয় এবং ভিজ্যুয়ালাইজেশন আপডেট হয়। Click, mouseover, slider, drag ইত্যাদি ইন্টারঅ্যাকশনের মাধ্যমে ভিজ্যুয়াল উপস্থাপনকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করা যায়, যা ইউজারের অভিজ্ঞতা উন্নত করতে সহায়ক।
Read more
