ট্রানজিশন এবং অ্যানিমেশন

ডি৩জেএস (D3JS) - Web Development

364

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

ট্রানজিশন কি?

D3.js-এ ট্রানজিশন হল একটি উপাদান বা শেপের অবস্থান বা বৈশিষ্ট্য ধীরে ধীরে পরিবর্তন করার প্রক্রিয়া। ট্রানজিশন ব্যবহার করে আপনি যে কোনো DOM উপাদানের বৈশিষ্ট্য পরিবর্তন করতে পারেন এবং এটি কিছু সময়ের মধ্যে, নির্দিষ্ট সময় ফ্রেমে সম্পন্ন হয়।

ট্রানজিশন তৈরি করা

transition() মেথড ব্যবহার করে ট্রানজিশন শুরু করা হয় এবং duration() মেথড দ্বারা তার সময়কাল নির্ধারণ করা হয়।

সিনট্যাক্স:

d3.select("element")
  .transition()
  .duration(1000)  // 1 সেকেন্ড
  .attr("attribute", value);  // বৈশিষ্ট্য পরিবর্তন

উদাহরণ: একটি বৃত্তের আকার পরিবর্তন করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Transition Example</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>

    <svg width="500" height="500"></svg>

    <script>
        // SVG নির্বাচন
        const svg = d3.select("svg");

        // বৃত্ত তৈরি
        svg.append("circle")
           .attr("cx", 100)
           .attr("cy", 100)
           .attr("r", 50)
           .attr("fill", "steelblue");

        // বৃত্তের আকার পরিবর্তন করা
        svg.select("circle")
           .transition()
           .duration(2000)  // 2 সেকেন্ড
           .attr("r", 100);  // রেডিয়াস বৃদ্ধি
    </script>

</body>
</html>

ব্যাখ্যা:

এখানে একটি বৃত্ত তৈরি করা হয়েছে, যার রেডিয়াস শুরুতে ৫০ পিক্সেল ছিল। ট্রানজিশনের মাধ্যমে, রেডিয়াস ২ সেকেন্ডে ১০০ পিক্সেলে বৃদ্ধি পাচ্ছে।

ট্রানজিশন কাস্টমাইজেশন

D3.js-এ ট্রানজিশনের সময়, আপনি আরো অনেক কিছু কাস্টমাইজ করতে পারেন যেমন:

delay(): ট্রানজিশনের শুরুতে বিলম্ব যোগ করা।
ease(): ট্রানজিশনের গতি নির্ধারণ (যেমন সোজা, ধীরে শুরু, দ্রুত শেষ ইত্যাদি)।

উদাহরণ: বিলম্ব এবং ইজ ফাংশন

// বিলম্ব এবং ইজ ফাংশন দিয়ে ট্রানজিশন কাস্টমাইজ
svg.select("circle")
   .transition()
   .delay(500)  // 0.5 সেকেন্ড পর শুরু
   .duration(2000)  // 2 সেকেন্ড
   .ease(d3.easeBounce)  // বাউন্স এফেক্ট
   .attr("r", 150);  // রেডিয়াস বৃদ্ধি

এখানে, ট্রানজিশনটি 0.5 সেকেন্ড পর শুরু হবে এবং একটি বাউন্সিং ইফেক্টের সাথে সম্পন্ন হবে।

অ্যানিমেশন কি?

অ্যানিমেশন হল কোনো উপাদানের বৈশিষ্ট্য পরিবর্তন করার প্রক্রিয়া যা টানা একাধিক স্টেপে ঘটে। এটি ডাইনামিক বা অটোমেটিক উপাদান পরিবর্তন করতে ব্যবহৃত হয়। D3.js-এ, অ্যানিমেশন সাধারণত ট্রানজিশন এবং setInterval বা requestAnimationFrame ব্যবহার করে তৈরি করা হয়।

