Mouse Events এবং Interaction এর সাথে এনিমেশন

D3.js একটি ইন্টারঅ্যাকটিভ এবং ডাইনামিক ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে সাহায্য করে। এর মাধ্যমে আপনি মাউস ইভেন্টস (যেমন ক্লিক, হোভার) এবং ইন্টারঅ্যাকশন যুক্ত করতে পারেন, যাতে ব্যবহারকারী ডেটার সাথে ইন্টারঅ্যাক্ট করতে পারে। পাশাপাশি, D3.js এর শক্তিশালী এনিমেশন সাপোর্ট ব্যবহার করে আপনি ইন্টারঅ্যাকশনের মাধ্যমে ভিজ্যুয়াল উপাদানগুলোতে এনিমেশন যোগ করতে পারেন।

মাউস ইভেন্টস এবং ইন্টারঅ্যাকশন

D3.js-এ মাউস ইভেন্টস যেমন mouseover, mouseout, click ইত্যাদি ব্যবহৃত হয় DOM উপাদানগুলির সাথে ইন্টারঅ্যাকশন তৈরি করতে। এই ইভেন্টগুলির মাধ্যমে, আপনি ভিজ্যুয়ালাইজেশনের ওপর বিভিন্ন প্রভাব (যেমন রঙ পরিবর্তন, আকার পরিবর্তন) প্রয়োগ করতে পারেন।

১. মাউস ইভেন্টস ব্যবহার

D3.js-এ মাউস ইভেন্টগুলির সাথে কাজ করতে on() মেথড ব্যবহার করা হয়। এই মেথডটি DOM উপাদানগুলির জন্য ইভেন্ট হ্যান্ডলার সেট করে, যা মাউস ক্লিক বা হোভারের মতো ইভেন্টগুলির প্রতি প্রতিক্রিয়া জানায়।

উদাহরণ: mouseover এবং mouseout ইভেন্ট

// ডেটাসেট
const data = [50, 100, 150, 200, 250];

// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 400);

// বার চার্ট আঁকা
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 400 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .on("mouseover", function(event, d) {
       // মাউস হোভার হলে রঙ পরিবর্তন
       d3.select(this).style("fill", "orange");
   })
   .on("mouseout", function(event, d) {
       // মাউস আউট হলে পূর্ববর্তী রঙে ফিরে আসা
       d3.select(this).style("fill", "steelblue");
   });

এই উদাহরণে, বার চার্টে যখন আপনি মাউস হোভার করবেন, তখন বারটির রঙ পরিবর্তিত হবে এবং মাউস আউট হলে আগের রঙে ফিরে আসবে।

২. মাউস ক্লিক ইভেন্ট

click ইভেন্ট ব্যবহার করে, আপনি একটি উপাদানে ক্লিক করলে তার উপর একটি কার্যকলাপ (যেমন একটি বার আকারে পরিবর্তন) trigger করতে পারেন।

উদাহরণ: click ইভেন্ট

// বার চার্টে ক্লিক করলে আকার পরিবর্তন
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 400 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .on("click", function(event, d) {
       // ক্লিক করলে বারটির উচ্চতা পরিবর্তন
       d3.select(this)
         .transition()  // এনিমেশন শুরু
         .duration(500)  // 500 মিলিসেকেন্ড
         .attr("height", d => d + 50)  // উচ্চতা বাড়ানো
         .style("fill", "red");  // রঙ পরিবর্তন
   });

এই উদাহরণে, যখন আপনি একটি বার এ ক্লিক করবেন, তখন সেটি উঁচু হবে এবং তার রঙ রেডে পরিবর্তিত হবে। এনিমেশন দ্বারা এই পরিবর্তনটি ধীরে ধীরে ঘটবে।

D3.js এ এনিমেশন

D3.js-এ এনিমেশন তৈরি করা খুবই সহজ এবং এটি transition() মেথডের মাধ্যমে করা হয়। transition() মেথডটি একটি DOM উপাদানকে পরিবর্তন করতে সময় নিতে পারে, যা এনিমেশন হিসেবে কাজ করে। আপনি এনিমেশনটির গতি, ধরন, এবং অন্যান্য বৈশিষ্ট্যও কাস্টমাইজ করতে পারবেন।

৩. এনিমেশন এবং ইন্টারঅ্যাকশন একসাথে

D3.js-এ মাউস ইভেন্ট এবং এনিমেশন একসাথে ব্যবহার করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ব্যবহারকারী মাউস হোভার করলে একটি বার উপাদান ধীরে ধীরে বড় হয়ে যায়।

উদাহরণ: মাউস হোভার এ বার এর আকার পরিবর্তন এবং এনিমেশন

// ডেটাসেট
const data = [50, 100, 150, 200, 250];

// SVG ক্যানভাস তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 600)
              .attr("height", 400);

// বার চার্ট আঁকা
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", (d, i) => i * 60 + 50)
   .attr("y", d => 400 - d)
   .attr("width", 50)
   .attr("height", d => d)
   .style("fill", "steelblue")
   .on("mouseover", function(event, d) {
       // মাউস হোভার হলে আকার বাড়ানো এবং রঙ পরিবর্তন
       d3.select(this)
         .transition()  // এনিমেশন শুরু
         .duration(300)  // 300 মিলিসেকেন্ড
         .attr("height", d => d + 50)  // উচ্চতা বাড়ানো
         .style("fill", "orange");  // রঙ পরিবর্তন
   })
   .on("mouseout", function(event, d) {
       // মাউস আউট হলে পূর্ববর্তী অবস্থায় ফিরে আসা
       d3.select(this)
         .transition()  // এনিমেশন শুরু
         .duration(300)  // 300 মিলিসেকেন্ড
         .attr("height", d => d)  // উচ্চতা পূর্বাবস্থায় ফিরিয়ে আনা
         .style("fill", "steelblue");  // রঙ পূর্বাবস্থায় ফিরিয়ে আনা
   });

এই উদাহরণে, যখন আপনি একটি বার উপাদানে মাউস হোভার করবেন, তখন সেই বারটির উচ্চতা এবং রঙ ধীরে ধীরে পরিবর্তিত হবে এবং মাউস আউট হলে সেটি পূর্বাবস্থায় ফিরে আসবে।

D3.js-এ মাউস ইভেন্টস এবং ইন্টারঅ্যাকশন ব্যবহার করে আপনি ইন্টারঅ্যাক্টিভ এবং ডাইনামিক ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। এনিমেশন ব্যবহার করে, আপনি ডেটার পরিবর্তনকে আরও দৃষ্টিনন্দন এবং ব্যবহারকারী বান্ধব করে তুলতে পারেন। on() মেথডের মাধ্যমে বিভিন্ন ইভেন্ট হ্যান্ডলার এবং transition() মেথডের মাধ্যমে এনিমেশন তৈরি করা সম্ভব, যা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাক্টিভ এবং আকর্ষণীয় করে তোলে।