উদাহরণ: বার চার্টের অ্যানিমেশন

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Bar Chart Animation</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>

    <svg width="500" height="400"></svg>

    <script>
        const data = [30, 80, 45, 60, 20, 90, 55];
        
        const svg = d3.select("svg");

        const x = d3.scaleBand()
                    .domain(d3.range(data.length))
                    .range([0, 500])
                    .padding(0.1);

        const y = d3.scaleLinear()
                    .domain([0, d3.max(data)])
                    .range([400, 0]);

        // বার চার্ট তৈরি
        const bars = svg.selectAll("rect")
                        .data(data)
                        .enter()
                        .append("rect")
                        .attr("x", (d, i) => x(i))
                        .attr("y", 400)
                        .attr("width", x.bandwidth())
                        .attr("height", 0)
                        .attr("fill", "orange");

        // অ্যানিমেশন দিয়ে বারগুলির উচ্চতা বৃদ্ধি
        bars.transition()
            .duration(1000)
            .attr("y", (d) => y(d))
            .attr("height", (d) => 400 - y(d));  // বারগুলির উচ্চতা সেট করা
    </script>

</body>
</html>

ব্যাখ্যা:

এখানে ডেটাসেট অনুযায়ী বার চার্ট তৈরি করা হয়েছে। বারগুলো প্রথমে ০ উচ্চতায় তৈরি হচ্ছে এবং তারপর ট্রানজিশন ব্যবহার করে এক সেকেন্ডের মধ্যে তাদের উচ্চতা বৃদ্ধি পাচ্ছে এবং সঠিক স্থানে চলে যাচ্ছে।

ট্রানজিশনের সাথে ইভেন্ট হ্যান্ডলিং

D3.js-এ আপনি ট্রানজিশন প্রক্রিয়া চলাকালীন ইভেন্ট হ্যান্ডলারও যোগ করতে পারেন। উদাহরণস্বরূপ, একটি এলিমেন্টে ক্লিক করলে তার উপর ট্রানজিশন প্রক্রিয়া ঘটানো যায়।

উদাহরণ: ক্লিক করলে বৃত্তের আকার পরিবর্তন

svg.append("circle")
   .attr("cx", 100)
   .attr("cy", 100)
   .attr("r", 50)
   .attr("fill", "steelblue")
   .on("click", function(event) {
       d3.select(this)
         .transition()
         .duration(1000)
         .attr("r", 100);  // ক্লিক করার পর বৃত্তের আকার বৃদ্ধি
   });

ব্যাখ্যা:

এখানে, একটি বৃত্ত তৈরি করা হয়েছে এবং এতে ক্লিক করলে বৃত্তটির আকার ধীরে ধীরে ১০০ পিক্সেলে বৃদ্ধি পাবে।

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

Content added By

Azizar Rahman Aziz

D3.js এ Transition এবং Animation এর ভূমিকা

350

D3.js এ Transition এবং Animation ব্যবহার করা হয় ডেটা ভিজ্যুয়ালাইজেশনে ইন্টারঅ্যাকটিভ এবং ডাইনামিক পরিবর্তন আনার জন্য। ট্রানজিশন ও অ্যানিমেশন ভিজ্যুয়ালাইজেশনকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে, বিশেষ করে যখন ডেটা পরিবর্তিত হয় বা নতুন ডেটা যুক্ত হয়।

১. Transition এর ধারণা

Transition হচ্ছে একটি সময়ের মধ্যে বিভিন্ন ধরণের পরিবর্তন (যেমন, পজিশন, আকার, রঙ ইত্যাদি) ধীরে ধীরে সম্পন্ন করা। D3.js এ transition() মেথড ব্যবহার করে একটি DOM উপাদানকে একটি নির্দিষ্ট সময়ের মধ্যে অন্য অবস্থায় পরিবর্তিত করা হয়।

১.১ Transition ব্যবহার

সিনট্যাক্স:

d3.select("element")
  .transition() // ট্রানজিশন শুরু
  .duration(time) // সময় নির্ধারণ (মিলিসেকেন্ডে)
  .attr("attribute", value); // অ্যাট্রিবিউট পরিবর্তন

উদাহরণ:

d3.select("circle")
  .transition() 
  .duration(1000) // 1 সেকেন্ডের জন্য ট্রানজিশন
  .attr("cx", 400) // X অবস্থান পরিবর্তন
  .attr("cy", 200) // Y অবস্থান পরিবর্তন
  .style("fill", "orange"); // রঙ পরিবর্তন

এটি একটি circle এর অবস্থান এবং রঙ পরিবর্তন করবে, এবং এটি 1 সেকেন্ডের মধ্যে সম্পন্ন হবে।

২. Animation এর ধারণা

Animation হচ্ছে একটি নির্দিষ্ট সময়ের মধ্যে একাধিক পরিবর্তন বা ইফেক্ট তৈরি করা, যা প্রতিটি ক FRAME বা স্টেপে কিছু পরিবর্তন প্রদর্শন করে। D3.js এ, Transition এর মাধ্যমে Animation তৈরি করা যায়। তবে transition() মেথড দিয়ে একাধিক স্তরের পরিবর্তন এবং সময় নির্ধারণ করা হয়, যা এক ধরনের অ্যানিমেশন তৈরির মতো কাজ করে।

২.১ Animation ব্যবহার

সিনট্যাক্স:

d3.select("element")
  .transition() // ট্রানজিশন শুরু
  .duration(time) // সময় নির্ধারণ
  .ease(easeType) // অ্যানিমেশনের ধরণ (ease-in, ease-out, linear ইত্যাদি)
  .attr("attribute", value); // পরিবর্তন

উদাহরণ:

d3.select("rect")
  .transition()
  .duration(1500)
  .ease(d3.easeBounce) // বাউন্স ইফেক্ট
  .attr("x", 400)
  .attr("width", 100);

এটি একটি rect এর অবস্থান এবং আকারে বাউন্স অ্যানিমেশন যোগ করবে।

৩. Transition এবং Animation এর কার্যকারিতা

ইন্টারঅ্যাকশন তৈরি করা: ব্যবহারকারী যখন কিছু ইন্টারঅ্যাকশন করে (যেমন ক্লিক, হোভার), তখন ট্রানজিশন বা অ্যানিমেশন ব্যবহার করা যেতে পারে যাতে ভিজ্যুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ ও স্মুথ মনে হয়।
ডেটার পরিবর্তন প্রদর্শন: যখন ডেটা পরিবর্তিত হয়, তখন ট্রানজিশন ব্যবহার করে সেই পরিবর্তন স্মুথ এবং ন্যাচারালভাবে প্রদর্শন করা যায়।
ভিজ্যুয়াল আকর্ষণ বাড়ানো: একটি স্নিগ্ধ অ্যানিমেশন বা ট্রানজিশন ডেটা ভিজ্যুয়ালাইজেশনকে আরও আকর্ষণীয় করে তোলে, যা ব্যবহারকারীর মনোযোগ আকর্ষণ করে এবং বুঝতে সাহায্য করে।
ডেটার অর্থপূর্ণ উপস্থাপনা: ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে ডেটার মধ্যে সম্পর্ক এবং পরিবর্তন বুঝানো সহজ হয়, যেমন একাধিক মানের মধ্যে ধীরে ধীরে পরিবর্তন বা বারের আকার পরিবর্তন।

৪. Transition এর বিশেষ বৈশিষ্ট্য

duration(): ট্রানজিশনের সময়কাল নির্ধারণ করে (মিলিসেকেন্ডে)।
ease(): ট্রানজিশনের ধরণ নির্ধারণ করে (যেমন, ease-linear, ease-in, ease-out, ease-cubic ইত্যাদি)।
delay(): ট্রানজিশনের শুরুতে একটি বিলম্ব যোগ করা।
attr(), style(), text() ইত্যাদি মেথডের মাধ্যমে DOM উপাদানগুলির পরিবর্তন করা।

৫. Complex Transition উদাহরণ

একাধিক ট্রানজিশন একসাথে প্রয়োগ করা যেতে পারে, যেমন একটি গ্রাফের মধ্যে বারগুলির আকার, রঙ, এবং অবস্থান পরিবর্তন।

উদাহরণ: একাধিক ট্রানজিশন

d3.selectAll("rect")
  .data([30, 80, 45, 60, 20])
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * 60)
  .attr("y", 0)
  .attr("width", 50)
  .attr("height", d => d)
  .style("fill", "steelblue")
  .transition()
  .duration(1000)
  .attr("y", d => 200 - d) // Y অবস্থান পরিবর্তন
  .style("fill", "orange") // রঙ পরিবর্তন
  .delay((d, i) => i * 200); // প্রতিটি বার আলাদা সময়ে ট্রানজিশন হবে

এটি পাঁচটি বার তৈরি করবে এবং সেগুলির জন্য একাধিক ট্রানজিশন প্রয়োগ করবে, যেমন বারের অবস্থান এবং রঙ পরিবর্তন।

D3.js এর Transition এবং Animation এর মাধ্যমে ডেটা ভিজ্যুয়ালাইজেশন আরো আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ হতে পারে। ব্যবহারকারী যখন ডেটার পরিবর্তন দেখতে চায়, তখন ট্রানজিশন ও অ্যানিমেশন দ্বারা সেই পরিবর্তন স্মুথ এবং ডাইনামিক উপায়ে প্রদর্শন করা হয়। D3.js এ ট্রানজিশন এবং অ্যানিমেশন ডেটার ভিতরে থাকা সম্পর্ক এবং গুরুত্ব সহজে প্রকাশ করতে সাহায্য করে, যা একটি কার্যকর ভিজ্যুয়ালাইজেশন তৈরিতে সহায়ক।

Content added By

Azizar Rahman Aziz

Transition মেথড ব্যবহার করে এনিমেশন তৈরি

351

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

Transition মেথডের মৌলিক ধারণা

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

১. Transition মেথড ব্যবহার

সিনট্যাক্স:

d3.select("element")
  .transition()         // Transition শুরু
  .duration(1000)       // সময় (milliseconds)
  .ease(d3.easeLinear)  // ইasing ফাংশন
  .attr("attribute", value);  // নতুন অ্যাট্রিবিউট

বিশদ ব্যাখ্যা:

transition(): ট্রানজিশন শুরু করার জন্য এটি কল করা হয়।
duration(): ট্রানজিশনের সময়কাল, মিলিসেকেন্ডে (যেমন 1000 মিলিসেকেন্ড = 1 সেকেন্ড)।
ease(): ইasing ফাংশন যা ট্রানজিশনকে আরও ন্যাচারাল বা সোজা করতে সাহায্য করে।
attr(), style(), text(): এই মেথডগুলির মাধ্যমে DOM উপাদানের অ্যাট্রিবিউট, স্টাইল বা টেক্সট পরিবর্তন করা হয়।

২. Transition মেথডের উদাহরণ

উদাহরণ ১: বারের উচ্চতা পরিবর্তন

এখানে একটি বার চার্ট তৈরি করা হবে এবং এর উপর Transition মেথড ব্যবহার করে বারের উচ্চতা ধীরে ধীরে পরিবর্তন করা হবে।

const data = [30, 80, 45, 60, 120];

// SVG ক্যানভাস তৈরি
const svgWidth = 500;
const svgHeight = 300;
const barWidth = svgWidth / data.length;

const svg = d3.select("#chart")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);

// বার চার্ট তৈরি
const bars = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * barWidth)
    .attr("y", svgHeight)
    .attr("width", barWidth - 5)
    .attr("height", 0)
    .style("fill", "steelblue");

// Transition এ মাধ্যমে বার গুলোর উচ্চতা বাড়ানো
bars.transition()
    .duration(1500)      // 1.5 সেকেন্ডে ট্রানজিশন হবে
    .attr("y", d => svgHeight - d)  // y পজিশন পরিবর্তন
    .attr("height", d => d);       // বার উচ্চতা পরিবর্তন

ব্যাখ্যা:

প্রথমে rect এলিমেন্টের height 0 এবং y svgHeight সেট করা হয়েছে (যাতে সেগুলি স্ক্রীনে দৃশ্যমান না হয়)।
তারপর transition() মেথড ব্যবহার করে বারের উচ্চতা ধীরে ধীরে d (ডেটা) মান অনুযায়ী বৃদ্ধি করা হচ্ছে।

উদাহরণ ২: বারের রঙ পরিবর্তন

এখন, আমরা বারের রঙ পরিবর্তন করব একটি ট্রানজিশন ব্যবহার করে।

// SVG ক্যানভাস
const svg = d3.select("#chart")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight);

// বার তৈরি করা
const bars = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * barWidth)
    .attr("y", svgHeight)
    .attr("width", barWidth - 5)
    .attr("height", 0)
    .style("fill", "steelblue");

// ট্রানজিশন ব্যবহার করে রঙ পরিবর্তন
bars.transition()
    .duration(1500)
    .style("fill", "orange");  // রঙ পরিবর্তন

এটি বারের রঙকে ১.৫ সেকেন্ডে orange রঙে পরিবর্তন করবে।

৩. ইasing ফাংশন ব্যবহার

Easing ফাংশন D3.js-এ ব্যবহৃত হয় ট্রানজিশনের গতিকে নিয়ন্ত্রণ করতে। এতে বিভিন্ন ধরনের ইasing ফাংশন রয়েছে, যেমন easeLinear, easeBounce, easeElastic, ইত্যাদি।

উদাহরণ ৩: Bounce ইasing ফাংশন

bars.transition()
    .duration(1500)
    .ease(d3.easeBounce)  // Bounce ইasing ব্যবহার
    .attr("y", d => svgHeight - d)
    .attr("height", d => d);

এখানে Bounce ইasing ফাংশন ব্যবহার করা হয়েছে, যা ট্রানজিশনটির শেষের দিকে একটি বাউন্সিং ইফেক্ট তৈরি করবে।

৪. Transition-এ Delay এবং Repeat ব্যবহার

D3.js-এ আপনি delay() মেথড ব্যবহার করে ট্রানজিশন শুরু করার আগে কিছু বিলম্ব যোগ করতে পারেন। এছাড়াও, ট্রানজিশন পুনরায় চালানো যায়।

উদাহরণ ৪: Delay এবং পুনরাবৃত্তি

bars.transition()
    .delay(500)          // 0.5 সেকেন্ড পর ট্রানজিশন শুরু হবে
    .duration(1500)
    .attr("y", d => svgHeight - d)
    .attr("height", d => d)
    .on("end", function() {
        d3.select(this)
          .transition()    // ট্রানজিশন শেষ হলে পুনরায় শুরু হবে
          .duration(1000)
          .style("fill", "green");
    });

এটি প্রথমে বারের উচ্চতা পরিবর্তন করবে এবং পরে রঙ পরিবর্তন করবে। এতে ট্রানজিশনের শেষে একটি পুনরাবৃত্তি দেখা যাবে।

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

Content added By

Azizar Rahman Aziz

Custom Easing Functions

240

D3.js-এ Custom Easing Functions ব্যবহার করে অ্যানিমেশন এবং ট্রান্সফর্মেশনগুলিকে আরও ন্যাচুরাল এবং কাস্টমাইজড করা সম্ভব। Easing হল একটি কৌশল যা অ্যানিমেশন চলাকালীন মানের গতি বা প্রক্রিয়ায় পরিবর্তন ঘটায়, যেমন দ্রুত শুরু হওয়া, ধীর হয়ে শেষ হওয়া, অথবা একসাথে শুরুর পরে ধীর হতে থাকা। D3.js-এ আমরা d3.ease() ফাংশন ব্যবহার করে বিভিন্ন প্রাক-নির্ধারিত easing ফাংশন এবং কাস্টম easing ফাংশন তৈরি করতে পারি।

১. D3.js এ Easing Functions

D3.js এ easing functions হল বিভিন্ন ফাংশন যা ট্রান্সফরমেশন বা অ্যানিমেশন চলাকালীন গতি নিয়ন্ত্রণ করে। D3.js এর easing ফাংশনগুলি ডিফল্টভাবে নিম্নলিখিত কিছু প্রধান টাইপে আসে:

easeLinear: সাধারণ লিনিয়ার গতি (constant speed)
easeCubicIn: শুরুতে ধীর, শেষে দ্রুত (acceleration at the start)
easeCubicOut: শুরুতে দ্রুত, শেষে ধীর (deceleration at the end)
easeBounceIn: বাউন্সি, নিচে থেকে উপরে উঠছে (bouncy effect)
easeElastic: স্ট্রেচ এবং রিলিজ, ইলাস্টিক মুভমেন্ট
easeSinIn, easeSinOut: সাইন তরঙ্গের মতো গতি

ডিফল্ট easing ফাংশনগুলির পাশাপাশি, D3.js-এ আপনি Custom Easing Functions তৈরি করতে পারেন, যা আপনাকে আরও কাস্টমাইজড অ্যানিমেশন তৈরি করতে সহায়ক হয়।

২. Custom Easing Functions

Custom Easing Functions তৈরি করতে, আপনি d3.ease() এর মাধ্যমে একটি কাস্টম ম্যাথমেটিক্যাল ফাংশন পাস করতে পারেন যা অ্যানিমেশনের গতি নিয়ন্ত্রণ করবে।

২.১ কাস্টম Easing Function তৈরি করা

আপনি যদি একটি সম্পূর্ণ কাস্টম easing ফাংশন তৈরি করতে চান, যা আপনার অ্যানিমেশনটির গতি নির্ধারণ করবে, তাহলে আপনি একটি নিজস্ব ফাংশন তৈরি করতে পারেন। D3.js-এ easing functions সাধারণত 0 থেকে 1 এর মধ্যে মান গ্রহণ করে, এবং আপনি এর মধ্যে মানে পরিবর্তন করতে পারেন।

উদাহরণ: কাস্টম Easing ফাংশন তৈরি করা

// কাস্টম easing ফাংশন তৈরি
function customEase(t) {
  return Math.pow(t, 3); // এখানে আমরা কিউবিক easing ব্যবহার করছি
}

// ডেটা সেট
const data = [30, 50, 80, 120, 200];

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 40)
   .attr("height", 0)  // শুরুতে উচ্চতা 0
   .attr("x", (d, i) => i * 60)
   .attr("y", 300) // শুরুতে Y কোঅর্ডিনেট 300
   .style("fill", "steelblue")
   .transition() // অ্যানিমেশন শুরু
   .duration(1000) // অ্যানিমেশন সময়কাল
   .ease(customEase) // কাস্টম easing ফাংশন
   .attr("height", d => d * 3)  // উচ্চতা অনুযায়ী পরিবর্তন
   .attr("y", d => 300 - d * 3);  // Y কোঅর্ডিনেট আপডেট

এখানে, customEase ফাংশন একটি কিউবিক easing ফাংশন তৈরি করেছে, যা একটি গ্রাজুয়ালি বৃদ্ধি পাওয়া গতি প্রয়োগ করে। আপনি এখানে যে কোন কাস্টম ম্যাথমেটিক্যাল এক্সপ্রেশন ব্যবহার করতে পারেন, যেমন:

// কাস্টম easing ফাংশন উদাহরণ
function customEase(t) {
  return Math.sin(t * Math.PI / 2);  // সাইন ফাংশন ভিত্তিক easing
}

এই ফাংশনটি অ্যানিমেশনটিকে সাইন তরঙ্গের মতো প্রাকৃতিক গতি দিবে।

৩. D3.js তে Custom Easing এর সাথে Animation

D3.js-এ কাস্টম easing ফাংশন ব্যবহৃত হলে, এটি আপনার অ্যানিমেশনকে আরও স্লো, ফাস্ট বা আরও ন্যাচুরাল হতে সাহায্য করে। নিচের উদাহরণে, bar chart-এর বারগুলির উচ্চতা পরিবর্তন হতে দেখা যাবে কাস্টম easing ফাংশনের মাধ্যমে।

উদাহরণ: কাস্টম easing ফাংশন সহ বার চার্ট অ্যানিমেশন

// ডেটাসেট
const data = [40, 80, 120, 150, 200];

// Custom easing function
function customEase(t) {
  return Math.sqrt(t); // স্কয়ার রুট easing
}

// SVG এলিমেন্ট তৈরি
const svg = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 300);

// বার চার্ট তৈরি
svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("width", 40)
   .attr("height", 0)  // শুরুতে উচ্চতা 0
   .attr("x", (d, i) => i * 60)
   .attr("y", 300) // শুরুতে Y কোঅর্ডিনেট 300
   .style("fill", "orange")
   .transition() // অ্যানিমেশন শুরু
   .duration(1500) // অ্যানিমেশন সময়কাল
   .ease(customEase) // কাস্টম easing ফাংশন
   .attr("height", d => d * 2) // উচ্চতা পরিবর্তন
   .attr("y", d => 300 - d * 2);  // Y কোঅর্ডিনেট আপডেট

এখানে, Math.sqrt(t) একটি স্কয়ার রুট easing ফাংশন তৈরি করেছে, যার মাধ্যমে অ্যানিমেশনটি ধীরগতিতে শুরু হবে এবং শেষে দ্রুত হবে।

৪. D3.js এর প্রাক-নির্ধারিত Easing Functions

D3.js-এ বেশ কিছু প্রাক-নির্ধারিত easing ফাংশন রয়েছে, যেমন:

easeLinear: লিনিয়ার অ্যানিমেশন, মানের গতি একই থাকবে।
easeCubicIn: ধীর গতিতে শুরু, দ্রুত গতিতে শেষ।
easeCubicOut: দ্রুত গতিতে শুরু, ধীর গতিতে শেষ।
easeElastic: ইলাস্টিক রিটার্নের মত গতি।
easeBounce: বাউন্সি গতি।
easeSinIn: সাইন ফাংশন অনুসরণ করে ধীর গতিতে শুরু।
easeSinOut: সাইন ফাংশন অনুসরণ করে দ্রুত গতিতে শেষ।

উদাহরণ:

d3.select("rect")
  .transition()
  .duration(1000)
  .ease(d3.easeBounce) // Bounce easing ফাংশন
  .attr("height", 200)
  .attr("y", 100);

Custom Easing Functions D3.js-এ অ্যানিমেশনকে আরও কাস্টমাইজড এবং প্রাকৃতিক করে তোলে। আপনি যদি চান, আপনি নিজে একটি easing ফাংশন তৈরি করতে পারেন বা D3.js এর প্রাক-নির্ধারিত easing ফাংশনগুলিও ব্যবহার করতে পারেন। d3.ease() এবং কাস্টম easing ফাংশনগুলির মাধ্যমে, আপনি বার চার্ট বা যেকোনো ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাকটিভ এবং স্মুথ করতে পারেন।

Content added By

Azizar Rahman Aziz

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

286

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() মেথডের মাধ্যমে এনিমেশন তৈরি করা সম্ভব, যা ভিজ্যুয়ালাইজেশনকে আরও ইন্টারঅ্যাক্টিভ এবং আকর্ষণীয় করে তোলে।

Content added By

Azizar Rahman Aziz

D3.js পরিচিতি D3.js সেটআপ এবং ইনস্টলেশন সিলেকশন এবং ডেটা বাইন্ডিং SVG এলিমেন্ট তৈরি এবং ম্যানিপুলেশন ডেটা স্কেল এবং এক্সেস ফাংশন

ট্রানজিশন এবং অ্যানিমেশন

ট্রানজিশন কি?

ট্রানজিশন তৈরি করা

উদাহরণ: একটি বৃত্তের আকার পরিবর্তন করা

ট্রানজিশন কাস্টমাইজেশন

উদাহরণ: বিলম্ব এবং ইজ ফাংশন

অ্যানিমেশন কি?

উদাহরণ: বার চার্টের অ্যানিমেশন

ট্রানজিশনের সাথে ইভেন্ট হ্যান্ডলিং

উদাহরণ: ক্লিক করলে বৃত্তের আকার পরিবর্তন

D3.js এ Transition এবং Animation এর ভূমিকা

১. Transition এর ধারণা

১.১ Transition ব্যবহার

উদাহরণ:

২. Animation এর ধারণা

২.১ Animation ব্যবহার

উদাহরণ:

৩. Transition এবং Animation এর কার্যকারিতা

৪. Transition এর বিশেষ বৈশিষ্ট্য

৫. Complex Transition উদাহরণ

উদাহরণ: একাধিক ট্রানজিশন

Transition মেথড ব্যবহার করে এনিমেশন তৈরি

Transition মেথডের মৌলিক ধারণা

১. Transition মেথড ব্যবহার

বিশদ ব্যাখ্যা:

২. Transition মেথডের উদাহরণ

উদাহরণ ১: বারের উচ্চতা পরিবর্তন

উদাহরণ ২: বারের রঙ পরিবর্তন

৩. ইasing ফাংশন ব্যবহার

উদাহরণ ৩: Bounce ইasing ফাংশন

৪. Transition-এ Delay এবং Repeat ব্যবহার

উদাহরণ ৪: Delay এবং পুনরাবৃত্তি

Custom Easing Functions

১. D3.js এ Easing Functions

২. Custom Easing Functions

২.১ কাস্টম Easing Function তৈরি করা

৩. D3.js তে Custom Easing এর সাথে Animation

৪. D3.js এর প্রাক-নির্ধারিত Easing Functions

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

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

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

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

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

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

D3.js এ এনিমেশন

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

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

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

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

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